Question

这里可能比我的标题更容易解释。我有3个用户输入，如果这三个符合我的条件，那么我想写一些HTML，如果所有三个都不符合条件，那么我想要一个不同的短语写入HTML。我遇到的问题是获得所有3个输入以满足我的条件，我知道在每个输入完成后，我可以使用if else语句来编写HTML。我需要GPA输入大于2.75，学生组输入为＆gt; = 1，SUNY学生只需要是或否，是的，条件是真的。（不知道如何格式化输入所以你只能选择是或否，比如下拉框或其他东西）

initialize()

Answer 1

如果您不介意包含JQuery，可以使用以下方法。我为您的“是/否”下拉列表添加了<select>菜单，并删除了<form>元素，因为使用前端验证不需要它。这是一个working 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 && parseInt($sg.val()) >= 1 && $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代表！

Answer 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 && students>1 && 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>

希望这有帮助

Answer 3

                            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) && (secondInput >= 1) && (thirdInput == "yes") || (thirdInput == "no")){document.write("<b>YOUR CONTENT HERE</b>")}
else{document.write("<b>YOUR CONTENT HERE</b>")}

Answer 4

这是使用普通javascript的简单方法。

它需要你真正充实更好的验证，但它作为一个很好的起点：

＆＃13;

function qualify() {
  var inputs = document.getElementsByTagName('input');
  var result = 'Not Qualified!';
  // crude and without much validation here:
  if (inputs[0].value > 2.75 && inputs[1].value >= 1 && ['yes', 'Yes'].indexOf(inputs[2].value) > -1) {
    result = 'Qualified!';
  }
  document.getElementById('qual').innerHTML = result;
};
window.qualify = qualify;

＆＃13;

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

＆＃13;

如果一切都是真的，如何获取多个输入并获得最终值？

4 个答案: