Выполнение функций JavaScript. поставить функцию поверх события onclick не работает - PullRequest
Новая
       22

Выполнение функций JavaScript. поставить функцию поверх события onclick не работает

0 голосов
/ 12 января 2019

Почему, когда я ставлю свой код таким образом: (код работает отлично) 

<div onclick="lightOn()" class="start-button dropbtn collapsible">
  <div class="start-button-push dropbtn">
    <div id="light" class="start-button-light dropbtn"></div>
      <p class="start-button-text start dropbtn">START</p>
  </div>
</div>

<nav id="myDropdown" class="dropdown content">
  <div class="nav-list">
    <a href="#" class="nav-items">MARCAS</a>
    <a href="#" class="nav-items">REVIEWS</a>
    <a href="#" class="nav-items">NOTICIAS</a>
    <a href="#" class="nav-items">PREMIOS</a>
    <a href="#" class="nav-items">GUIA DE COMPRA</a>
  </div>
</nav>

Но когда я ставлю свой код таким образом: (код не работает) 

<nav id="myDropdown" class="dropdown content">
  <div class="nav-list">
    <a href="#" class="nav-items">MARCAS</a>
    <a href="#" class="nav-items">REVIEWS</a>
    <a href="#" class="nav-items">NOTICIAS</a>
    <a href="#" class="nav-items">PREMIOS</a>
    <a href="#" class="nav-items">GUIA DE COMPRA</a>
  </div>
</nav>

<div onclick="lightOn()" class="start-button dropbtn collapsible">
  <div class="start-button-push dropbtn">
    <div id="light" class="start-button-light dropbtn"></div>
      <p class="start-button-text start dropbtn">START</p>
  </div>
</div>

Я не понимаю, почему это не работает в одну сторону, а работает в другую сторону.

Я оставил сценарий таким же для 2 примеров. 

<script>
  function lightOn() {
    var x = document.getElementById('light');
    if (x.style.background !== 'gold') {
        x.style.background = 'gold';
        document.getElementById("myDropdown").classList.toggle("show");
        // document.getElementById("myDropdown").style.width = "250px";

    } else {
        x.style.background = 'black';
        document.getElementById("myDropdown").classList.toggle("show");
        // document.getElementById("myDropdown").style.width = "0";

      }
    }

  var coll = document.getElementsByClassName("collapsible");
  var i;

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      } 
    });
  }
</script>

, пожалуйста, помогите мне, мне нужно, чтобы при нажатии кнопки навигационная панель отображалась под кнопкой, как во втором примере. но не позволяет мне делать это, вместо этого я должен положить кнопку, но я не хочу, чтобы это

1 Ответ

0 голосов
/ 12 января 2019

Попробуйте поставить свой скрипт после загрузки dom:

// JQuery 

$(document).ready(function(){ 
  function lightOn() {
    var x = document.getElementById('light');
    if (x.style.background !== 'gold') {
        x.style.background = 'gold';
        document.getElementById("myDropdown").classList.toggle("show");
        // document.getElementById("myDropdown").style.width = "250px";

    } else {
        x.style.background = 'black';
        document.getElementById("myDropdown").classList.toggle("show");
        // document.getElementById("myDropdown").style.width = "0";

      }
    }

  var coll = document.getElementsByClassName("collapsible");
  var i;

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      } 
    });
  }
});


//JS
document.addEventListener('DOMContentLoaded', function(){ 

  function lightOn() {
    var x = document.getElementById('light');
    if (x.style.background !== 'gold') {
        x.style.background = 'gold';
        document.getElementById("myDropdown").classList.toggle("show");
        // document.getElementById("myDropdown").style.width = "250px";

    } else {
        x.style.background = 'black';
        document.getElementById("myDropdown").classList.toggle("show");
        // document.getElementById("myDropdown").style.width = "0";

      }
    }

  var coll = document.getElementsByClassName("collapsible");
  var i;

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      } 
    });
  }

 }, false);
...