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事件不起作用的第一次點擊

回答

相關問題