Javascript для цикла итерации несколько входных ограничений числа

Question

На домашнем задании по javascript для моего класса javascript это задание требует ".js" для итерации цикла, чтобы перечислить имена домашних животных, которые вводит пользователь (3 - ограничение).

Существует три горизонтально расположенных поля ввода текста, и независимо от того, в какие текстовые поля пользователь вводит имена питомцев, в "сообщении" (id) под кнопкой отправки будут отображаться имена питомцев, введенные до предела, наложенного пользователем (<= 3) После того, как имена домашних животных введены и нажата кнопка отправки, на странице будут отображаться имена домашних животных, начиная с самого левого текстового поля, в которое пользователь ввел данные, и двигаясь вправо, пока не будет выбрано ограничение ввода (<= 3), выбранное пользователем. достиг своего предела; поэтому, если пользователь выбирает 2 в качестве ограничения, под кнопкой отправки будут отображаться только самые левые текстовые поля с введенными именами питомцев.

До сих пор я пытался ссылаться на идентификаторы питомцев и имена питомцев как 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

Просто наблюдение: весь этот блок не нужен. Почему не просто 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 2

В вашем for цикл вы просто слепо захватывая значение N ввод текста, где N = myNumPetsEntered,

Если myNumPetsEntered == 1 и вы ввели имя питомца во второе поле ввода, цикл никогда не увидит это значение. Вы захотите сделать некоторую проверку, чтобы убедиться, что вы действительно захватили значение.

Я не знаю, насколько сложным является это домашнее задание, но вам также может быть интересно проверить, является ли количество текстовых полей со значениями, по крайней мере, равно (или больше) количеству имен домашних животных, которые пользователь сказал, что они были собираюсь на вход.

Вы также можете очистить эти вложенные if заявления - при условии, что у вас есть логика, предотвращающая myNumPets из отрицательного значения, вы можете просто использовать:

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

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>