循环迭代的JavaScript多个输入数字限制

Question

在我的JavaScript类的JavaScript作业分配上，该分配需要循环迭代的" .js"才能列出用户输入的宠物名称(3是限制(。

有三个水平间隔的文本输入框，无论用户输入宠物名称中的哪个文本框，提交按钮下方的"消息"(id(输出将显示宠物的名称，该名称的名称输入到限制的限制。用户(＆lt; = 3(。一旦输入宠物的名称并单击提交按钮，该页面将显示宠物的名称，从左侧的大多数文本框开始，用户已输入并朝右侧输入，直到用户选择的输入限制(＆lt; = 3(已达到极限；因此，如果用户选择2作为限制，则仅在提交按钮下方显示带有宠物名称的最左派文本框。

到目前为止，我已经尝试将PET ID和PET名称称为会员名称('PET' ' 'cntr'(，会员名称，并且在" for Loop迭代"中一起将其授予成员的ID =成员 成员名称；

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"时，只有第一个输入框在提交按钮下方的"消息"区域中显示了输入的PET名称；但是，我希望被输入的宠物的名字出现在那里，无论输入的宠物的名称是在第一个和左派输入框中还是右边的两个输入框中在其他数字限制(2和3(中。

Answer 1

在您的for环路中，您只是盲目地抓住N文本输入的值，其中N = myNumPetsEntered。

如果myNumPetsEntered == 1并且您将PET的名称输入到第二个输入框中，则循环将永远不会看到该值。您需要进行一些验证以确保您实际上抓住了一个价值。

我不知道此作业分配是如何涉及的，但是您可能也有兴趣验证具有值的文本框的数量至少等于(或大于(用户名称的宠物数量说他们要输入。

您也可以清理那些嵌套的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>