DOM - Warmup Exercise

by Shane Porter

HTML

<!-- Remember, you're not allowed to change the HTML! -->

<h1>Good Morning!</h1>

<form>
    <input type="text" id="new-text" placeholder="Type here..." />
    <input type="submit" value="Change" id="the-button" />
</form>

JavaScript

/*
 * Desired functionality:
 *
 * 1. User clicks on the "Change" button.
 * 2. If the text input is blank then nothing changes.
 * 3. The contents of the H1 element are replaced with the contents
 *    of the text input.
 * 4. The text input is cleared.
 * 
 * Use devdocs if you don't know the DOM API by heart!
 */
var button = document.getElementById("the-button");
var header1 = document.getElementsByTagName("h1");
var inputText2 = document.getElementById("new-text");

button.addEventListener("click", function(event) {
    // REMEMBER TO USE = FOR ASSIGNMENT AND == / === FOR CHECKS
    if (inputText2.value == '') {
    }
    else {
        header1[0].textContent = inputText2.value;
        inputText2.value = '';
    }
    event.preventDefault();
});

/** Darren's

var hd = document.getElementsByTagName("h1");
var btn = document.getElementById("the-button");
var txt = document.getElementById("new-text");

btn.addEventListener("click", function(evt){
if(txt.value !== ""){
   	hd[0].textContent = txt.value;
       txt.value = "";
   }
   evt.preventDefault();
},false);

**/