Onclick事件不起作用的第一次点击

当页面加载我需要点击按钮两次触发onclick()函数。这样做后，一切都按预期工作。Onclick事件不起作用的第一次点击

由于我是这个网络开发领域的新手，我会高度赞赏详细的解释。

预先感谢您。

var hamburger = function() { 
 
    var menu = document.getElementById('menuBarSlide'); 
 
    if (menu.style.right == "-300px") { 
 
    menu.style.right = "0px"; 
 
    } else { 
 
    menu.style.right = "-300px"; 
 
    } 
 
}

<div class="navMenuItem hamburger" onclick="hamburger()"> 
 
    <span class="ham-icon"></span> 
 
    <span class="ham-icon"></span> 
 
    <span class="ham-icon"></span> 
 
</div>

来源

2017-08-28 vihar

尝试定义函数为'功能汉堡包（）'，而不是把函数的变量这样的。你不需要说你可以使用'var hamburger = function（）'，如果你的函数返回一个对象并且你必须实例化它。 – Merigold

我supouse是menuBarSlide是div的ID，如果是的话这个768,16为你工作。

我添加了一些样式来突出显示div和console.log()以确保代码正在执行。

编辑：也许问题是，你SPECT该元素具有在right属性的值，但它是不同的，所以记录的风格，可以是有益的。

编辑2：问题是在初始值（这就是为什么你的第一个点击不工作，所以这个变化menu.style.right = menu.style.right || "-100px";这个问题是解决这行代码分配如果该值来-100px空。另外程序之前和条件分配新建分配FY后记录的值。

<!DOCTYPE html> 
<html lang=""> 
<head> 
    <meta charset="utf-8"> 
    <title>menuBarSlide</title> 
    <style> 
     #menuBarSlide { /*To highligth your div*/ 
      position: absolute; 
      background-color: grey; 
      color: red; 
     } 
    </style> 
</head> 

<body> 
    <div class="navMenuItem hamburger" onclick="hamburger()"> 
     <span class="ham-icon">Item1</span> 
     <span class="ham-icon">Item2</span> 
     <span class="ham-icon">Item3</span> 
    </div> 

    <div id="menuBarSlide"> 
     <h1>menuBarSlide</h1> 
    </div> 

    <script> 
     var hamburger = function() { 
      var menu = document.getElementById('menuBarSlide'); 

      console.log("before assing: " + menu.style.right); // To check the current style of the element 

      menu.style.right = menu.style.right || "-100px"; // Assign -100px if is null, otherwise keep the same value 

      console.log("after assing: " + menu.style.right); // To check the style after the asigment 

      if (menu.style.right == "-100px") { 
       menu.style.right = "30px"; 
      }  
      else { 
       menu.style.right = "-100px"; 
      } 
     } 
    </script> 

<body> 
<html>

来源

2017-08-28 00:39:32

尝试了它，它正在执行代码，但不能在第一次点击时仍然工作 – vihar

你的代码很好，问题在于'menuBarSlide'的值有别于你期望的或根本没有任何价值。如果您在'div'上多次点击，您会发现每次点击都会改变颜色。 –

这就是为什么使用'console.log（menu.style）;'的好主意。 –

Onclick事件不起作用的第一次点击

回答

相关问题