Onclick display of class elements not working

Question

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.

You need to define variable x in this line for (let i=0; i>x.length; i++) { but you have an x variable already in this line var x=[] — McBern
– McBern, Commented Nov 24, 2018 at 11:36

The fourth bird · Accepted Answer · 2018-11-24 11:55:53Z

1

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>

edited Nov 24, 2018 at 11:55

answered Nov 24, 2018 at 11:41

The fourth bird

165k16 gold badges61 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hoangfin Over a year ago

Your code does not run with error message "Uncaught TypeError: Cannot read property 'display' of undefined"

David Rönnlid Over a year ago

Great, thank you, hadn't used "this" as a funcion argument like that, very helpful.

The fourth bird Over a year ago

@Ronnlidd You are welcome. If this answer helped you solving your problem, feel free to mark it as accepted.

professional debugger · Accepted Answer · 2018-11-24 12:27:47Z

0

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

edited Nov 24, 2018 at 12:27

answered Nov 24, 2018 at 11:48

professional debugger

3454 silver badges23 bronze badges

1 Comment

David Rönnlid Over a year ago

Thanks, I prefer The Fourth Birds' answer due to more readable code.

Collectives™ on Stack Overflow

Onclick display of class elements not working

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related