javascript函数执行。在 onclick 事件上放置一个函数不起作用答案

【问题标题】：javascript functions execution. put a function over the onclick event does not workjavascript函数执行。在 onclick 事件上放置一个函数不起作用
【发布时间】：2019-01-12 01:26:12
【问题描述】：

为什么当我以这种方式放置我的代码时：（代码运行良好）

<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>

请帮助我，当我按下按钮时，导航栏会显示在按钮下方，就像第二个示例一样。但不允许我这样做，而是我必须把按钮放在上面，但我不想要那个

【问题讨论】：

与其直接在元素上插入你的函数，不如给你的按钮一个 id 并附加你的处理程序：document.getElementById('[your button id]').onclick = function() {.....}？
我已经尝试过，但不起作用
不确定您的预期行为是什么。您说“当我按下按钮时，导航栏显示在按钮下方”。你的意思是你想在按下按钮时显示/隐藏导航栏，显示导航栏的位置应该在按钮下方？
是的，我希望导航栏显示/隐藏在按钮上，但我不能把它放在按钮上，只有在导航低于时才让我显示/隐藏
我无法重现您目前面临的情况。但是如果你的代码在<div> 放在<nav> 之前时运行良好，那么问题可能是由于var content = this.nextElementSibling; 行引起的。尝试用var content = this.previousElementSibling; 替换它。或者，也许您可以在此处发布一个最小的 css，以便我们可以体验您所面临的情况。

标签： javascript function execution

【解决方案1】：

尝试在加载 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);

【讨论】：