Функция javaScript для показа и скрытия HTML-дивидов не работает - PullRequest
Новая
       0

Функция javaScript для показа и скрытия HTML-дивидов не работает

0 голосов
/ 23 октября 2018

Признаюсь, я не делал javaScript или html в течение 20 лет, и я забыл много.Что не так с этой HTML-страницей?Он отображает кнопку и два блока div.При первом щелчке оба div должны исчезнуть.Первый div должен появиться при следующем нажатии.Оба элемента должны появиться при третьем щелчке.Последующие клики должны повторить цикл.Ничего не происходит, когда я нажимаю кнопку. 

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>

Ответы [ 3 ]

0 голосов
/ 23 октября 2018

Пожалуйста, найдите ниже правильный сценарий. 

<!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>
0 голосов
/ 23 октября 2018

Сравнение равенства и одинаковость

В JavaScript ==== не является допустимым оператором.

Для сравнения необходимо использовать === (для обоих значение и тип проверка) или == (только для значение проверка) и для назначения необходимо использовать =.

Вы такжеесть некоторая синтаксическая ошибка в 

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

Измените это на 

<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>
0 голосов
/ 23 октября 2018

Поскольку ==== не является допустимым оператором в JavaScript

Ваша функция должна быть 

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>

Естьпосмотрите операторы javascript для подробной информации

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...