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

update textfield when radio button is selected and button is pressed Javascript

本文关键字：更新 文本 字段 Javascript 按钮 单选按钮 选择      更新时间：2023-09-26

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

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

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

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

请只使用Javascipt。

谢谢！

代码笔：http://codepen.io/anon/pen/LpJqgj

        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>

这是因为在getOrder()中这一行addNumberOfItems.value=1；当您更改数量值时，将数量设为1

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

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

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

相关文章：