HTML: attribute double quotes not working-

user_14129689 0
Viewed 407

<!-- button line has  the error message "tag start  is not closed"single quotes fixes the problem,which is confusing since double quotes is supposed to work on everything -->

<body>

  <h2> what can javascript do?</h2>

  <p id="demo">javascript can hide html elemnts.</p>

  <button type="button" onclick="document.getElementById('demo').style.display=" none "">click me!</button>

</body>

html javascript
6 Answers

Use single quotes; Doube quotes will end the string which are you passing to the onclick attribute, leading to a systax error when the string is parsed as javascript. It will be interpreted as:

onclick="document.getElementById('demo').style.display="


<!doctype html>

<html>

<!-- button line has  the error message "tag start  is not closed"single quotes fixes the problem,which is confusing since double quotes is supposed to work on everything -->

<body>

<h2> what can javascript do?</h2>

<p id="demo">javascript can hide html elemnts.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">click me!</button>


</body>

</html>

user_10422010

The onclick property is all lower-case, and accepts a function, not a string and as you are using Double quotes, you should use single quote in the other place.

user_115756590

Try this snippet ..

Using single quotes

 onclick='document.getElementById("demo").style.display="none"'


<!doctype html>

<html>

<!-- button line has  the error message "tag start  is not closed"single quotes fixes the problem,which is confusing since double quotes is supposed to work on everything -->

<body>

<h2> what can javascript do?</h2>

<p id="demo">javascript can hide html elemnts.</p>

<button type="button" onclick='document.getElementById("demo").style.display="none"'>click me!</button>


</body>

</html>

Using double quotes

 onclick="document.getElementById('demo').style.display='none'"


<!doctype html>

<html>

<!-- button line has  the error message "tag start  is not closed"single quotes fixes the problem,which is confusing since double quotes is supposed to work on everything -->

<body>

<h2> what can javascript do?</h2>

<p id="demo">javascript can hide html elemnts.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">click me!</button>


</body>

</html>

user_133686580

It's better for code readability and to handle such cases, if you create a function that will be invoked when clicked on a button would be a better option.

function onclickhandle(){
  console.log("hidden")
  document.getElementById('demo').style.display='none';
}
<!-- button line has  the error message "tag start  is not closed"single quotes fixes the problem,which is confusing since double quotes is supposed to work on everything -->


<h2> what can javascript do?</h2>

<p id="demo">javascript can hide html elemnts.</p>

<button type="button"onclick="onclickhandle()">click me!</button>

user_128114790

Try This

onCLick="document.querySelector('#demo').style.display='none'"
user_110955090

Just use a single quote within a double quote as following :

onclick=" document.getElementById('demo').style.display='none' "
user_108174370
Related