如何显示显示：无DIV使用Javascript

Question

I have a DIV which has a display set to none, by using javascript I tried showing it by using the onclick of a button. But what happens is the exact opposite. My DIV is already shown and when I click the button it hides the DIV. What am i doing wrong here, please HELP!

This is my button and the div:

<button onclick="myFunction()">SHOW</button>
    <div id="how_to_form">
      <img src="../images/view.png">
    </div>

This is the JS code:

function myFunction() {
     var x = document.getElementById("how_to_form").style.display = 'none';
     if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

Answer 1

have you checked if you have already set a default style to your div? you either have to set your div's default style to display:none by inline

<div id="how_to_form" style="display:none">

or by css

<style>
    #how_to_form{ display:none }
</style>

Answer 2

Your line there has a double assignment:

var x = document.getElementById("how_to_form").style.display = 'none';

It first assigns the display to none:

document.getElementById("how_to_form").style.display = 'none';

and then takes the result of that expression (which is the string you assigned), and assigns it to x :

var x = 'none';

Which isn't what you want. First declare the variable for the element, then assign its style.

Also, it sounds like you want the element to start out hidden - assign its initial style outside the function:

const form = document.getElementById("how_to_form");
form.style.display = 'none';
function myFunction() {
  if (form.style.display === "none") {
    form.style.display = "block";
  } else {
    form.style.display = "none";
  }
}

Or, to be more concise, use the conditional operator:

function myFunction() {
  form.style.display = form.style.display === "none"
  ? 'block'
  : 'none';
}

Also consider attaching the handler properly using Javascript, rather than using inline HTML attributes, which are generally considered to be pretty poor practice and can be hard to manage:

document.querySelector('button').addEventListener('click', myFunction);

Answer 3

Issue is your variable assignment

Chaining the assignment operator is possible in order to assign a single value to multiple variables.

Please refer this link for variable assignment options https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators

var x = y= 10

Then both x and y values are 10

Similarly in your code var x is none

To achieve expected result , use below option
1. set CSS for html_to_form to display:none 2.In your code change variable x assignment to var x = document.getElementById("html_to_form")