如何在每次点击按钮时执行 JavaScript 代码？

How to execute JavaScript code on every button click?

提问人：DSACRM 提问时间：11/16/2023 最后编辑：Peter SeligerDSACRM 更新时间：11/16/2023 访问量：85

问：

使用当前提供的下一个 HTML 标记，每次单击按钮时，页面都会重新加载。

<h1>Refresh Me</h1>
<div>
  <button onclick="window.location.reload()">
    Let's Find Out
  </button>
</div>

目标是，在单击按钮时，执行以下 JavaScript 代码。

var randomNumber1 = Math.floor(Math.random() * 6) + 1;
var randomDiceImage = "dice" + randomNumber1 + ".png";
var randomImageSource = "images/" + randomDiceImage;
var image1 = document
  .querySelectorAll('img'[0]
  .setAttribute("src", randomImageSource);

var randomNumber2 = Math.floor(Math.random() * 6) + 1;
var randomDiceImage2 = "dice" + randomNumber2 + ".png";
var randomImageSource2 = "images/" + randomDiceImage2;
var image2 = document
  .querySelectorAll("img")[1]
  .setAttribute("src", randomImageSource2);

if (randomNumber1 > randomNumber2) {

  document.querySelector("h1").innerText = "Kirsty Makes Tea";

} else if (randomNumber1 < randomNumber2) {

  document.querySelector("h1").innerText= "Danny Makes Tea";

} else {
  document.querySelector("h1").innerText= "It's a draw";
}

如何实现这样的行为？

javascript 事件处理 dom-events

评论

0赞 Peter B 11/16/2023
你可以把所有的JS放在一个函数中，例如 然后放入事件处理程序。function rollDice() { -PUT JS CODE HERE- }rollDice()onClick=
0赞 DBS 11/16/2023
将希望它运行的代码放在函数中，然后调用该函数。或者更好的是，使用事件侦听器在 JS 中调用该函数，而不是使用 HTML 函数调用。
0赞 Peter Seliger 11/17/2023
@DSACRM......关于所有的答案，还有什么问题吗？
0赞 Peter Seliger 11/30/2023
@DSACRM......关于所有的答案，还有什么问题吗？

答：

0赞 Mister Jojo 11/16/2023 #1

在整个窗口上使用 Click 事件侦听器：

const
  [diceK, diceD] = [...document.querySelectorAll('.dice > span')]
, sentence       = document.querySelector('p')
, diceFace       = ['&#9856;','&#9857;','&#9858;','&#9859;','&#9860;','&#9861;']
, randomDice  =()=> Math.floor(Math.random()*6)
  ;
window.addEventListener('click', () =>  
  {
  let R1 = randomDice(), R2 = randomDice();
  diceK.innerHTML = diceFace[R1];
  diceD.innerHTML = diceFace[R2];
  
  if      (R1 < R2) sentence.textContent = 'Kirsty Makes Tea';
  else if (R1 > R2) sentence.textContent = 'Danny Makes Tea';
  else              sentence.textContent = 'Its a draw';
  });
html {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
.dice {
  display     : inline-block;
  text-align  : center;
  padding     : 0;
  margin      : 0 0 0 1rem;
  caret-color : transparent;
  cursor      : default;
  }
.dice span {
  display     : inline-block;
  font-size   : 10rem;
  line-height : 8rem;
  height      : 8rem;
  background  : lightgreen;
  }
<div class="dice"> Kirsty<br><span>&#9856;</span></div>   
<div class="dice"> Danny <br><span>&#9861;</span></div>   
<p> click anywhere...</p>

0赞 Peter Seliger 11/16/2023 #2

OP 需要将处理掷骰子的代码放入函数中。然后，应该触发掷骰子的按钮必须订阅一个事件侦听器，其中函数被注册为处理程序。'click'

然后，OP 的示例代码可能会更改为类似的东西......

function rollDice() {
  return Math.floor(Math.random() * 6) + 1;
}

function handleRollDice() {
  const [imageElement1, imageElement2] = Array
    .from(
      document.querySelectorAll('img')
    );
  const outputElement = document.querySelector('h1');

  const number1 = rollDice();
  const imageSource1 = "images/dice" + number1 + ".png";
  const imageAltText1 = "Kirsty's dice ... Number: " + number1;

  const number2 = rollDice();
  const imageSource2 = "images/dice" + number1 + ".png";
  const imageAltText2 = "Danny's dice ... Number: " + number2;

  imageElement1.src = imageSource1;
  imageElement1.alt = imageAltText1;

  imageElement2.src = imageSource2;
  imageElement2.alt = imageAltText2;

  if (number1 > number2) {

    outputElement.innerText = 'Kirsty makes tea';

  } else if (number1 < number2) {

    outputElement.innerText = 'Danny makes tea';

  } else {
    outputElement.innerText = "It's a draw";
  }
}
document
  .querySelector('.roll-dice > button')
  .addEventListener('click', handleRollDice);
body { margin: 0; }
.roll-dice { margin: 20px 0; }
img { margin: 0 20px; }
<h1>Roll Dice</h1>

<img src="images/dice4.png" alt="Kirsty's dice ... Number: 4"/>
<img src="images/dice4.png" alt="Danny's dice ... Number: 4"/>

<div class="roll-dice">
  <button>Roll Dice</button>
</div>

OP 的代码稍后可以使用其他一些技术/方法，例如

function rollDice() {
  return Math.floor(Math.random() * 6) + 1;
}

function rollDiceFor(root) {
  const [playerRoot1, playerRoot2] = [...root.querySelectorAll('.player')];

  const name1 = playerRoot1.dataset.name;
  const name2 = playerRoot2.dataset.name;

  const dice1 = playerRoot1.querySelector('.dice');
  const dice2 = playerRoot2.querySelector('.dice');

  const diceFace1 = rollDice();
  const diceFace2 = rollDice();

  dice1.dataset.face = diceFace1;
  dice2.dataset.face = diceFace2;

  const output = root.querySelector('output');
  const outputData = output.dataset;

  output.value =  (
    ((diceFace1 === diceFace2) && outputData.draw) ||
    `${ (diceFace1 < diceFace2) && name1 || name2 } ${ outputData.task }`
  );
}

function handleRollDice(evt) {
  rollDiceFor(
    evt.currentTarget.closest('.roll-dice')
  );
}
document
  .querySelector('.roll-dice > button')
  .addEventListener('click', handleRollDice);
body { margin: 0; }

.roll-dice {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.game {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.player {
  margin: 5px 20px;
}
.dice {
  margin-top: 10px;
}
output {
  display: block;
  min-height: 1.2em;
  margin: 15px 0;
}
.dice[data-face="1"] {
  background-position: -4px -4px!important;
}
.dice[data-face="2"] {
  background-position: -96px -4px!important;
}
.dice[data-face="3"] {
  background-position: -188px -4px!important;
}
.dice[data-face="4"] {
  background-position: -5px -95px!important;
}
.dice[data-face="5"] {
  background-position: -98px -95px!important;
}
.dice[data-face="6"] {
  background-position: -189px -97px!important;
}
.dice[data-face] {
  width: 82px;
  height: 82px;
  background-position: 80px 80px;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARMAAAC3CAMAAAAGjUrGAAAA/FBMVEX/////ZmYAAAD/aWno6Oju7u7Nzc3V1dWioqL6+vqMjIzc3Ny4uLglJSX/amry8vKEhIR7e3svLy9jY2OysrJQUFDg4OBxcXE3NzcZGRl+fn4dHR2UAACdAAD69PTMMzP16urzWVmlAABISEjoT0/s3NySAADjzc3fxsatAADrUlKhAADExMSfn5+Tk5Pn1NTSr6+7h4fLpKTZQECqYGCTDw+kEhKVGhrHLS3Inp4PDw+1GRnPq6uhS0uydXVpaWmYNDSWKiqjVFSvcXGydHSaMTHSh4eXISG9hoajTk4/Pz/QY2OhQUGhLi63bGzYu7vTmJjNdHTAWFi8Nzd1RddCAAAQeElEQVR4nO2deUPiPBPA2xTRCoIK6LrL0SLocnhyg7qI68r6oL7H9/8ubznaZtKk6ZFd8IX5S2udJr+mOSaTGUnayEY2shHxkkxf7IeTi3SEoXsrvhNS0lFWuaPpsLrjW3TNsRRC6DCcGBpOaUWPZpAI2VcpL3JfiOrMNqXYOwiltyjP9CVqMn2I9h2XD9ChoTusxIzaO4DXDVKx0Kq30nvowFHsXUpVgskF+kFcSaELMaq3MqgOr8RRJilG9wVKEVfq6FKMakPSBIJdsiIhJIWO8F9jDv7BhUSgOiCFkX1Q8JhA3JJ08gX/7cs3gaovUQz/9QKxxotAAr7N1J5I1XW8S6k7+5cw8g00jEORzWRK3P45gtJCdb9m7J8zr0JV7+AtY0twubex9xeHPUBo2UXW4KiiXaGqj1Dc/qUu9tORkhjjfeRyYwCp24xjYj8d45vHGKeRoAFtIWrfHnmORXaD0rQNblN+FCN9rB8UzmTPBn78Bf7t+8Pwcfj+EVh3DGeCDxTqdfP5cTg+D6zZ6FaXwuRqOCjpslwadL4H1M1ict3qVmVZL1XuywE1L4nJR05XFNkQRS/2gulmMLmpyHPFiWo2cFNZBpOrrGyJUrwLpJvOpDdIWIrlbNCWsgQm6qMuY5LNB9FNZaLlML1K9T5guZfA5Lqr4EVv3ATRTWXyVAKaBwE7qyUwaYJmIsvDILppTNQOjkRWSj+DlXsJTHIQiVLTAuimMSkPABNZfwtW7mUwgSVXBloA3TQmVwQTuRWs3CvQTopaAN1e2oncCVbuJTB5JvqTTpCBh8ZEayeAYv13sHIvgclNA7zOajOIbuq4MwG0lcJtsHIvgYkGOhSlGGi+SWXyAT+eXKCZz3LmsTddu40nGoGaCWMeO8EmKIlBwGaynPVOs6ssyq40JsE2TuhM8o8mFEUePARSLC1rXTwulhRD5GqlGbB9M9aA+fuBnphqLuUCTY9nshwm0lWzNRgU/xkFNRWw7Scfk/ZgMPjnKbipYFlMjDdaviqH2G9kMjH6cENzcMXSEpmEFBcmoWXDxCkbJk7ZMHFKECb5srfecdWYlMveBn7fTPK9Tq5YyQ2v+beuFJO7Sa5SyXV6HrD4ZfK9VTAmRQlF7w413r0rxKQ87OpGqRW9cMZfXvlkcp2TF5PnRPWMNwtYHSbls2rCnPPnuC3cH5Myvguh8wwfK8Mk/6JjC2buHoc/JvdVTDfX4r4yTIDFhr/H4YtJuQgNWVn34WdVmKjQ2pmocRqKLyY9aCHjbaCsCpPv0NSkNDj7sb6YPFVlqNzdarMqTG7hq5SrT+73+2Oi/18w0UUyeShBJgX3/e9VYXJXgExKHAucLyaE8kTFvbNaFSbliuLnVfpjohFbeC/ut68KE+kNfPNKTnO/3d/85AH/MhMDDu+VYXI3wOYQSoPTnfhkku/YkzalMeLcvTJMpFHD9tWpdniLep/rnXKrlJg7RymFIW+JuTpM1GFhXmxZKbW4xlq/6+L8qNiY6m7kxlwbyuowkaRxrjHtVErFEd9Y4N+mdDW+f3t7v/ZgGl8lJpJ2M3p7G91debg1kO1R9bYJsVJMJM/F3thjKbJh4pQNE6d8HiYasLoLZKKVNXjhkzD5GGVrtdzzndVLimJSHmdrg1prrGHXPgUT7X5Qnfpm6N2OOZYKYnJTK8kJJWFMtzA702dgop1ZnjZ6bnG8RQyTkekcpCgDexX0CZioj9giy7S6C2EyxpzIlIHVUj4Bk14BX9WW5itPEUzK0Nkwqy2ufwIm2J7S1EJRnDUUEUwe4JEFa2tm9ZmcU63uApiobwC2rA8Xf1h9JqQ1dW51F8AkXyRc0XOLP6w+E7rVXQQTaKaVlc/D5PrPtRPYTD5RO7kire6zTSURfeyQ6E/MfeTVZyK9gJIn5kegRDCBhyGUgjlB+QRMCKv73D9fBBMNjvLWYc1PwES6t9+noi9KLmQe28OGeaViHYr/DEzyjw3L6p5dLALFrHfGxYXblSJXbGeaz8BEUp9qs82CUnGiLS5ti1kXX2cL+rR77Wax0Ak4kzhixCcLKEm0Y/180A+lqjyevHQm/7L986I2iO0wsT7U299vncd/3eHma/TV/ll00Aw8xsxu6PgnebAxg8WYOQoZvErNE/Z8EPlJaBgo2O6ignkfY+GZTo6Fqo6CdpcK18BJyRzaPyfFBvhR8bgtB/2wQfaA7INuNSo0oNI20LYvtLMCEcKOsH4rvGwRby8lMKKS+g0MNUmUYd3pX45gCMJjkYGgMgi2OhX1RWlXX4mC1vHuPJxE+nug3OreiTAoB44eO/JN0OdT7ztGyDTKiIlHlkYnxHe41RdU7NgpRVEyhU6+puPhJL17iF6db66OUCZdj4aT+O43lHLMLY1i713GQ6qupzOoTx3Xt4/3QodhPflBnzLsnIYP8do/pk7Roj/Cq0anzM5aTUbCiUsA2q2Qql10q6F1i13abGQjG9nIRjaykY38UYnUQ87t43UXg0Y0tHLBLn0eJB5+am9Ihm4jjRyLUI4uhRqReJI8RZl4ZCucRI52DhHNIHhhVCcWWnv0GJ1QLJlq/DgTUlL7FL0RSi6KYJJGzgjrX0Vlnoi8Ou3SBu/DTCqcvPZR31H/PXEWwqgjYcOOQBshkR1CSn5B+wKsM2r0lHxv+yKt62k8Trw0NXQ6c5YEFrUPmmHym7CSX8BikubZkHIK00EcIJE9Yx18PRmBFtkdYGq7ELs5CjdKkoJ3j/DsEHWiSYaTFP7yBCeegEkb6oKPClxiJX89Fak5gmfJEfwmpRRe1EvB2SGwncWI0GZilBsLKC5070iCG5jCM2ZgaTJ2BDtEpO3eSRWcV0X6iifJ+HoiVvmRzST8Bj0UrAmSTPJ5fwEqVfIfXJn41O5QjjE5gKqZmhl/cFzGmiBgot1M2u3OyHsM1vOHx3b7pYmnBWEzyfd+d9rtyY3mWfkzqRxngn+j16OXdnv44DjXOqtQy1Gh8nhWT3Ck/ojOZJybeQbp3Za30J35UXEW9KI6eNasi0wmC/cguZH1lC4j36zMlOuDR7uqdCbfX7ozzaUaEbyCUaEH83IHi8dFbyf2wRa95iWhhdYxT78nqmfWGV4WEzPTxzTyLS94gDQNEWX6s+GZQahMptlJ5pqVwgTXgVfIbirqfcG6jMXjojL5iR8PyXloKcMS5pp4Zn6eDCYfmBewMuDHvp3gyq0TJTQmeHYSENX5ATupI9esCj2Belq4aUzOgXe+/sgtda9LDRxBZ5I/w5TLSo53ov0WKC+ZNaUxAWHiExWr7lf0Cn0HLtr6sxuT3yBukjLgpVNSWzL4BzPbA53JbQEem+HFjSaVl5lMiGBSuvX1jOgVImK/WyGzKEzyROz80jun1OQRGzOwPJ3JPSiJLL+5Lw2vKgmovMdkAg8pmW7oRoVasEKLkPpajqin2b4pTMi8E9xcHORxEjNgEZ2Jz9wQjmhIT0wm8L0bL37RQziSRswD/JyT9Ry6MOkSKnh5J3qMwFYMJv5yiLCiZlGYEActlO7iYyBfsjJPLnJO1tPsZzy0E17cpJDtpOLOhH5+J1w7mb9ksp3IZidLYaK1iVKI7U+IknP7E0YUPgqTnzBWmt2fkBUy+xP6V+ll3On6HHcS7uNOD447Jd6sjVTuNu6ATpM57nQX0zNy3DHrSZ2fwHGbn8aGOAJsTiE8zU94ESmJyU/JjGxFm5+A7GnYHIKYcJlRpoj5idVFUOex73gdi/x5LDgqrmc589g7rCiJLn8eO/Q8jz3H+iowj2VUqNnAp7eu81h8HSB7ymqonZUSVqkt3az1ztha7yhdD2lVgHKrPtT1zl3N0tyY4BYAeoXUiX0ZW9cxbAUP04APCUUvtLzlBM2PKlXjH4yl67P9LTDXxXfZxjQ8tNzwlunDWBcvlPPXxZ2CoTkhl4pE0jdGhX4WF5c72GWW/aT8kM3Wsr+8xPlelKaZzeXaY6/2kzdD+7+920/eDeW5X3goaYb9RL2dZHPZ/4wdAbYYFaJdZjGZldxjiVn/4G579KuduJ9lU3LTzLK/Eb+7MQkrf8seSzIJKxsmTtkwccpqMSnfTDovk57m4dY1YZJ/L04jVeqN2pivfD2YaC8NxQrEyvVBWA8mL/YCIdHgJmReCyZjfL3MDey8Fky0rK8A4GvB5ANaApUBJ/ztOjAZkwkFOFvV68DkQYdMShwbxVowIdoJL/vJOjCBZlq+FXgdmJAJj3gZmdeBiTSCibF428hrwQQmUMvyTE5rwUT6sBLtGUi4wfnXg4l0flaQE/MYy/w0C2vCRFJ7w9pg8N93L56F68JEmkZWJ0OrM2SNmHiWDROnbJg4ZUlMNM3nKaS8BmYV7r7lmr9NL02Dv7sxYelmXCdVM5lc/XxstV9G3raLZ5pvnjvtzj02ZrjtjU6Me4fe90adhWEy0W6Ghu5Jj3yf5jMJLOdPDtUMJjN37ulUAd+2dpWp8/ZsbmFv/bv6lhv3+vItN+6v8vfQJelmUY5CFr7OxTN1+EyqajqTvGlCB74TbkLzRmf6lhf9+pYrHn3LJanZlaleImPqM3G3ddsnns4EuHOfafxyP9G80RlMrnGfHA++5UNqYehMcCdypWi3lGvMyxZ7Jl01lckt3V2KLXTnbW++5ZrkLj58y4l0D7KVCjAPwyybzyR84k3VVCaEW12R26XQvdG9+fj58y23CkNl0oTpHkxnPvKZjTFVtembSGNChk/nmQEdzpYLb3QxvuUwXYGbb7mU7xD+xWYLJ5/5OHsm6WZqmsVpTFhuuuxyk963by5MQvqWu/gMS2Uy3UPW9ZmsJL40JnekOzfPEY/hjf63fcsdDtOKxYS4PmfCUu2lnfCZ0L3R/7ZvudOJ3F87qbow8d2fkN7orv3Jn/Mtd/YnvxnPnPcnLJ94QeMOeKa5D/FHfMs54w61kqyxrk1X7WV+YtJmC90b/a/7lkvlGnjzLfr8xDqI1qNPfejzWHx+J1vu3C7SLODzR/d5LPQt57skPVMLQ5/H/sTnsXa6B+mW6s+uPlLd1hnrnVaD4s7tJrjzttlimb7l9trDi285KAx/vWOVo4IvG8YD+5n22Ru6av662EvKX2nuvD1bj55Zb8dlXdzQE9N1cc7bunhEKQx/XYx7XS/82R3PNFVXcZ94wASPa3H+/tJuv/3ybj8pTw/nt35hdotjLMA9jGuR7w1b7fYv7/aTpqMw20z7yfixNS0HaT5iPPO82SFVY7gd8U9I+xNXNGjHyrjFPwlrZ8MyZhx8I+4VZ2eTUoeSSIHRgkRnh8DanejQKnjikLTI2PnTaEE4haSo4GwLOUxZP+4IjV4FOSRFRgszSg3DM+0LjWYTx4DHQmZWIeUH3j9diFR+QYQEVEVmh9hCKey3Q4Gap7pBv/qKxKQqkKYvkswFERcX/k19BQEH06IiMs7kADZo41li4kypu47QhtPvPiOmw4oiIrDZF4HfZdyB4Ac6vIxux0LJdn2/T41rFkfoRz2k8lg0ferIPBFBh6ICVcbBVzmX7ZSAAK/9A3qDUC9FRKc9de7hRhDaETH4RH5QkBiSjG2HlCOX4h2FVR6jtojkAUKpg91wcnyKRO+ZL1ciF6/9kA1wLxX/qxGMN7KRjayJ/A/wuTyUx9WEsAAAAABJRU5ErkJggg==);
}
<section class="roll-dice">

  <div class="game">
    <div class="player" data-name="Kirsty">

      <em>Kirsty's dice ...</em>
      <div class="dice" data-face="5"></div>

    </div>
    <div class="player" data-name="Danny">

      <em>Danny's dice ...</em>
      <div class="dice" data-face="5"></div>

    </div>
  </div>

  <output data-task="makes tea" data-draw="It's a draw"></output>

  <button>Roll dice ...</button>

</section>

0赞 stan 11/16/2023 #3

您可以通过将所有 javascript 添加到单个函数中来做到这一点。

JavaScript的

function randomDice() {
  var randomNumber1 = Math.floor(Math.random()*6)+1;
        var randomDiceImage = "dice"+randomNumber1+".png";
        var randomImageSource = "images/"+randomDiceImage;
        var image1 = document.querySelectorAll('img')[0].setAttribute("src",randomImageSource);
        
        var randomNumber2 = Math.floor(Math.random()*6)+1;
        var randomDiceImage2 = "dice"+randomNumber2+".png";
        var randomImageSource2 = "images/"+randomDiceImage2;
        var image2 = document.querySelectorAll("img")[1].setAttribute("src",randomImageSource2);
             
        
        if(randomNumber1 > randomNumber2){
        document.querySelector("h1").innerText = "Kirsty Makes Tea";
        }
        else if(randomNumber1 < randomNumber2){
        document.querySelector("h1").innerText= "Danny Makes Tea";
        }else{
            document.querySelector("h1").innerText= "Its a draw";
        }
}

然后在你的html中使用这个函数：

<h1>Refresh Me</h1>
  <div>
     <button onclick="randomDice()" type="button" class="button">Let's Find Out</button>
  </div>

上一个：如何在不使用 *ngIf 的情况下根据条件显示 &lt;mat-tab&gt; 元素？

下一个：Angular：在html中切换状态的最佳方式是什么 display [已关闭]