How to edit HTML label text and apply CSS using Javascript?

Question

I'm working on This Problem on the first studio of module 8 in CS50x. Basically I just want edit that label and apply the CSS with Javascript if an error is encountered, but I don't know enough about the syntax to do so. I've looked everywhere on the web and nothing has helped me break through. Any advice? I've included snippets of code that might paint you a better picture of what I need to do.

// first we get a bunch of DOM elements that we will need:

// the form
var form = document.getElementById("form-google");

// the div container that holds stuff relating to the username field
var usernameContainer = document.getElementById("field-username");

// the text input where the user shold type their name
var usernameInput = usernameContainer.querySelector("input"); // the querySelector() function gives us the first <input> child element of usernameContainer

// the div container that holds stuff relating to the search ("q") field
var searchContainer = document.getElementById('field-search'); // TODO something similar to usernameContainer

// the text input where the user types their search query 
var searchInput = searchContainer.querySelector('input'); // TODO something similar to usernameInput



// set a function that will be executed every time the form is submitted
form.onsubmit = validate(event);

---

clearFeedback(searchContainer);
var search = searchInput.value;
var searchIsValid = search.length > 0;
if (searchIsValid == false) {
    giveFeedback(searchContainer, "Search something!");
}

---

/**
 * given a container <div> and an error message, sets the child <label> to display the error message,
 * and sets the child <input> to have the "input-invalid" class so that our CSS will give it a red border
 */
function giveFeedback(container, message) {
    // TODO 
    // HINT: do something similar to clearFeedback() (see below)

}

/**
 * given a container <div>, resets the <input> and <label> inside to be "normal", ie not colored red or reporting any errors
 */
function clearFeedback(container) {
    var textInput = container.querySelector("input");
    textInput.className = "";
    var feedbackLabel = container.querySelector(".feedback-error");
    feedbackLabel.innerHTML = "";
}

---

<form id="form-google" action="https://www.google.com/search" method="get">
    <div id="field-username" class="container-field">
        <label>Your name:</label>
        <br/>
        <input name="username" type="text"/>
        <label class="feedback-error">EDIT THIS LABEL</label>
    </div>
    <div id="field-search" class="container-field">
        <label>Search:</label>
        <br/>
        <input name="q" type="text"/>
        <label class="feedback-error">OR THIS LABEL</label>
    </div>
    <br/>
    <input type="submit" value="Googly Moogly Search"/>
</form>

---

// CSS
.input-invalid {
    border-color: red;
    border-width: 1px;
    border-style: solid;
}

.feedback-error {
    color: red;
}

Answer 1

Before you spend too much time researching this on the web, just look closely at the distribution code provided. If I recall correctly, you won't need to change the HTML or CSS files, just the JavaScript.

Look at the code for the clearFeedback() function. Straight-up copy that into the giveFeedback() function, and edit it to fit the new context.

If you look at the values you are un-setting (i.e., setting to the empty string) in the clearFeedback() function, it should be obvious to you how to apply the 'input-invalid' class name to the text input.

Don't worry about the content of the feedback error message yet -- you can pass the message variable to this function, and worry about constructing the correct string to store in that variable elsewhere.

By the way, if this answer helps you out, be sure to accept it by clicking on the green checkmark. Otherwise, the forum will leave it marked as "unanswered" forever, and it will never die! ;)