javascript - 在javascript中添加变量

Question

我正在准备一个购物车，其定价来自菜单中所选项目的数量。我正在使用 javascript 在同一页面上计算价格。

function myFunction() {
  var coffee = document.forms[0];
  var txt = 0;
  var i;


  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt = txt++;
    }
  }
  document.getElementById("order").value = txt;
}

<label> Select the project category you will like to float </label>
<div class="form-group">
  <input type="checkbox" name="coffee" value="1">Web Development
  <input type="checkbox" name="coffee" value="1">App Development
  <input type="checkbox" name="coffee" value="1">SEO Ninja
  <input type="checkbox" name="coffee" value="1">The Social media geek
  <input type="checkbox" name="coffee" value="1">Design Wizard
  <input type="checkbox" name="coffee" value="1">The contest of Content
  <input type="checkbox" name="coffee" value="1">Marketing Marathon
  <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
</div>

<input type="button" onclick="myFunction()" value="Add to cart">
<input type="text" id="order" size="50">
<div class="row">
  <div class="form-group">
    <ul class="actions">
      <input type="submit" name="submit3" value="Register">
    </ul>
  </div>
</div>
</form>

谁能帮我用 txt 返回一个整数值(= 检查的项目数)。

Answer 1

当您使用 txt = txt++; 时，您正在用旧值替换下一个值。您只需要使用 txt++。另外，我认为最好为表单提供一个 id 以确保您定位的是正确的表单，因为 id 是/必须是唯一的。请参阅下面的工作片段:

function myFunction() {
  var coffee = document.getElementById('cart_form');
  var txt = 0;
  var i;

  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt++;
    }
  }
  document.getElementById("order").value = txt;
}

<form method='post' action='' id='cart_form'>
  <label> Select the project category you will like to float </label>
  <div class="form-group">
    <input type="checkbox" name="coffee" value="3">Web Development
    <input type="checkbox" name="coffee" value="1">App Development
    <input type="checkbox" name="coffee" value="1">SEO Ninja
    <input type="checkbox" name="coffee" value="1">The Social media geek
    <input type="checkbox" name="coffee" value="1">Design Wizard
    <input type="checkbox" name="coffee" value="1">The contest of Content
    <input type="checkbox" name="coffee" value="1">Marketing Marathon
    <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
  </div>

  <input type="button" onclick="myFunction()" value="Add to cart">
  <input type="text" id="order" size="50">
  <div class="row">
    <div class="form-group">
      <ul class="actions">
        <input type="submit" name="submit3" value="Register">
      </ul>
    </div>
  </div>
</form>

如您所见，我还为 form 元素添加了开始标记。

您可以从此处运行工作代码段，也可以查看 JSFIDDLE 如果需要，可以对其进行测试。

没有旧的 onclick 的替代方法是像这样对点击使用 addEventListener:

document.getElementById("add_to_cart").addEventListener("click", function() {
  var coffee = document.getElementById('cart_form');
  var txt = 0;
  var i;

  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt++;
    }
  }
  document.getElementById("order").value = txt;
});

<form method='post' action='' id='cart_form'>
  <label> Select the project category you will like to float </label>
  <div class="form-group">
    <input type="checkbox" name="coffee" value="3">Web Development
    <input type="checkbox" name="coffee" value="1">App Development
    <input type="checkbox" name="coffee" value="1">SEO Ninja
    <input type="checkbox" name="coffee" value="1">The Social media geek
    <input type="checkbox" name="coffee" value="1">Design Wizard
    <input type="checkbox" name="coffee" value="1">The contest of Content
    <input type="checkbox" name="coffee" value="1">Marketing Marathon
    <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
  </div>

  <input type="button" id='add_to_cart' value="Add to cart">
  <input type="text" id="order" size="50">
  <div class="row">
    <div class="form-group">
      <ul class="actions">
        <input type="submit" name="submit3" value="Register">
      </ul>
    </div>
  </div>
</form>

我看到您也将其标记为 jQuery。这是使用 $(":checkbox:checked").length 的替代方法:

$('#add_to_cart').on('click', function(){
  $('#order').val($("#cart_form :checkbox:checked").length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' action='' id='cart_form'>
  <label> Select the project category you will like to float </label>
  <div class="form-group">
    <input type="checkbox" name="coffee" value="3">Web Development
    <input type="checkbox" name="coffee" value="1">App Development
    <input type="checkbox" name="coffee" value="1">SEO Ninja
    <input type="checkbox" name="coffee" value="1">The Social media geek
    <input type="checkbox" name="coffee" value="1">Design Wizard
    <input type="checkbox" name="coffee" value="1">The contest of Content
    <input type="checkbox" name="coffee" value="1">Marketing Marathon
    <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
  </div>

  <input type="button" id='add_to_cart' value="Add to cart">
  <input type="text" id="order" size="50">
  <div class="row">
    <div class="form-group">
      <ul class="actions">
        <input type="submit" name="submit3" value="Register">
      </ul>
    </div>
  </div>
</form>