点击提交按钮时如何根据输入框值切换触发togglePopup与togglePopup2？

你可以按照以下步骤调整代码即可实现需求：

• 移除按钮标签上硬编码的onclick="togglePopup()"属性，避免点击时固定触发第一个函数
• 优化点击事件内的逻辑，增加输入内容校验，同时用trim()方法过滤仅输入空格的无效提交场景
• 你原有代码中按钮样式的text-shadow属性多写了一个多余分号，会导致背景色不生效，下方代码也同步做了修正

修改后的完整代码如下：

<form  autocomplete="off" >
  <input style="border: 2px solid #222; border-radius: 6px;" type="text" id="lname" name="lname" maxlength="10"><br><br><br>
  <input style="border: none; border-radius: 6px; color: ivory; text-shadow: 0px 10px 20px #222;background: dodgerblue; padding: 15px; font-size: 15px;" value="Submit environment name" type="button">
</form>
<script>
document.querySelectorAll('input')[1].addEventListener("click", ()=>{
  // 获取输入框内容并去除首尾空白字符
  const inputContent = document.getElementById('lname').value.trim();
  // 根据输入内容是否为空执行对应函数
  if(inputContent) {
    togglePopup();
  } else {
    togglePopup2();
  }
})
</script>

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