Javascript get input value and Change Heading text

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

Demo

Enter value in Input field.


please write some text in input.

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();
}); 

Copyright 2016 by WebiBeris.com. All Rights Reserved.