Как взять несколько входных данных и получить конечное значение, если все они истинны?

#javascript #html

#javascript #HTML

Вопрос:

Вероятно, здесь легче объяснить, чем в моем названии. У меня есть 3 входных данных для пользователя, если все три соответствуют моим условиям, то я хочу что-то записать в HTML, если все три не соответствуют условиям, то я хочу, чтобы в HTML была записана другая фраза. Проблема, с которой я сталкиваюсь, заключается в том, чтобы все 3 входных данных соответствовали моим условиям, я знаю, что могу использовать оператор if else для записи HTML после того, как каждый из них true или нет. Мне нужно, чтобы ввод среднего балла был больше 2,75, ввод группы учащихся должен быть> = 1, а значение SUNY student просто должно быть да или нет, да, чтобы условие было истинным.(Не уверен, как отформатировать этот ввод, чтобы вы могли выбрать только «да» или «нет», например, в раскрывающемся списке или что-то в этом роде)

 <form>
  Do you qualify to join the club?<br>
  Your GPA:<br> 
  <input type="number"><br>
  How many student groups do you belong to?<br> 
  <input type="number"><br>
  Are you a SUNY student?<br> 
  <input type="text">
</form>
<button type="submit" onclick:"qualify()">See if you qualify</button>
</form>
<h4 id="qual"> Look here to check</h4>
 

Ответ №1:

                             You could do something like this:

var firstInput = document.getElementByTagName("input")[0];
var secondInput = document.getElementByTagName("input")[1];
var thirdInput = document.getElementByTagName("input")[2];
if((firstInput > 2.75) amp;amp; (secondInput >= 1) amp;amp; (thirdInput == "yes") || (thirdInput == "no")){document.write("<b>YOUR CONTENT HERE</b>")}
else{document.write("<b>YOUR CONTENT HERE</b>")}
 

Ответ №2:

Вы не упомянули, что вы хотите записать в html. Я изменил разметку, потому что с помощью кнопки форма отправки перезагружается, не уверен, хотите ли вы такого поведения

Вы можете проверить следующий фрагмент кода, чтобы достичь того, что вы объяснили

 $(document).ready(function(){
  $("#qualify").bind('click',function(){
    
      var gpa=$("#GPA").val();
    gpa=gpa-0;
    var students=$("#students").val();
    students=students-0;
    var studentType=$("#studenttype").val();

    if(gpa>=2.75 amp;amp; students>1 amp;amp; studentType=="Yes")
        alert("successful");
      
  });
}) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
                Do you qualify to join the club?
                <br>
                Your GPA:<br> <input type="number" id="GPA">
                <br>
                How many student groups do you belong to?<br> <input type="number" id="students">
                <br>
                Are you a SUNY student?<br> <input type="text" id="studenttype">
                </form>
                <input type="button" id="qualify" value="See if you qualify"/>
                </form>
                <h4 id="qual"> Look here to check</h4> 

Надеюсь, это поможет

Ответ №3:

Вот простой способ, использующий обычный javascript.

Вам потребуется действительно улучшить проверку, но это работает как хорошая отправная точка:

 function qualify() {
  var inputs = document.getElementsByTagName('input');
  var result = 'Not Qualified!';
  // crude and without much validation here:
  if (inputs[0].value > 2.75 amp;amp; inputs[1].value >= 1 amp;amp; ['yes', 'Yes'].indexOf(inputs[2].value) > -1) {
    result = 'Qualified!';
  }
  document.getElementById('qual').innerHTML = resu<
};
window.qualify = qualify; 
 <form>
  Do you qualify to join the club?
  <br> Your GPA:
  <br>
  <input type="number">
  <br> How many student groups do you belong to?
  <br>
  <input type="number">
  <br> Are you a SUNY student?
  <br>
  <input type="text">
</form>
<button type="submit" onclick="qualify()">See if you qualify</button>
</form>
<h4 id="qual"> Look here to check</h4> 

Комментарии:

1. Это работает довольно хорошо, я проверю это позже, спасибо

Ответ №4:

Если вы не возражаете против включения jQuery, вы можете использовать следующий метод. Я добавил <select> меню для вашего выпадающего списка «Да / Нет» и удалил <form> элемент, так как использование интерфейсной проверки этого не требует. Вот рабочий JSFiddle, а код приведен ниже.

HTML — код

     Do you qualify to join the club?
    <br>
    Your GPA:<br> <input type="number" id="gpa">
    <br>
    How many student groups do you belong to?<br> <input type="number" id="sg">
    <br>
    Are you a SUNY student?<br>
    <select id="suny">
       <option value="">Choose...</option>
       <option value="yes">Yes</option>
       <option value="no">No</option>
    </select>
    <button id="btnQualify">See if you qualify</button>
    <h4 id="qual"> Look here to check</h4>
 

jQuery

 $(document).ready(function() { //when the page loads
   $("#btnQualify").click(function() { //when the btn is clicked
      var $gpa = $("#gpa");
      var $sg = $("#sg");
      var $suny = $("#suny");

      //parseInt is used to convert text to a number for comparison
      if (parseInt($gpa.val()) > 2.75 amp;amp; parseInt($sg.val()) >= 1 amp;amp; $suny.val() == "yes") {
           //All true, set h4
           $("#qual").html("You met all conditions!");
      } else {
           //Not all true, set h4
           $("#qual").html("You did not meet all conditions.");
      }
   });
 });
 

PS: SUNY alum представляет!