0

I'm creating a div element to test hiding and showing an element in JS for my calendar program. I have a function that uses x.style.display to render or hide the div, "info", in the page. But it doesn't work when I test it; when I click the button the "info" div stays on the screen as normal.

function show() {
  var divide = document.getElementById("info").innerHTML;
  if (divide.style.display === "hidden") {
    divide.style.display = "block";
  } else {
    divide.style.display = "hidden";
  }
}
<button onclick="show()">Show/Hide</button>
<div class="info">Testy</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Met3oR
  • 3
  • 1
  • 3
  • put `` at the end of the `body` – Sindhara Dec 17 '20 at 16:53
  • What have you tried to debug the problem? And how is this related to PHP? – Nico Haase Dec 17 '20 at 16:54
  • `document.getElementById("info")` What element has this **ID**? – j08691 Dec 17 '20 at 16:55
  • Remove **.innerHtml** because you are setting divide to the HTML (text string) instead of the DOM Node. The DOM node has the style property, strings do not. – Ralph Ritoch Dec 17 '20 at 16:57
  • You have `var divide = document.getElementById("info").innerHTML;` but your `div` uses a `class`. Current: `var divide = document.getElementById("info").innerHTML;`What it should be: `var divide = document.getElementsByClassName("info")[0].innerHTML;` Your `
    `: `
    Testy
    `
    – Rojo Dec 17 '20 at 17:00
  • That question does not answer this person's question. This person has a syntax error. – Rojo Dec 17 '20 at 17:00
  • remove innerHTML, change class to id on div and change hidden with none and it works – Lety Dec 17 '20 at 17:07

1 Answers1

4

You have used innerHtml is use to assign string. So remove that and hide you can use display:none not hidden.

function show() {
  var divide = document.getElementById("info");
  if (divide.style.display === "none") {
    divide.style.display = "block";
  } else {
    divide.style.display = "none";
  }
}
<div id="info">Testy</div>
<button onclick="show()">Show/Hide</button>