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

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

0 голосов
/ 12 мая 2019

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

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

До сих пор я пытался ссылаться на идентификаторы питомцев и имена питомцев какmemberid ('pet' + 'cntr'), имя участника, и вместе в итерации цикла им присваивается идентификатор членов + = членство + имя участника; 

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).

Ответы [ 3 ]

0 голосов
/ 12 мая 2019

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

Для начала, этот код чанка можно много почистить.Нынешняя логика грязная.Просто представьте, что лимит был 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>
0 голосов
/ 12 мая 2019

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

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

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

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

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