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

Posted 2023-04-13

【中文标题】javascript函数执行。在 onclick 事件上放置一个函数不起作用

【英文标题】：javascript functions execution. put a function over the onclick event does not work

【发布时间】：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，以便我们可以体验您所面临的情况。

【参考方案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);