flexbox，提交按钮不能正常使用。 如何解决？

Question

 let formBtn = document.querySelector('#formBtn'); formBtn.addEventListener('click', function check_condition(){ let formName = document.querySelector('#formname').value; if(formName == " "){ alert("Kindly enter your name"); } });

 .left-form{ width: 60%; display: flex; flex-direction: column; gap: 16px; transition: all 0.6 ease; }.left-form h4{ font-size: 26px; }.right-adrs{ width: 40%; background-color: orange; }.form-inputs{ padding: 12px 16px; color: lightgray; width: 90%; } #formBtn{ width: 20%; padding: 16px 16px; background-color: #355E3B; color: white; border:#355E3B; cursor: pointer; } textarea{ height: 100px; width: 90%; }

 <div class="left-form"> <h4>Get in touch</h4> <input type="text" class="form-inputs" id="formname" placeholder=" Name" /> <input type="email" class="form-inputs formemail" placeholder=" Email"/> <input type="tel" class="form-inputs formtel" placeholder=" Phone number"/> <textarea placeholder=" Message"></textarea> <button type="submit" id="formBtn">Send Message</button> </div>

我想制作一个表格，其中的值不能为 go 为空。 如果有人在没有输入值的情况下单击按钮，则会弹出警告框。 为了设计它，我使用了 flex 属性。 但现在 JavaScript 不工作了。 有人可以解释为什么会这样吗？

Answer 1

它与flexbox ，发生这种情况是因为您检查formname值是否等于空格，但它应该是空字符串formName.trim() === ""或formName.length === 0 。

 let formBtn = document.querySelector('#formBtn'); formBtn.addEventListener('click', function check_condition(){ let formName = document.querySelector('#formname').value; if(formName.trim() === ""){ alert("Kindly enter your name"); } });

 .left-form{ width: 60%; display: flex; flex-direction: column; gap: 16px; transition: all 0.6 ease; }.left-form h4{ font-size: 26px; }.right-adrs{ width: 40%; background-color: orange; }.form-inputs{ padding: 12px 16px; color: lightgray; width: 90%; } #formBtn{ width: 20%; padding: 16px 16px; background-color: #355E3B; color: white; border:#355E3B; cursor: pointer; } textarea{ height: 100px; width: 90%; }

 <div class="left-form"> <h4>Get in touch</h4> <input type="text" class="form-inputs" id="formname" placeholder=" Name" /> <input type="email" class="form-inputs formemail" placeholder=" Email"/> <input type="tel" class="form-inputs formtel" placeholder=" Phone number"/> <textarea placeholder=" Message"></textarea> <button type="submit" id="formBtn">Send Message</button> </div>