JavaScript HTML中带if条件的onclick事件功能实现问题

代码问题汇总 #

• 逻辑执行时机错误：判断输入内容的逻辑写在了页面加载阶段，此时用户还未输入内容，应该把判断逻辑放到按钮点击的回调函数里，点击时再读取输入框内容做判断
• 输入框取值属性错误：input输入框的用户输入内容存储在value属性中，不能用textContent获取
• 相等判断语法错误：=是赋值操作符，比较两个值是否相等需要使用===严格相等运算符
• 事件绑定错误：onclick需要绑定一个函数，直接写alert()会在页面加载时立即执行弹窗，不会等到按钮点击时触发
• 分支语句语法错误：else后不能直接追加判断条件，带条件的分支需要使用else if

修正后完整代码 #

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

<script type="text/javascript">
document.getElementById("button").onclick = function () {
  // 点击按钮时读取输入框内容，trim用来去掉首尾多余空格，不需要可以删除
  const inputContent = document.getElementById("welcome1").value.trim()
  if (inputContent === 'hi') {
    alert('Welcome')
  } else if (inputContent === 'bye') {
    alert('See you later')
  }
}
</script>

内容的提问来源于stack exchange，提问作者Kilian Schrijvers