时间戳

首页 > 解决方案 > 满足按钮单击条件以在javascript中显示消息

javascript - 满足按钮单击条件以在javascript中显示消息

问题描述

如果我的代码真的很糟糕，请提前抱歉，但我只是一个初学者。我想使用按钮创建一个单词搜索谜题。当这个人通过单击我要从按钮中制作的所有单词完成查找时，我希望出现一条消息，表明他们已经完成了拼图。所以我在这里创建了一个带有 4 个按钮的示例，但我似乎无法让我的代码工作。单击所有按钮后，我希望消息出现在 div 容器中。我是在正确的轨道上还是远离？任何见解将不胜感激！

<html>

      <p onclick="myFunction()" id="1" value=false >Button1</p>
      <p onclick="myFunction()" id="2" value=false >Button2</p>
      <p onclick="myFunction()" id="3" value=false >Button3</p>
      <p onclick="myFunction()" id="4" value=false >Button4</p>

      <div id="demo">Message displays here if all 4 buttons are clicked</div>

<script>
function myFunction(){
  value = true;}

    if(p 1){
        value = true;}

    if(p 2){
        value = true;}

    if(p 3){
        value = true;}

    if(p 4){
        value = true;}
else{
  document.getElementById("demo").innerHTML = "Congratulations you clicked on all of the buttons";}

}
</script>
</html>

标签： javascripthtmlboolean

解决方案

您可以使用按钮的数据属性来保存它们的状态。（注意：对于更复杂的项目，您可能不想这样做）

此外，将 JS 像内联一样onclick="myfunction()"对您的代码有些不利——它鼓励全局变量并使 JS 逻辑更难遵循。因此，我展示了一个使用IIFE、.querySelectorAll()和的替代方案.addEventListener()：

// IIFE to keep variables out of the global scope
;(() => {
  // NOTE: These are more flexible when they are arrays (thus, Array.from())
  const btnEls = Array.from(document.querySelectorAll('.js-button'))
  const msgEls = Array.from(document.querySelectorAll('.js-message'))

  const handleButtonClick = ({ target: btnEl }) => {
    btnEl.disabled = true // optional
    btnEl.dataset.toggled = 'true' // using the DOM to hold data

    if (btnEls.some(el => el.dataset.toggled !== 'true')) return

    msgEls.forEach(el => {
      el.textContent = 'Congratulations you clicked on all of the buttons'
    })
  }

  // Our "onclick" equivalent
  btnEls.forEach(el => el.addEventListener('click', handleButtonClick))
})()
<button class="js-button">Button1</button>
<button class="js-button">Button2</button>
<button class="js-button">Button3</button>
<button class="js-button">Button4</button>

<p class="js-message">Message displays here if all 4 buttons are clicked</p>

...那里可能有很多您不知道的语法，但是该示例应该对那些从更现代的资源中学习的人有所帮助。由于您正在从使用旧 JS 语法的东西中学习，这里有一些旧 JS 代码的工作原理大致相同（但不那么容易维护）：

// IIFE to keep variables out of the global scope
;(function () {
  // NOTE: These are more flexible when they are arrays (thus, Array.from())
  var btnEls = Array.from(document.querySelectorAll('.js-button'))
  var msgEls = Array.from(document.querySelectorAll('.js-message'))

  function handleButtonClick(event) {
    var btnEl = event.target
    btnEl.disabled = true // optional
    btnEl.dataset.toggled = 'true' // using the DOM to hold data

    if (btnEls.some(function (el) {
      return el.dataset.toggled !== 'true'
    })) return

    msgEls.forEach(function (el) {
      el.textContent = 'Congratulations you clicked on all of the buttons'
    })
  }

  // Our "onclick" equivalent
  btnEls.forEach(function (el) {
    el.addEventListener('click', handleButtonClick)
  })
})()
<button class="js-button">Button1</button>
<button class="js-button">Button2</button>
<button class="js-button">Button3</button>
<button class="js-button">Button4</button>

<p class="js-message">Message displays here if all 4 buttons are clicked</p>

推荐阅读