Question

我正在尝试创建一个简单的HTML页面，其中包含一个带有一些类的段落和一个带有随机预定义名称的按钮，该按钮将从一个数组中选择，另一个段落用于显示结果。

我创建了一个函数，用于检查按钮的名称是否作为第一段中的类存在，如果是，它将写入最后一段＆＃34;它存在。＆＃34;。如果没有，它会显示＆＃34;不，它没有。＆＃34;。

单击按钮时将触发该功能。它只能工作一次的问题。这是代码

＆＃13;

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();
};

＆＃13;

<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>

＆＃13;

我已经检查了这些答案，但我仍然无法解决问题：

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

Ps：我不认识JQquery

Answer 1

并不是您的事件只被触发一次，但变量z每次都不会更新，所以它不断尝试从您的数组中获取相同的索引。

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

};

Answer 2

而不是button.onclick，你可以使用addEventListener来绑定click事件和另一件事......如果你想让它们改变，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事件只能运行一次

2 个答案: