DOM - Warmup Exercise

by manu troiani

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!
 */
 
/*button.addEventListener("click", function mySubmitFunction(evt) {
  evt.preventDefault();
    alert('my click');
  //return false;
     console.log( document.getElementById('new-text').value.length );
    if ( document.getElementById('new-text').value.length > 0 ){
        var h1text = document.getElementsByTagName('h1')[0].innerText;
       	alert( ' h1text'+ h1text);
    }       
});
*/

/*
$( "input" ).click(function( event ) {
  event.preventDefault();
  $( "<div>" )
    .append( "default " + event.type + " prevented" )
    .appendTo( "#log" );
});*/


function notify(evt) {
  evt.preventDefault();
  if ( document.getElementById('new-text').value.length > 0) {
 	 alert( "text is not empty"   );
     var h1text = document.getElementsByTagName('h1')[0].innerText;
     
           }
}
$( "#the-button" ).on( "click", notify );

/*
$( "input:text.items" ).val(function( index, value ) {
  return value + " " + this.className;
});



<input type="text" value="some text">
<p></p>
 

$( "input" )
  .keyup(function() {
    var value = $( this ).val();
    $( "p" ).text( value );
  })
  .keyup();

*/