javascript html中带有if条件的Onclick事件

Question

对编码很陌生。但是我有一个小任务，我只是不知道我应该做什么或应该如何写下来。基本上它应该给出一个输入框和一个按钮（这可行）。但是现在我想在输入为 hi 时发出警报，如果输入为 bye 则发出不同的警报。对于所有其他输入，不应该发生任何事情。我就是不明白，有人能帮忙吗？

<h1>Welcome</h1>

    Input: <input id="welcome1" type="text" />

    <button id="button">Click here</button>
    
   </body>
   <script type="text/javascript">

    if (document.getElementById("welcome1").textContent = "hi"){
        document.getElementById("button").onclick = alert("Welcome");
    }
    else (document.getElementById("welcome1").textContent = "bye"){
        document.getElementById("button").onclick = alert("See you later");  
    }

   </script>

Answer 1

您应该为按钮添加一个事件侦听器，但首先您应该识别它。 要识别它，您必须使用document.getElementById("the_id")。请记住，我们还有其他方法可以找到元素，换句话说，我们有很多选择器（id、类、标签名称等）。

当您使用else 语句时，您没有指定其他条件。要指定其他条件，您必须使用else if，因为else 用于不在if 或else if 中的任何内容。

<h1>Welcome</h1>

Input: <input id="welcome1" type="text" />

<button id="button">Click here</button>

<script type="text/javascript">
  const btn = document.getElementById("button")
  btn.addEventListener("click", function() {
    if (document.getElementById("welcome1").value === "hi") {
      alert("Welcome");
    } else {
      alert("See you later");
    }
  })
</script>

Answer 2

欢迎

Input: <input id="welcome1" type="text" >
<button id="button">Click here</button>

<script type="text/javascript">
  
  // add eventListener to the element
  document.querySelector("#button").addEventListener("click", handleButton, false)
  
  // function handle to check
  function handleButton () { 
    
    // get the value from the input
    // use querySelector instead of getElementById
    const inputText = document.querySelector("#welcome1").value;

    // check if is the same string and the same type (string)
    if(inputText === "hi") {
      alert ("Welcome");
    } else i f(inputText == "bye") {
      alert("See you later");  
    }
  }