underline text with click of a button JavaScript

Question

I am learning JavaScript what am i missing here? When i click on me click me i want the text to change to underline.

<p id="demo" style=" 
text-decoration:none;

">Hello JavaScript!</p>


<button type="button" onclick="document.getElementById('demo').style.text-decoration='underline'">Click Me!</button>

Answer 1

The problem is style.text-decoration. Change that to style['text-decoration']:

<p id="demo" style=" 
text-decoration:none;

">Hello JavaScript!</p>


<button type="button" onclick="document.getElementById('demo').style['text-decoration']='underline'">Click Me!</button>

You can read more about this here.

Answer 2

You need to use textDecoration instead of text-decoration.

<p id="demo" style=" 
text-decoration:none;

">Hello JavaScript!</p>


<button type="button" onclick="document.getElementById('demo').style.textDecoration='underline'">Click Me!</button>