Update Header with JavaScript

JavaScript, HTML, CSS

by Sayham Chowdhury

HTML

<h1 id="title">"Default Header"</h1> 
<span id="alert"></span> </br>
<input type="text" id="textBox"/>
<input type="submit" id="inputTxt" value="Submit" onclick="changeHeader()"/>

CSS

#title{
  color: teal;
}
#alert{
  color: red;
}
#inputTxt{
  color: blue;
  font-weight: bold;
  padding: 2px;
}
#inputTxt:hover{
  color: teal;
}

JavaScript

function changeHeader(){
   var newHeader = document.getElementById('textBox').value;
   var alert = document.getElementById('alert');
   if( newHeader.length == 0 ){
   alert.innerHTML = "Write new HEADER inside the text box...";
   return;
   }
   var title = document.getElementById('title');
   title.innerHTML = newHeader;
   alert.innerHTML = "";
}