CODEWITHSUNDEEP
javascripthtmlfunction
Carl Carlson
Carl Carlson

Reputation: 540

javaScript function for showing and hiding html divs doesn't work

I confess I have not done javaScript or html for 20 years, and I have forgotten lots. What's wrong with this html page? It displays a button and two div blocks. On the first click, both divs should disappear. The first div should appear on the next click. Both divs should appear on the third click. Subsequent clicks should repeat the cycle. Nothing happens when I click the button.

function myFunction(namesDiv, valuesDiv) {

  var nD = document.getElementById(namesDiv);
  var vD = document.getElementById(valuesDiv);
  if (vD.style.display ==== "none") {
    vD.style.display ==== "block";
    nD.style.display ==== "none";
  } else if (nD.style.display ==== "none") {
    nD.style.display ==== "block";
  } else {
    nD.style.display ==== "none";
    vD.style.display ==== "none";
  }
}
<html>
<button onclick="myFunction(\"divID0.955919\",\"divID0.956012\")"> Report Outline</button>
<div id="divID0.956012">
  <p>Image goes here</p>
  <p>Comment goes here</p>
</div>
<div id="divID0.955919">
  <ul>
    <li>Bull Pucky1 </li>
    <li>Bull Pucky2 </li>
  </ul>
</div>
</html>

Upvotes: 0

Views: 92

Answers (3)

Mamun
Mamun

Reputation: 68933

Equality comparisons and sameness

In JavaScript ==== is not a valid operator.

For comparison you have to use === (for both value and type check) or == (for only value check) and for assignment you have to use =.

You also have some syntax error in

<button onclick="myFunction(\"divID0.955919\",\"divID0.956012\")"> Report Outline</button>

Change that to

<button onclick="myFunction('divID.0955919','divID.0956012')"> Report Outline</button>


function myFunction(namesDiv,valuesDiv){
  var nD = document.getElementById(namesDiv);
  var vD = document.getElementById(valuesDiv);

  if (vD.style.display === "none")
  {
      vD.style.display = "block";
      nD.style.display = "none";
  }
  else if (nD.style.display === "none")
  {
      nD.style.display = "block";
  }
  else
  {
      nD.style.display = "none";
      vD.style.display = "none";
  }
}
<!DOCTYPE html>
<html>
<head> <title>Page Title</title> </head>
<body> 
    <button onclick="myFunction('divID.0955919','divID.0956012')"> Report Outline</button>
    <div id="divID.0956012">
        <p>Image goes here</p>
        <p>Comment goes here</p>
    </div>
    <div id="divID.0955919">
        <ul>
            <li>Bull Pucky1 </li>
            <li>Bull Pucky2 </li>
        </ul>
    </div>
</body>
</html>

Upvotes: 2

Vijay Singh
Vijay Singh

Reputation: 1

Please find below the correct script.

<!DOCTYPE html>
<html>
<head> <title>Page Title</title> </head>
<body> <script>

        function myFunction(namesDiv,valuesDiv)
        {
            var nD = document.getElementById(namesDiv);
            var vD = document.getElementById(valuesDiv);
            if (vD.style.display === "none")
            {
                vD.style.display = "block";
                nD.style.display = "none";
            }
            else if (nD.style.display === "none")
            {
                nD.style.display = "block";
            }
            else
            {
                nD.style.display = "none";
                vD.style.display = "none";
            }
        }
    </script>
    <button onclick="myFunction('divID0.955919','divID0.956012')"> Report Outline</button>
    <div id="divID0.956012">
        <p>Image goes here</p>
        <p>Comment goes here</p>
    </div>
    <div id="divID0.955919">
        <ul>
            <li>Bull Pucky1 </li>
            <li>Bull Pucky2 </li>
        </ul>
    </div>
</body>`enter code here`
</html>

Upvotes: 0

Suryan
Suryan

Reputation: 659

As ==== is not a valid operator in javascript

Your function should be

function myFunction(namesDiv, valuesDiv) {

  var nD = document.getElementById(namesDiv);
  var vD = document.getElementById(valuesDiv);
  if (vD.style.display == "none") {
    vD.style.display = "block";
    nD.style.display = "none";
  } else if (nD.style.display == "none") {
    nD.style.display = "block";
  } else {
    nD.style.display = "none";
    vD.style.display = "none";
  }
 }

and this should be your html

<button onclick="myFunction('divID0.955919','divID0.956012')"> Report Outline</button>
<div id="divID0.956012">
    <p>Image goes here</p>
    <p>Comment goes here</p>
</div>
<div id="divID0.955919">
    <ul>
        <li>Bull Pucky1 </li>
        <li>Bull Pucky2 </li>
    </ul>
</div>

Have a look at javascript operators for detailed information

Upvotes: 3

Related Questions