输入为空时仍触发console.log运行的前端JS代码问题如何修复

• 回车键事件的执行顺序错误：你先触发了按钮点击事件执行打印逻辑，才判断输入是否为空，空值判断完全没有起到拦截打印的作用
• 按钮本身的点击事件没有做非空校验，不管输入是否为空，只要点击按钮就会触发控制台打印
• 额外小问题：HTML里按钮标签闭合错误，<button>对应的闭合标签应该是</button>，不是</input>，同时你给按钮同时加了行内onClick属性和JS绑定的点击事件，冗余可直接删掉行内的onClick

把非空校验统一放在按钮点击事件里处理，不管是点击按钮还是按回车键提交，都会先走校验逻辑，避免重复写判断代码。

修复后HTML代码 #

<label>Enter your name: </label> <br> 
<input type="text" id="myText"> <br> 
<button type="button" id="myButton">Submit</button>

修复后JS代码 #

document.getElementById("myButton").onclick = function() {
  // trim()用来过滤用户只输入空格的情况，不需要可以去掉
  var myName = document.getElementById("myText").value.trim();
  // 空值直接返回，不执行后续打印逻辑
  if (myName.length === 0) {
    alert("You must write something!")
    return;
  }
  console.log("Hello", myName);
}

var input = document.getElementById("myText");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    // 直接触发按钮点击即可，校验逻辑已经统一在按钮事件里处理
    document.getElementById("myButton").click();
  }
});

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