0

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

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

到目前为止，我已经尝试将宠物 ID 和宠物名称称为 memberid ('pet' + 'cntr')、membername，并且在 for 循环迭代中它们一起被赋予 members += membered + membername; 的 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”时，只有第一个输入框在提交按钮下方的“消息”区域中显示输入的宠物名称；但是，我希望输入的宠物的名字出现在那里，无论输入的宠物的名字是在第一个和最左边的输入框中还是在它右边的两个输入框中，我希望同样如此其他数量限制（2 和 3）。

4

3 回答 3

0

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

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

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

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

if (myNumPets <= 3) {
  myNumPetsEntered = myNumPets;
}
于 2019-05-12T06:39:35.710 回答
0

只是一个观察：这整个块是不必要的。为什么不只是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>

于 2019-05-12T06:47:59.937 回答
0

首先，这个块代码可以清理很多。目前的逻辑很混乱。想象一下，如果限制是 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>

于 2019-05-12T06:56:36.253 回答