功能上的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>