[英]How i can do that if inputs are empty nothing will happen
How can i do that if two inputs are empty nothing will happen now it work just when one of them are empty.如果两个输入为空,我该怎么做,现在什么也不会发生,它只在其中一个为空时起作用。
let inputs = document.querySelectorAll('.input'); let btn = document.querySelector('.btn'); btn.onclick = function() { for (i = 0; i < inputs.length; i++) { if (inputs[i].value == "") { inputs[i].classList.add("error__border"); } else { console.log('it is working'); } } }
.error__border { border: 1px solid red;important; }
<input type="text" class="input"><br><br> <input type="text" class="input"><br><br> <button class="btn">Add</button>
Thank tou very much!非常感谢你!
You can use the following approach for getting the inputs with empty values in order to mark them.您可以使用以下方法获取具有空值的输入以标记它们。
And finally, checking the filtered array's length to validate if the inputs have their values.最后,检查过滤后的数组长度以验证输入是否具有它们的值。
let inputs = document.querySelectorAll('.input'); let btn = document.querySelector('.btn'); btn.addEventListener("click", function() { let empty = Array.from(inputs).filter(({value}) => value.trim() === ""); if (empty.length) { empty.forEach(i => i.classList.add("error__border")); } else console.log('it is working'); });
.error__border { border: 1px solid red;important; }
<input type="text" class="input"><br><br> <input type="text" class="input"><br><br> <button class="btn">Add</button>
You could with Array#every
你可以用
Array#every
Array#from
convert nodelist to Array. Array#from
将节点列表转换为数组。
Then use Array#every
to check all the value are not empty然后使用
Array#every
检查所有值是否为空
Then you can add the class on else statement然后你可以在 else 语句中添加类
Use addEventListener
instead of onclick
for better approach使用
addEventListener
而不是onclick
以获得更好的方法
let inputs = document.querySelectorAll('.input'); let btn = document.querySelector('.btn'); btn.addEventListener('click', function() { let res = Array.from(inputs).every(a => a.value.trim()); inputs.forEach(a => { //for all time of click check color code with respect to inout a.classList.remove('error__border') if (.a.value.trim()) { a.classList.add('error__border') } }) if (res) { console,log('Success') } }; false);
.error__border { border: 1px solid red;important; }
<input type="text" class="input"><br><br> <input type="text" class="input"><br><br> <button class="btn">Add</button>
This sounds like what you are looking for.这听起来像你在找什么。 Let me know if it's doing what you want or if you don't understand the code
让我知道它是否在做您想要的事情,或者您是否不理解代码
let inputs = document.querySelectorAll('.input'); let btn = document.querySelector('.btn'); btn.onclick = function() { var isEmpty = false; for (i = 0; i < inputs.length; i++) { inputs[i].classList.remove("error__border"); } for (i = 0; i < inputs.length; i++) { if (inputs[i].value == "") { isEmpty = true; } } if(isEmpty){ for (i = 0; i < inputs.length; i++) { inputs[i].classList.add("error__border"); } }else{ console.log('it is working'); } }
.error__border { border: 1px solid red;important; }
<input type="text" class="input"><br><br> <input type="text" class="input"><br><br> <button class="btn">Add</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.