JavaScript onclick事件仅起作用一次
[英]JavaScript onclick event works only once
问题描述
我正在尝试制作一个简单的HTML页面，其中包含一个包含一些类的段落和一个带有随机预定义名称的按钮（将从数组中选择该名称），以及另一个显示结果的段落。
我创建了一个函数，该函数将检查按钮的名称是否作为第一段中的类存在，如果有，它将在最后一段中写“ It exist”。 如果不是，它将显示“否，不是。”。
当我单击按钮时，将触发该功能。 它只能工作一次的问题。 这是代码
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>
我已经检查了这些答案，但仍然无法解决问题：
简单的onclick事件仅工作一次 。
onclick事件在arctext脚本中仅起作用一次 。
这是Codepen中的代码： http ://s.codepen.io/Noureddine/debug/JbbBQX。
ps：我不知道JQquery
2 个解决方案
解决方案1
1 已采纳 2016-11-18 20:23:32
不是您的事件仅触发一次，而是变量z不会每次都更新，因此它一直尝试从数组中获取相同的索引。
buttonCheck.onclick = function () {
'use strict';
z = Math.floor(Math.rand() * 10);
butonClicked();
checkTheClass();
};
解决方案2
0 2016-11-18 20:27:56
您可以使用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>
希望能帮助到你
Javascript Onclick事件仅起作用一次
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.