Javascript get input value and Change Heading text

For example, Javascript get input value and Change Heading text...

Demo

HTML

<h2 id="title">Enter value in Input field.</h2> 
<br>
<input type="text" id="inputTextField"/>
<input type="submit" id="changeBtn" value="Change" onclick="change()"/>
<div class="alertError">please write some text in input.</div>

CSS

<style>
    h2#title { 
        font-size: 30px; 
        line-height:100%; 
    }
    .alertError { 
        color:red; 
        display:none; 
    }
</style>

Javascript

function change(){
 
   var newTitle = document.getElementById('inputTextField').value;
   if( newTitle.length==0 ){
       $('.alertError').show();
   return;
   }
   
   var title = document.getElementById('title');
   title.innerHTML = newTitle;
}

$('#inputTextField').keyup(function() {
    $('.alertError').hide();
});