関数の2つのパラメータ

Question

入力フィールドが空であれば、ボタンonclickイベントを別の関数にジャンプしようとしています。 if文内の関数は、2つのパラメータ（1つの配列、1つの文字列変数）を持つ必要があります。関数はすべての入力要素をループして値を持っているかどうかをチェックし、そうでない場合は後で.innerHTMLを持つp要素に代入する変数にテキストを追加します。

入力パラメータだけで動作しましたが、msgを追加しようとすると動作を停止しました。たぶんそれは単純な理由ですが、私はこれに新しいです。

どうすればこの作品を作成できますか？ここで

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

はMSGパラメータなしのコードであり、それはうまく働いています。

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>