CODEWITHSUNDEEP
javascriptcss
Zaeem
Zaeem

Reputation: 23

Why does the Underline function in JavaScript not working?

function underline() {

  var text = document.getElementById("note_header").style.textDecoration;

  if (text == 'normal') {
    document.getElementById("note_header").style.textDecoration = 'Underline';
  } else {
    document.getElementById("note_header").style.textDecoration = 'normal';
  }
}
<input id="btn" type="button" value="Underline" name="btn" onclick="underline()">

Upvotes: 1

Views: 260

Answers (2)

Guillaume Georges
Guillaume Georges

Reputation: 4020

normal is not an accepted value for text-decoration. Use none instead.

function underline(){
  var text = document.getElementById("note_header").style.textDecoration;
  
  if (text !== 'underline'){
    document.getElementById("note_header").style.textDecoration = 'underline';
  } else{
    document.getElementById("note_header").style.textDecoration = 'none';
  }
}
<textarea id="note_header"  rows="3" cols="15">
That's my note
</textarea><br/>
<input id="btn" type="button" value="Underline" name="btn" onclick="underline()">

Upvotes: 1

Sourabh Somani
Sourabh Somani

Reputation: 2138

Try this

function underline(){
  var text = document.getElementById("note_header").style.textDecoration;
  if (text == 'none'){
    document.getElementById("note_header").style.textDecoration = 'Underline';
  } else{
    document.getElementById("note_header").style.textDecoration = 'none';
  }
}
<a href="#" id="note_header" style="text-decoration:none;">This is anchor</a>
<input id="btn" type="button" value="Underline" name="btn" onclick="underline()">

Upvotes: 0

Related Questions