1 

var inputs = document.querySelectorAll('.credentials input');

function checkCredentials(){
    inputs.forEach(function(input){


       if(input.value=="" && !alert('please enter a valid card number')){
          
         alert('please enter a valid card number'); 
    
       }

        else{        
         alert("payment successful");
       
       }
       
    })
}
    <div class="card-container">
          
          <div class="card-img">
            <img src="visa.png">
          </div><!-- card img -->

          <div class="credentials">
            
            <input type="text" name="1">
            <input type="text" name="2">
            <input type="text" name="3">
            <input type="text" name="4">

            <input type="text" name="5" class="fifth-input">
            <input type="text" name="6">
            <input type="text" name="7">
            <input type="text" name="8">

            <input type="text" name="9" class="ninth-input">
            <input type="text" name="10">
            <input type="text" name="11">
            <input type="text" name="12">

            <input type="text" name="13" class="thirteenth-input">
            <input type="text" name="14">
            <input type="text" name="15">
            <input type="text" name="16">

          </div><!-- credentials -->

          <div class="btn">
            <button onclick="checkCredentials();">Click to Proceed</button>
          </div><!-- btn -->    
    </div><!-- card container -->

我有 16 个输入，每个输入字段最多一位数字，我想要的是，单击按钮 - 如果任何输入字段为空，则会出现一个警告框，上面写着“请输入有效的卡号必须显示”一次和页面被重新加载。- 否则会显示一次提示框“付款成功”并重新加载页面。

4

2 回答 2

0

您可以根据给定条件过滤数组并检查数组是否为空。我还建议对函数使用输入参数而不使用全局变量 =)

例子：

function checkCredentials(inputs){
        const containsEmptyInputs = inputs.filter(i => i == "").length > 0;
        const message = containsEmptyInputs ? 'please enter a valid card number' : 'payment successful';
        alert(message);
}

于 2021-08-14T09:25:49.473 回答
0

你可以试试这个：

var inputs = document.querySelectorAll('.credentials input');
let numberVar;
function checkCredentials(){
    numberVar = 0;
    inputs.forEach(function(input){
       if(input.value=="" && numberVar++ < 1){ 
         alert('please enter a valid card number');
       }else{        
         alert("payment successful");
       }    
    })
}

但是，如果您需要遍历所有输入并显示未填充的值，那么您需要一种不同的方法。并且表达式也需要以相同的方式重写。

于 2021-08-14T08:56:57.740 回答