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

【问题标题】：update textfield when radio button is selected and button is pressed Javascript选择单选按钮并按下按钮时更新文本字段Javascript
【发布时间】：2015-11-06 16:53:49
【问题描述】：

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

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

跟踪总项目（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>

【问题讨论】：

@ShailendraSharma 会做的
"selected" 和 "foodOptionChecked1" 变量没有定义它们是什么？
请展示您的完整代码或创建一个小提琴
@ShailendraSharma 这是小提琴jsfiddle.net/Socha/t16hcL8q
只有空白下拉菜单，里面没有选项我如何重现您的问题

标签： javascript button radio-button textfield

【解决方案1】：

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

尝试在 getOrder() 中设置默认值的代码将解决质量重置问题

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

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

【讨论】：