如果输入没有值函数不会触发答案

【问题标题】：If input doesn't have a value function doesnt triggger如果输入没有值函数不会触发
【发布时间】：2021-06-07 20:41:23
【问题描述】：

我正在创建一个网站，我想知道如何在用户输入输入但未提交任何值时创建一些东西，而不是调用 togglePopup() 的函数出现一个名为 togglePopup2() 的函数。我怎样才能做到这一点？这是我当前的代码：

<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"  onclick="togglePopup()">
          </form><script>
              var x;
document.querySelectorAll('input')[1].addEventListener("click", ()=>{
  x = document.querySelector('input').value;
})
          </script>

当前，当单击按钮提交输入时，会出现一个名为 togglePopup() 的函数。我怎样才能做到这一点，只有当输入中有文本并且没有提交任何内容时才会出现该函数，否则将出现一个名为 togglePopup2() 的替代函数。如何做到这一点？

【问题讨论】：

document.querySelectorAll('input')[1].addEventListener('click', function(){ const f = this.value.trim() === '' ? togglePopup2 : togglePopup; f(); });

标签： javascript html jquery css frontend

【解决方案1】：

试试这个：

var x;
 document.querySelectorAll('input')[1].addEventListener("click", () => {
   x = document.getElementById('lname').value;
   if (x != '') {
     togglePopup()
   } else {
     togglePopup2()
   }
 })

 function togglePopup() {
   console.log('togglePopup');
 }

 function togglePopup2() {
   console.log('togglePopup2');
 }

<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>

【讨论】：

【解决方案2】：

const togglePopup = ()=>{
  document.querySelector('button').style.backgroundColor = "green";
}
const togglePopup2 = ()=>{
  document.querySelector('button').style.backgroundColor = "red";
}
document.querySelector('form').onsubmit = (e)=>{
  e.preventDefault();
  console.log(document.querySelector('input').value.trim() === "");
  if(document.querySelector('input').value.trim() === ""){
    togglePopup2();
  } else {
    togglePopup();
  }
};

input{
  border: 2px solid #222;
  border-radius: 6px;
  margin: 5px 0;
}

button{
  border: none;
  border-radius: 6px;
  color: ivory;
  text-shadow: 0px 10px 20px;
  background: dodgerblue;
  padding: 15px;
  font-size: 15px;
  margin: 5px 0;
}

<form  autocomplete="off" action="#" method="post">
  <div>
    <input type="text" id="lname" name="lname" maxlength="10">
  </div>
  <div>
    <button type="submit">Submit environment name</button>
  </div>
  <div id="result"></div>
</form>

【讨论】：