Question

在我的javascript类的javascript作业分配上，该分配要求循环迭代使用“ .js”以列出用户输入的宠物的名称（限制为3个）。

有三个水平间隔的文本输入框，无论用户将宠物名称输入哪个文本框，提交按钮下方的“消息”（id）输出都将显示输入的宠物名称，直到输入的名称所限制。用户（<= 3）。输入宠物的名字并单击提交按钮后，页面将从用户输入的最左侧文本框开始向右显示宠物的名字，直到用户选择的输入限制（<= 3）达到极限因此，如果用户选择2作为限制，则只会在“提交”按钮下方显示输入宠物名称的最左侧文本框。

到目前为止，我已经尝试将pet id和pet名称称为memberid（'pet'+'cntr'），membername，并在for循环迭代中一起为它们指定成员的ID + = 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

仅需观察：不需要整个块。为什么不只是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>

Answer 3

首先，可以大量清理此块代码。当前的逻辑是混乱的。试想一下，如果限制是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>

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

3 个答案: