JavaScript的onclick事件只能一次

我試圖讓包含一些類一個段落，並與從數組中選擇一個隨機的預定義名稱的按鈕，另一款以顯示結果的簡單的HTML頁面。JavaScript的onclick事件只能一次

我做了，如果按鈕的名稱存在，如果真如此的話會在最後一段寫第一段的一類，將檢查函數「它的存在。」如果不是，它會顯示「不，不」。

當我點擊按鈕時，該功能將被觸發。它只能工作一次的問題。下面是代碼

var mainParagraph = document.getElementById("test-paragraph"), 
 
    buttonCheck = document.getElementById("class-checker"), 
 
    resultContainer = document.getElementById("result-container"); 
 
// An array of possible names of the button 
 
var buttonName = ["test", "two", "random", "fly", "false", "checked", "wrong", "last", "process", "end"], 
 
    x = Math.random() * 10, 
 
    z = Math.floor(x); 
 
//change the button's name each time the button is clicked. "not working." 
 
function butonClicked() { 
 
    'use strict'; 
 
    buttonCheck.textContent = buttonName[z]; 
 
} 
 
// function to check if button's name is the same as a class in the first paragraph 
 
function checkTheClass() { 
 
    'use strict'; 
 
    if(mainParagraph.classList.contains(buttonName[z])) { 
 
    resultContainer.textContent = "yes the class exists. It's : " + '"' + buttonName[z] + '"'; 
 
    } else { 
 
    resultContainer.textContent = "No the class doesn't exists."; 
 
    } 
 
} 
 
// Trigger the function when the button is clicked 
 
buttonCheck.onclick = function() { 
 
    'use strict'; 
 
    butonClicked(); 
 
    checkTheClass(); 
 
};

<html> 
 

 
<body> 
 
    <p id="test-paragraph" class="test random checked work done process"> This is a random text to be use for the test 
 
    <br/> these are the classes: test, random, checked, work, done, process. </p> 
 
    <button id="class-checker">click!</button> 
 
    <p id="result-container">Here is the result</p> 
 
</body> 
 

 
</html>

我已經檢查了這些答案，但我仍然無法解決問題：

Simple onclick event worked only once。
onclick event works only once in arctext script。
以下是Codepen中的代碼：http://s.codepen.io/Noureddine/debug/JbbBQX。

PS：我不知道JQquery

來源

2016-11-18 Laassari

那麼你只執行一次隨機部分。如果您希望它再次執行，則需要將該邏輯移入其中。 – epascarello

我很抱歉，但我不明白。你能解釋更多，或者提供給我一個鏈接，我可以閱讀更多，因爲我沒有JavaScript的高級。感謝您的回覆。 – Laassari

這並不是說你的事件被炒只有一次，但變量z每次不更新，所以它一直試圖抓住從你的陣列相同的索引。

buttonCheck.onclick = function() { 
    'use strict'; 
    z = Math.floor(Math.rand() * 10); 
    butonClicked(); 
    checkTheClass(); 

};

來源

2016-11-18 20:23:32

謝謝。現在正在工作。我意識到只需添加一個console.log（buttonName [z]）;在buttonCheck函數中會明確指出z保持不變。 – Laassari

相反button.onclick的，你可以使用的addEventListener結合的Click事件還有一件事... Z，如果你想他們改變可能包括它在單擊X變量將隨機值只有一次處理器

window.onload = function() { 
 

 
    var mainParagraph = document.getElementById("test-paragraph"), 
 
    buttonCheck = document.getElementById("class-checker"), 
 
    resultContainer = document.getElementById("result-container"); 
 

 
    // An array of possible names of the button 
 

 
    var buttonName = ["test", "two", "random", "fly", "false", "checked", "wrong", "last", "process", "end"]; 
 

 
    var x; 
 
    var z; 
 
    //change the button's name each time the button is clicked. "not working." 
 

 
    function butonClicked() { 
 
    'use strict'; 
 
    x = Math.random() * 10; 
 
    z = Math.floor(x); 
 
    buttonCheck.textContent = buttonName[z]; 
 

 
    } 
 

 
    // function to check if button's name is the same as a class in the first paragraph 
 

 
    function checkTheClass() { 
 
    'use strict'; 
 
    if (mainParagraph.classList.contains(buttonName[z])) { 
 

 
     resultContainer.textContent = "yes the class exists. It's : " + '"' + buttonName[z] + '"'; 
 
    } else { 
 

 
     resultContainer.textContent = "No the class doesn't exists."; 
 

 
    } 
 
    } 
 

 

 
    buttonCheck.addEventListener('click', function() { 
 
    butonClicked() 
 
    checkTheClass() 
 
    }); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <p id="test-paragraph" class="test random checked work done process"> 
 
    This is a random text to be use for the test 
 
    <br/>these are the classes: test, random, checked, work, done, process. 
 
    </p> 
 

 
    <button id="class-checker">click!</button> 
 

 
    <p id="result-container">Here is the result</p> 
 

 
</body>

希望它可以幫助

來源

2016-11-18 20:27:56 Geeky

JavaScript的onclick事件只能一次

回答

相關問題