Question

因此，我试图创建一个功能来清除屏幕并根据我按下的按钮向我发送警报。我可以清除屏幕而没有任何问题，也可以接收警报，但是我似乎无法通过按一下按钮来同时实现这两个目标。

<head>
<script>
    function cleartext() {
        document.getElementById("text0").style.display = "none";
    }   

    function btnchecklist() {
        document.getElementById("btn1").onclick = function() {
            alert("hello1");
        }
        document.getElementById("btn2").onclick = function() {
            alert("hello2");
        }
        document.getElementById("btn3").onclick = function() {
            alert("hello3");
        }
    }       
</script>
</head>

<body>
    <div id="text0"> 
        <p> some text </p>
    </div>     

    <div id="btn-group">
        <button id="btn1" onclick="cleartext(); btnchecklist();"> 1 </button>
        <button id="btn2" onclick="cleartext(); btnchecklist();"> 2 </button>
        <button id="btn3" onclick="cleartext(); btnchecklist();"> 3 </button>    
    </div>    
</body>

Answer 1

最好使用此代码。

将button元素传递到btnchecklist函数（此函数），然后在函数中获取所传递元素的ID并显示带有相应文本的警报。

function cleartext() {
    document.getElementById("text0").style.display = "none";
  }

  function btnchecklist(element) {
    //Read id of element
    switch (el.id) {
      case "btn1":
        alert("hello1"); //Output in case of element id is btn1
        break;
      case "btn2":
        alert("hello2");
        break;
      case "btn3":
        alert("hello3");
        break;
    }
  }

<div id="text0">
  <p> some text </p>
</div>

<div id="btn-group">
<!-- Pass element to your btnchecklist function (this) -->
  <button id="btn1" onclick="cleartext();btnchecklist(this)"> 1 </button>
  <button id="btn2" onclick="cleartext();btnchecklist(this)"> 2 </button>
  <button id="btn3" onclick="cleartext();btnchecklist(this)"> 3 </button>
</div>

一个较短但更复杂的代码是：

  var aButtons = document.querySelectorAll("#btn-group>button"); //Get all buttons in btn-group
    aButtons.forEach(function(oButton){ //Loop buttons
    oButton.addEventListener("click", function(el){ //Add click event listener to each button
        var regex = new RegExp(/([\d+])/); //Regulr Expression to find the number in your bvutton id
      document.getElementById("text0").style.display = "none";
      alert("hello" + el.target.id.match(regex)[0]); //Alert "hello" Text + number in your button id
    });
  });

Answer 2

在下面检查我的答案 PS。如果您向我解释了您想确切执行的操作，也许这不是最佳解决方案。

So I have tried to create a function that clears the screen and sends me an alert based on what button I have pressed. I
can clear the screen without any problems and also receive the alert but I can't seem to make both happen with one press
of a button.

<head>
  <script>
    function cleartext() {
      document.getElementById("text0").style.display = "none";
    }

    window.onload = function () {
      document.getElementById("btn1").onclick = function () {
        alert("hello1");
        cleartext();
      }
      document.getElementById("btn2").onclick = function () {
        alert("hello2");
        cleartext();
      }
      document.getElementById("btn3").onclick = function () {
        alert("hello3");
        cleartext();
      }
    };  
  </script>
</head>

<body>
  <div id="text0">
    <p> some text </p>
  </div>

  <div id="btn-group">
    <button id="btn1"> 1 </button>
    <button id="btn2"> 2 </button>
    <button id="btn3"> 3 </button>
  </div>
</body>

我的两个js函数可以单独工作，但不能一起工作

2 个答案: