Question

我希望一个友好的人可以在这里解决我的JavaScript问题。

我正在尝试学习一些有关javascript的知识，并进行一般的编码，为此我试图建立自己的内部拍卖系统，并且我不希望人们能够对相同或以下的产品，因此要禁用提交按钮，以此类推。

我的问题是，我开始使用ID并了解到，如果我有多个具有相同ID的元素，这将无法工作，所以我开始使用类。

我进行了以下操作，由于某些原因，该方法似乎不起作用，它不会比较两个数字：（

var inputOne = document.getElementsByClassName('form-control new_bid');
var inputTwo = document.getElementsByClassName('form-control old_bid');
setInterval(function() {
  if (inputOne >= inputTwo)
    $(":submit").removeAttr("disabled");
  else
    $(":submit").attr("disabled", "disabled");
}, 1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class='form-control old_bid' id="current_bid" name="current_bid" readonly>
<input type='text' class='form-control new_bid' id='place_bid' name='place_bid' placeholder='The bid you make are in ".getUser(false)->getOffice()->getRegion()->getCurrency()."' pattern='^[0-9]*$'>
<input id="submit_bid" type="submit" name="submit_bid" class="btn btn-primary" value="Place bid" />

谢谢！

Answer 1

您需要选择您正在使用的输入，并将其值解析为整数。另外，稍微更改最后一点：

var inputOne = parseInt(document.getElementsByClassName('form-control new_bid')[0].value);
var inputTwo = parseInt(document.getElementsByClassName('form-control old_bid')[0].value);
  setInterval(function () {
    if (inputOne >= inputTwo)
      $("#submit-bid").removeAttr("disabled");
      else
        $("submit-bid").attr("disabled", "disabled");
  }, 1000);

尽管由于您已经在使用jQuery并且具有ID，所以请执行以下操作：

var inputOne = parseInt($("#current_bid").val()),
    inputTwo = parseInt($("#place_bid").val());
setInterval(function () {
    if (inputOne >= inputTwo)
      $("#submit-bid").removeAttr("disabled");
      else
        $("submit-bid").attr("disabled", "disabled");
  }, 1000);

Answer 2

首先，您不想使用setInterval！您想使用EventListener，在这种情况下，keyup event很不错。

然后您可以使用querySelector，因此您不需要jQuery即可使用$('.class-selector')

正如其他人已经指出的那样，您需要使用element.value来获取所需元素的值。

然后，您需要使用parseInt从字符串到数字获取输入值以进行数字比较。

（请注意，我已删除了.new_bid上的只读内容，因此您可以使用该代码段）

(function(){
  var inputOne = document.querySelector('.new_bid');
  var inputTwo = document.querySelector('.old_bid');
  var submitButton = document.querySelector('#submit_bid');
  
  var myValuesChanged = function() {
      if (parseInt(inputOne.value, 10) >= parseInt(inputTwo.value, 10)) {
          submitButton.disabled = false;
      } else {
          submitButton.disabled = true;
      }
      
      console.log('submitButton disabled: ' + submitButton.disabled);
  }
  
  inputOne.addEventListener("keyup", myValuesChanged, false);
  inputTwo.addEventListener("keyup", myValuesChanged, false);
  
})();

<input type="text" class='form-control old_bid' id="current_bid" name="current_bid">
<input type='text' class='form-control new_bid' id='place_bid' name='place_bid' placeholder='The bid you make are in ".getUser(false)->getOffice()->getRegion()->getCurrency()."' pattern='^[0-9]*$'>
<input id="submit_bid" type="submit" name="submit_bid" class="btn btn-primary" value="Place bid" />

Answer 3

您需要使用inputOne.value来获取输入字段的当前值！

祝您学习编码的好运：D

Answer 4

您可以使用.value

var inputOne = document.getElementsByClassName('form-control new_bid')[0].value;
    var inputTwo = document.getElementsByClassName('form-control old_bid')[0].value;
    setInterval(function() {
      if (inputOne >= inputTwo)
        $(":submit").removeAttr("disabled");
      else
        $(":submit").attr("disabled", "disabled");
    }, 1);

比较if语句javascript中的两个变量

4 个答案: