Onclick javascript函数仅在第二次点击时起作用答案

【问题标题】：Onclick javascript function working only on second clickOnclick javascript函数仅在第二次点击时起作用
【发布时间】：2017-04-22 09:06:32
【问题描述】：

function toggleDivFunction() {
  var arrowElement = document.getElementById("arrowRight");
  var showElement = document.getElementById("dropdownText");
  arrowElement.onclick = function() {
    if (showElement.style.display == 'none') {
      showElement.style.display = 'block';
      document.getElementById("arrowRight").style = "transform: rotate(+90deg)";
    } else {
      showElement.style.display = 'none';
      document.getElementById("arrowRight").style = "transform: rotate(0deg)";
    }
  }
}

<p class="dropdownHeader">TOP <span id="arrowRight" class="arrowRight" onclick="toggleDivFunction();"> > </span></p>
<div class="dropdownText" id="dropdownText"><p>TEXT TO BE SHOWN</p></div>

问题是dropdownText div 仅在第二次单击arrowRight 范围后才会显示。我将其视为一个常见问题，但仍然未能找到解决方案。任何帮助，将不胜感激。

【问题讨论】：

只需删除它： arrowElement.onclick = function() { } 您在应该捕获您的事件的函数中添加一个事件侦听器。没什么大不了的！

标签： javascript html css events click

【解决方案1】：

您不需要在另一个click 事件处理程序中使用bind 一个click 事件处理程序。您必须使用单个 click 事件处理程序。

show/hide 功能属于第二个click 事件处理程序，这是binded 在第一个click 之后的span DOM 元素。

function toggleDivFunction () {
   var arrowElement = document.getElementById ("arrowRight");
   var showElement = document.getElementById ("dropdownText");
   if(showElement.style.display == 'none')
   {
      showElement.style.display = 'block'; 
      document.getElementById("arrowRight").style = "transform: rotate(+90deg)";
   }
   else
   {
      showElement.style.display = 'none';
      document.getElementById("arrowRight").style = "transform: rotate(0deg)";
   }
}

<p class="dropdownHeader">TOP <span id="arrowRight" class="arrowRight" onclick="toggleDivFunction();"> > </span></p>
<div class="dropdownText" id="dropdownText">
<p>TEXT TO BE SHOWN</p></div>

【讨论】：

【解决方案2】：

只是添加到批准的答案。

检查showElement.style.display == ''。
此外，如果您默认使用display = 'none'，则在第一次单击时切换到 flex。

例子：

..
if (showElement.style.display == 'none' || showElement.style.display == '') {
..

如果文本的样式是display = 'none'。

【讨论】：

【解决方案3】：

您想提前分配事件处理程序：

window.onload=toggleDivFunction;

并删除 onclick='toggleDivFunction()'，它在当时是不必要的，而且过时了。

您的代码会在触发事件时分配一个侦听器 (toggleDivFunction)。要触发侦听器 (arrowElement.onclick)，您需要引发另一个事件进行 第二次点击。

【讨论】：

【解决方案4】：

删除arrowElement.onclick = function() {}

为什么？

你已经用arrowRight .so 应用了onclick=toggleDivFunction() 中的函数首先执行toggleDivFunction() 然后执行Dom arrowElement.onclick 。使用任何一个 onclick 功能，不能同时使用

function toggleDivFunction() {
  var arrowElement = document.getElementById("arrowRight");
  var showElement = document.getElementById("dropdownText");
    if (showElement.style.display == 'none') {
      showElement.style.display = 'block';
      document.getElementById("arrowRight").style = "transform: rotate(+90deg)";
    } else {
      showElement.style.display = 'none';
      document.getElementById("arrowRight").style = "transform: rotate(0deg)";
    }
}

<p class="dropdownHeader">TOP <span id="arrowRight" class="arrowRight" onclick="toggleDivFunction();"> > </span></p>
<div class="dropdownText" id="dropdownText">
  <p>TEXT TO BE SHOWN</p>
</div>

【讨论】：