功能上的2个参数

Question

我试图做一个按钮onclick事件跳转到另一个功能，如果输入字段为空。 if语句中的函数应该有两个参数（一个数组，一个字符串变量）。该函数循环遍历所有输入元素，并检查它们是否有值，如果不是，则将文本添加到稍后使用.innerHTML分配给p元素的变量。

它只处理输入参数，但当我尝试添加味精时，它停止工作。也许这是一个简单的原因，但我是新来的。

我该如何做这项工作？

var assignment = document.getElementById("assignment"); 
 
var inputs = assignment.getElementsByTagName('input'); 
 
var btnCreate = document.getElementById("submit"); 
 
var message = document.getElementById("message"); 
 
     
 
var msg = ""; 
 

 
btnCreate.onclick = function() { 
 

 
    if (inputs[0].value === "" || inputs[1].value === "" || inputs[2].value === "") { 
 
    emptyInputs(inputs,msg); 
 
    } 
 

 
    message.innerHTML = msg; 
 

 
} 
 

 
function emptyInputs(input,text) { 
 

 
    for(var i = 0; i < input.length; i++) { 
 

 
    if (input[i].value === "") { 
 

 
     if(!text) { 
 
     missing(); 
 
     } 
 

 
     text += "- " + input[i].name + "<br />"; \t 
 

 
    } 
 

 
    function missing() { 
 
     text = "<strong>Please type in:</strong> <br />"; 
 
    } 
 
    
 
    } 
 
}

<section id="assignment"> 
 

 
    <h1>Add new user</h1> 
 

 
    <form id="newUser"> 
 

 
    <div class="inputGroup"> 
 
     <label for="username">Username</label> 
 
     <input type="text" id="username" name="username" /> 
 
    </div> 
 

 
    <div class="inputGroup"> 
 
     <label for="password">Password:</label> 
 
     <input type="password" id="password" name="password"/> 
 
    </div> 
 

 
    <div class="inputGroup"> 
 
     <label for="passwordConfirm">Confirm password:</label> 
 
     <input type="password" id="password2Confirm" name="confirmPassword"/> 
 
    </div> 
 

 
    <button id="submit" type="button">Opprett</button> 
 

 
    </form> 
 

 
    <p id="message"></p> 
 
     
 
</section>

Answer 1

你非常接近解决您的问题。唯一的是，JavaScript没有输出参数。

当您传递对象或数组时，您可以修改内容，这些更改将反映在您的调用方法中。但是这对字符串不起作用。不管字符串的价值是什么，当你用它作为参数来调用你的方法时，无论你的方法对它做什么，它仍然是值。

var 
 
    array = ['hello'], 
 
    object = { hello: true }, 
 
    string = 'hello'; 
 
    
 
function modifyArray(inputArray) { 
 
    inputArray.push('bye'); 
 
} 
 

 
function modifyObject(inputObject) { 
 
    inputObject.bye = true; 
 
} 
 

 
function modifyString(inputString) { 
 
    inputString += ', bye'; 
 
} 
 

 
modifyArray(array); 
 
modifyObject(object); 
 
modifyString(string); 
 

 
// This will print hello and bye 
 
console.log('Content of array after calling method: ', array); 
 
// This will print hello and bye 
 
console.log('Content of object after calling method: ', object); 
 
// This will just print hello 
 
console.log('Content of string after calling method: ', string);

解决您的问题，创建构建错误消息的方法内text字符串，并返回字符串作为方法的结果。

var assignment = document.getElementById("assignment"); 
 
var inputs = assignment.getElementsByTagName('input'); 
 
var btnCreate = document.getElementById("submit"); 
 
var message = document.getElementById("message"); 
 
     
 

 
btnCreate.onclick = function() { 
 
    var 
 
    // Initialize the error message to an empty string. 
 
    msg = ''; 
 
    
 
    // Check if either of the inputs is empty... 
 
    if (inputs[0].value === "" || inputs[1].value === "" || inputs[2].value === "") { 
 
    // ... and get a custom message prompting the user to fill in the empty data. 
 
    msg = emptyInputs(inputs); 
 
    } 
 
    
 
    // Display the error message, or clear it when msg is an empty string. 
 
    message.innerHTML = msg; 
 
} 
 

 

 
function emptyInputs(input) { 
 
    // Initialize the error text. 
 
    var 
 
    missingPrompt = "<strong>Please type in:</strong> <br />", 
 
    text = ''; 
 

 
    // Iterate over the provided input elements. 
 
    for(var i = 0; i < input.length; i++) { 
 
    
 
    // Check if the value of the current input is an empty string... 
 
    if (input[i].value === "") { 
 
     // ... check if the error text is still empty... 
 
     if(text === '') { 
 
     // ... and if it is start with a default message. 
 
     text = missingPrompt; 
 
     } 
 

 
     // ... add the field name to the error message. 
 
     text += "- " + input[i].name + "<br />"; \t 
 
    } 
 
    } 
 
    
 
    // Return the error message. 
 
    return text; 
 
}

<section id="assignment"> 
 

 
    <h1>Add new user</h1> 
 

 
    <form id="newUser"> 
 

 
    <div class="inputGroup"> 
 
     <label for="username">Username</label> 
 
     <input type="text" id="username" name="username" /> 
 
    </div> 
 

 
    <div class="inputGroup"> 
 
     <label for="password">Password:</label> 
 
     <input type="password" id="password" name="password"/> 
 
    </div> 
 

 
    <div class="inputGroup"> 
 
     <label for="passwordConfirm">Confirm password:</label> 
 
     <input type="password" id="password2Confirm" name="confirmPassword"/> 
 
    </div> 
 

 
    <button id="submit" type="button">Opprett</button> 
 

 
    </form> 
 

 
    <p id="message"></p> 
 
     
 
</section>

Answer 2

这里是没有味精参数的代码，它的工作就好了。

var assignment = document.getElementById("assignment"); 
 
var inputs = assignment.getElementsByTagName('input'); 
 
var btnCreate = document.getElementById("submit"); 
 
var message = document.getElementById("message"); 
 

 
var msg = ""; 
 

 
btnCreate.onclick = function() { 
 

 
    msg = ""; 
 

 
    if (inputs[0].value === "" || inputs[1].value === "" || inputs[2].value === "") { 
 

 
    emptyInputs(inputs); 
 

 
    } 
 

 
    message.innerHTML = msg; 
 

 
} 
 

 
function emptyInputs(input) { 
 

 
    for(var i = 0; i < input.length; i++) { 
 

 
    if (input[i].value === "") { 
 

 
     if(!msg) { 
 
     missing(); 
 
     } 
 

 
     msg += "- " + input[i].name + "<br />"; \t 
 

 
    } 
 

 
    function missing() { 
 
     msg = "<strong>Please type in:</strong> <br />"; 
 
    } 
 
    } 
 
}

<section id="assignment"> 
 

 
    <h1>Add new user</h1> 
 

 
    <form id="newUser"> 
 

 
    <div class="inputGroup"> 
 
     <label for="username">Username</label> 
 
     <input type="text" id="username" name="username" /> 
 
    </div> 
 

 
    <div class="inputGroup"> 
 
     <label for="password">Password:</label> 
 
     <input type="password" id="password" name="password"/> 
 
    </div> 
 

 
    <div class="inputGroup"> 
 
     <label for="passwordConfirm">Confirm password:</label> 
 
     <input type="password" id="password2Confirm" name="confirmPassword"/> 
 
    </div> 
 

 
    <button id="submit" type="button">Opprett</button> 
 

 
    </form> 
 

 
    <p id="message"></p> 
 
     
 
</section>