JavaScript onclick事件仅起作用一次
[英]JavaScript onclick event works only once
问题描述
I am trying to make a simple HTML page that contains a paragraph with some classes and a button with a random predefined name that will be chosen from an array, and another paragraph to show the result. 
我正在尝试制作一个简单的HTML页面，其中包含一个包含一些类的段落和一个带有随机预定义名称的按钮（将从数组中选择该名称），以及另一个显示结果的段落。
I made a function that will check if the button's name exists as a class in the first paragraph if so it will write in the last paragraph "It exists.". 我创建了一个函数，该函数将检查按钮的名称是否作为第一段中的类存在，如果有，它将在最后一段中写“ It exist”。 If not it will show "No it doesn't.". 如果不是，它将显示“否，不是。”。
The function will be triggered when I click the button. 当我单击按钮时，将触发该功能。 The problem that it works only once. 它只能工作一次的问题。 Here is the code 这是代码
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>
I already checked these answers, but I still can't solve the problem: 我已经检查了这些答案，但仍然无法解决问题：
Simple onclick event worked only once . 简单的onclick事件仅工作一次 。
onclick event works only once in arctext script . onclick事件在arctext脚本中仅起作用一次 。
Here is the code in Codepen: http://s.codepen.io/Noureddine/debug/JbbBQX . 这是Codepen中的代码： http ://s.codepen.io/Noureddine/debug/JbbBQX。
Ps: I don't know JQquery ps：我不知道JQquery
2 个解决方案
解决方案1
1 已采纳 2016-11-18 20:23:32
It's not that your event is getting fired only once but the variable z is not updated each time so it keeps trying to grab the same index from your array. 不是您的事件仅触发一次，而是变量z不会每次都更新，因此它一直尝试从数组中获取相同的索引。
buttonCheck.onclick = function () {
'use strict';
z = Math.floor(Math.rand() * 10);
butonClicked();
checkTheClass();
};
解决方案2
0 2016-11-18 20:27:56
Instead of button.onclick, you can use addEventListener for binding click event and another thing...Z and x variables will have random values only once if you want them to change may be include it in the click handler 您可以使用addEventListener绑定click事件，而不是button.onclick来绑定其他事件... Z和x变量仅具有一次随机值，如果您希望更改它们，可以将其包含在click处理程序中
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>
Hope it helps 希望能帮助到你
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.