CODEWITHSUNDEEP
javascripthtmlarraysonclickhelper
David Rönnlid
David Rönnlid

Reputation: 91

Onclick display of class elements not working

I'm trying to get descriptions of acronyms (tag===p) to display when I press the button (tag===button):

function myFunction() {
  for (let i = 0; i > x.length; i++) {

    var x = [];
    x.push(document.getElementsByClassName("toggleAcronym"));
    for (let j = 0; j > x.length; j++)
      if (x[i][j].style.display === "none") {
        x[i][j].style.display = "block";
      }
  }
}
#p6Acronyms {
  width: 50%;
  border: 1px solid blue;
  margin: 0 auto;
  padding: 20px;
}

.toggleAcronym {
  display: none;
}
<!DOCTYPE HTML5>
<html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Intellectual Principles</title>
  <meta name="description" content="sats">
  <meta name="author" content="satser">
  <link rel="stylesheet" type="text/css" href="Principles.css">
  <script type="text/javascript" src="Principles.js"></script>
</head>

<body>

  <div id="p6Acronyms">
    <button onclick="myFunction()">RWE</button>
    <p class="toggleAcronym">Real World Example</p>
    <button onclick="myFunction()">CRUD</button>
    <p class="toggleAcronym">Create, Read, Update, Delete</p>
    <button onclick="myFunction()">CNS</button>
    <p class="toggleAcronym">Central Nervous System</p>
    <button onclick="myFunction()">MPS</button>
    <p class="toggleAcronym">Muscle Protein Synthesis</p>
    <button onclick="myFunction()">I.e.</button>
    <p class="toggleAcronym">In essence</p>
    <button onclick="myFunction()">ALAP</button>
    <p class="toggleAcronym">As Long As Possible</p>
    <button onclick="myFunction()">AMAP</button>
    <p class="toggleAcronym">As Much As Possible</p>
    <button onclick="myFunction()">CoC</button>
    <p class="toggleAcronym">Contents of Consciousness</p>
    <button onclick="myFunction()">RR(P)(F)-R</button>
    <p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>
    <button onclick="myFunction()">AoL</button>
    <p class="toggleAcronym">Area of Life (=Intellectual, Physical, Relationships & Intellectual)</p>
    <button onclick="myFunction()">MBS</button>
    <p class="toggleAcronym">Mind Body & Spirit</p>
    <button onclick="myFunction()">QoC</button>
    <p class="toggleAcronym">Quality of Consciousness</p>
    <button onclick="myFunction()">PFC</button>
    <p class="toggleAcronym">Pre-Frontal Cortex</p>
    <button onclick="myFunction()">SRV</button>
    <p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors directional effect on this.)</p>
    <button onclick="myFunction()">P/T-R</button>
    <p class="toggleAcronym">Practice/Theory-Ratio</p>
  </div>

</body>

</html>

I suspect the JS is incorrect but can't figure out how to get it right. I don't know how to push every element of a certain class to an array and then for every element in that array, if button is clicked, display paragraph. I'm new to JavaScript and don't understand what to do with this error message:

"message": "Uncaught TypeError: Cannot read property 'length' of undefined"

, thanks for the help.

Upvotes: 1

Views: 169

Answers (2)

professional debugger
professional debugger

Reputation: 345

Add id with each paragraph and pass that id to the myFunction()

<button onclick="myFunction('RWE')">RWE</button><p id="RWE" class="toggleAcronym">Real World Example</p>

and in myFunction

    function myFunction(x) {
               if(document.getElementById(x).style.display === "block"){

                   document.getElementById(x).style.display = "none";
              }else{

                document.getElementById(x).style.display = "block";
              }
}

works perfect i tried it

Upvotes: 0

The fourth bird
The fourth bird

Reputation: 163217

If you want to toggle the texts of the paragraphs, you don't need an array. You could pass this to myFunction(this). Then in the function, toggle the display of the nextSibling which is the paragraph:

function myFunction(elm) {
  var display = elm.nextSibling.style.display;
  if (display === "none" || display === "") {
    elm.nextSibling.style.display = "block";
  } else {
    elm.nextSibling.style.display = "none";
  }
}
#p6Acronyms {
  width: 50%;
  border: 1px solid blue;
  margin: 0 auto;
  padding: 20px;
}

.toggleAcronym {
  display: none;
}
<div id="p6Acronyms">
    <button onclick="myFunction(this)">RWE</button><p class="toggleAcronym">Real World Example</p>
    <button onclick="myFunction(this)">CRUD</button><p class="toggleAcronym">Create, Read, Update, Delete</p>
    <button onclick="myFunction(this)">CNS</button><p class="toggleAcronym">Central Nervous System</p>
    <button onclick="myFunction(this)">MPS</button><p class="toggleAcronym">Muscle Protein Synthesis</p>
    <button onclick="myFunction(this)">I.e.</button><p class="toggleAcronym">In essence</p>
    <button onclick="myFunction(this)">ALAP</button><p class="toggleAcronym">As Long As Possible</p>
    <button onclick="myFunction(this)">AMAP</button><p class="toggleAcronym">As Much As Possible</p>
    <button onclick="myFunction(this)">CoC</button><p class="toggleAcronym">Contents of Consciousness</p>
    <button onclick="myFunction(this)">RR(P)(F)-R</button><p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>
    <button onclick="myFunction(this)">AoL</button><p class="toggleAcronym">Area of Life (=Intellectual, Physical, Relationships & Intellectual)</p>
    <button onclick="myFunction(this)">MBS</button><p class="toggleAcronym">Mind Body & Spirit</p>
    <button onclick="myFunction(this)">QoC</button><p class="toggleAcronym">Quality of Consciousness</p>
    <button onclick="myFunction(this)">PFC</button><p class="toggleAcronym">Pre-Frontal Cortex</p>
    <button onclick="myFunction(this)">SRV</button><p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors directional effect on this.)</p>
    <button onclick="myFunction(this)">P/T-R</button><p class="toggleAcronym">Practice/Theory-Ratio</p>
</div>

Upvotes: 1

Related Questions