Javascript For Loop迭代多个输入数量限制

Question

在我的 javascript 类的 javascript 家庭作业中，该作业需要一个“.js”循环迭代来列出用户输入的宠物的名称（限制为 3）。

共有三个水平间隔的文本输入框，无论用户在哪个文本框中输入宠物名称，提交按钮下方的“消息”（id）输出都会显示输入的宠物名称，直至达到由用户（

到目前为止，我已经尝试将宠物 ID 和宠物名称称为 memberid ('pet' + 'cntr')、membername，并在 for 循环迭代中将它们一起指定为 members += membered + membername;

if (myNumPets == '' || myNumPets > 3) {
  $('numpets_error').innerHTML = " Please enter the number of
  pets you have ";
  myTruth = true;
} else {
  if (myNumPets < '4') {
    $('numpets_error').innerHTML = "";
    myTruth = false;
  }
}

if (myNumPets == 0) {
  myNumPetsEntered = 0;
} else {
  if (myNumPets == 1) {
    myNumPetsEntered = 1;
  } else {
    if (myNumPets == 2) {
      myNumPetsEntered = 2;
    } else {
      if (myNumPets == 3) {
        myNumPetsEntered = 3;
      }
    }
  }
}

cntr = '';

members = "";

for (cntr = 1; cntr <= myNumPetsEntered; cntr++) {
  var memberid = "pet" + cntr;
  console.log("MID " + memberid);
  var membername = $(memberid).value;

  members += memberid + membername;
}

$('message').innerHTML = members;

在本代码中，当数量限制为“1”时，只有第一个输入框在提交按钮下方的“消息”区域中显示输入的宠物名称；但是，我希望输入的宠物的名字出现在那里，无论输入的宠物的名字是在第一个和最左边的输入框中还是在它右边的两个输入框中，我希望同样如此其他数量限制（2 和 3）。

Answer 1

在您的for 循环中，您只是盲目地获取N 文本输入的值，其中N = myNumPetsEntered。

如果myNumPetsEntered == 1 并且您在第二个输入框中输入了宠物的名字，则循环将永远不会看到该值。您需要进行一些验证以确保您确实获取了一个值。

我不知道这个家庭作业的参与程度，但您可能也有兴趣验证带有值的文本框的数量是否至少等于（或大于）用户的宠物名称数量说他们要输入。

您还可以清理那些嵌套的 if 语句 - 假设您有防止 myNumPets 成为负值的逻辑，您可以使用：

if (myNumPets <= 3) {
  myNumPetsEntered = myNumPets;
}

Answer 2

首先，这个块代码可以清理很多。目前的逻辑很混乱。想象一下，如果限制是 8 而不是 3。

if (myNumPets == 0) {
  myNumPetsEntered = 0;
} else {
  if (myNumPets == 1) {
    myNumPetsEntered = 1;
  } else {
    if (myNumPets == 2) {
      myNumPetsEntered = 2;
    } else {
      if (myNumPets == 3) {
        myNumPetsEntered = 3;
      }
    }
  }
}

我的建议是改成这样的范围：

if ((myNumPets >= 0) && (myNumPets <= 3)) {
  myNumPetsEntered = myNumPets;
}

说实话，我正在努力理解问题的其余部分。认为您正在追求以下内容：

var petCount = 0;
function petAdd(e) {
  // stop the default button function
  e.stopPropagation();
  e.preventDefault();
  // make sure only 3 pet names are entered.
  if (petCount >= 3) {
    alert("There is a max of 3 pet names");
    return;
  }
  // do we have a new pet name?
  var pet = document.getElementById("petNameInput");
  if ((pet.value) && (pet.value.trim())) {
    // we do have a name, add the name to the display
    var displayName = document.getElementById("petNameDisplay");
    // is it the first name?
    if (petCount == 0) {
      displayName.textContent = "My pet name(s) are: "+ pet.value.trim();
    } else {
      displayName.textContent += ", "+ pet.value.trim();
    }
    // keep track of the number of names
    petCount++;
    // clear the old name, ready for the next
    pet.value = "";
  }
  // have we reached 3 names yet? if so, remove the input
  if (petCount >= 3) {
    var petRow = document.getElementById("petNameRow");
    if (petRow) {
      petRow.style.display = "none";
    }
  }
}

// add the method call when the button is pressed
window.onload = function() {
  var d = document.getElementById("petAddButton");
  if (d) {
    d.addEventListener("click",petAdd,false);
  }
}

What are you pets' names? <i>max of 3</i><br />
<div id="petNameRow">
  <input type="text" id="petNameInput" placeholder="Enter a name here" /> 
  <button id="petAddButton">Add pet</button>
</div>
<div id="petNameDisplay"></div>

Answer 3

只是一个观察：这整个块是不必要的。为什么不只是myNumPetsEntered = myNumPets？或者更好的是，完全消除myNumPetsEntered 并在循环中使用myNumPets？

if (myNumPets == 0) {
  myNumPetsEntered = 0;
} else {
  if (myNumPets == 1) {
    myNumPetsEntered = 1;
  } else {
    if (myNumPets == 2) {
      myNumPetsEntered = 2;
    } else {
      if (myNumPets == 3) {
        myNumPetsEntered = 3;
      }
    }
  }
}

无论如何。这是一种方法。不确定它是否满足你的家庭作业要求，但我不应该做你的家庭作业。

function onButtonClick () {
  // get the pet name inputs
  const inputs = document.querySelectorAll('input[name=petname]');
  
  // get the max names value
  const max = document.querySelector('input[name=max]').value;
  
  const names =
    Array.from(inputs.values()) // convert the 'inputs' NodeList to an array
      .map(i => i.value.trim()) // extract the value of each input and strip white space
      .filter(Boolean) // filter out anything 'falsy' to eliminate empty values
      .slice(0, max); // chop off anything beyond the max number
    
  // string the values together, separated by a comma, and insert the result into the message box.
  document.getElementById('message').innerHTML = names.join(', ');
}

label, button {
  display: block;
}

input {
  margin: 1rem 0;
}

<div>
  <label>Number of Pets: <input type="number" min="1" max="3" name="max" value="3" /></label>
  
  <input name="petname" />
  <input name="petname" /> 
  <input name="petname" />
  <button onClick="onButtonClick()">Go.</button>
  <div id="message" />
</div>