Question

我有4个单选按钮，当我选择一个时，我希望数量的默认值（addNumberOfItems）为1.

当选择单选按钮时，它应该更新保存数量的文本字段。之后我有一个按钮添加到订单。问题是，当我单击addToOrderBtn并尝试增加文本字段的数量时（我将默认值1替换为2或3），它总是将其设置为1。

跟踪Total items（totalItems）的文本字段应该将我输入的内容添加到addNumbersOfItems中。

单击按钮时，我尝试更新addNumberOfItems的值。但它仍然设置为默认值。

Javascipt只是请。

谢谢！

        var addNumberOfItems = document.getElementById("numberOfItems");
        var addToOrderBtn = document.getElementById("addToOrder");
        var totalItems = document.getElementById("items");
        var totalPrice = document.getElementById("total");


    if (selected == "Classic" && foodOptionChecked1 == true) {
        addNumberOfItems.value = 1;
    };


    addToOrderBtn.onclick = function() {

        document.getElementById('numberOfItems').value = addNumberOfItems.value;

        totalItems.value = addNumberOfItems.value;
        totalPrice.value = foodClassic[0].smallPrice;

        addNumberOfItems.value = "";

    };

HTML

  <fieldset class="form1 hide" id="choices">
  <legend> your Choices </legend>

   <p style="margin-left:25%">Which one would you like?</p>

  <form style="float: right" id="selectSize">

    <input type="radio" id="food1" name="size" value=""><label id="foodLabel1">food1</label> 
    <br>
    <input type="radio" id="food2" name="size" value=""><label id="foodLabel2">food2</label>
    <br>
    <input type="radio" id="food3" name="size" value=""><label id="foodLabel3">food3</label>
    <br>
    <input type="radio" id="food4" name="size" value=""><label id="foodLabel4">food4</label>


     <input type="text"  id="numberOfItems" name="" value="">

   <button type="button" id="addToOrder">Add to order</button>
   <button type="button">Remove last item</button>

  </form>
  <p style="margin-top: 15%; margin-left:25%"> Extras! </p>
  <p style="margin-top: 11%; margin-left:25%"> How many? </p>

  </fieldset>

      <fieldset class="form1 hide" id="orderStatus">
      <legend> Order Status </legend>

       <form>
        Items<input type="text" name="" id="items">
        Total<input type="text" name="" id="total">

        <button type="button">Order Now</button>
        <button type="button">Cancel</button>
      </form>
     </fieldset>

Answer 1

这是因为在getOrder()里面这行addNumberOfItems.value = 1;更改数量值时将数量设为1

在你的getOrder（）中尝试以下代码，你设置默认值将解决你的质量重置问题

if (selected == "Classic" && foodOptionChecked1 == true) {
          if(addNumberOfItems.value.length == 0)  
             addNumberOfItems.value = 1;
            }
        };

但是我无法在更改质量值后找到为什么getOrder（）调用可能是因为main.js

中的代码

选择单选按钮并按下按钮时更新文本字段Javascript

1 个答案: