一个函数的2个参数

Question

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

它仅使用输入参数，但当我尝试添加msg时，它停止工作。也许这只是一个简单的原因，但我是新手。

我该如何做到这一点？

＆＃13;

＆＃13;

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 />"; 	

    } 

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是没有msg参数的代码，它工作得很好。

format()

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 />"; 	

    } 

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

Answer 2

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

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

＆＃13;

＆＃13;

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);

＆＃13;

＆＃13;

＆＃13;

要解决您的问题，请在构建错误消息的方法中创建一个text字符串，并将该字符串作为方法结果返回。

＆＃13;

＆＃13;

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 />"; 	
    } 
  }
  
  // Return the error message.
  return text;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;