Onclick отображение элементов класса не работает - PullRequest
Новая
       6

Onclick отображение элементов класса не работает

0 голосов
/ 24 ноября 2018

Я пытаюсь получить описания сокращений (tag===p), отображаемых при нажатии кнопки (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>

Я подозреваю, что JS неверен, но не могу понять, как это сделать правильно.Я не знаю, как поместить каждый элемент определенного класса в массив, а затем для каждого элемента этого массива, если нажата кнопка, отобразить абзац.Я новичок в JavaScript и не понимаю, что делать с этим сообщением об ошибке:

"message": "Uncaught TypeError: Невозможно прочитать свойство 'length' of undefined"

, спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 24 ноября 2018

Добавить идентификатор с каждым абзацем и передать этот идентификатор в myFunction () 

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

и в myFunction 

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

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

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

работает отлично, я попробовал это

0 голосов
/ 24 ноября 2018

Если вы хотите переключать тексты абзацев, вам не нужен массив.Вы можете передать this на myFunction(this).Затем в функции переключите display из nextSibling, который является абзацем: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...