DOM - Warmup Exercise

by Colin Cheevers

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 btn = document.getElementById("the-button");
var input = document.getElementById("new-text");
var header = document.getElementsByTagName("h1");



btn.addEventListener('click',
    function (e) {
    	console.log('test');
        console.log('Tab1 clicked', e);
    	if(input.value == null || input.value =='')
        {
            console.log('Do Nothing');
        }
    	else
        {
            header[0].innerHTML = input.value;  
            input.value='';
            
        }
    e.preventDefault();
    },
    false // use capture method
);