个人中心
gpt4 book ai didi

javascript - 为什么这个函数会导致错误？

转载 作者：行者123 更新时间：2023-11-28 11:33:20 25 4
gpt4 key购买 nike

这是我用来将用户选择的单选按钮的值从 html 文件获取到我的 javascript 文件中的函数:

  function getRadioCheckedValue(radio_name)
  {
     var oRadio = document.forms[0].elements[radio_name];
     for(var i = 0; i < oRadio.length; i++)
     {
        if(oRadio[i].checked)
       {
           return oRadio[i].value;
        }
     }
     return '';
  }

我正在使用一个 html 文件，但通过显示和隐藏 div 有两个 radio 拨号“页面”。两个 radio 拨号盘具有不同的名称。当我执行第一个操作时，它工作正常并正确检索值，但是当我执行第二个操作时，页面源代码会在该行下划线 

    for(var i = 0; i < oRadio.length; i++)

并表示“未捕获类型错误:无法读取未定义的属性‘长度’”

我绝对想用正确的名字来调用它。

当我更改第二个 radio 的名称以匹配 html 和 javascript 文件中的第一个 radio 时，结果是提取的值是第一次提取的值(来自第一个“页面”的值) )。

如何使该功能与第二组 radio 配合使用？

编辑:HTML:

<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.11.3.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
    <title>Pizza Parlor</title>
  </head>
  <body>
    <div class="container">
      <h1>Pizza Parlor</h1>

<!---Beginning of step 1-->
    <span class="step-1">
      <!--step 1 progress bar begin-->
      <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 4em;">
        Step 1/4
        </div>
      </div>
      <!--step 1 progress bar end-->
      <h1>Step 1: Pick your Size</h1>
      <!--step 1 options begin-->
      <form id="size">
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="Small ($10.00)">
            Small (10"): $10.00
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="Medium ($12.00)">
            Medium (12"): $12.00
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="large ($14.00)">
            Large (14"): $14.00
          </label>
        </div>
          <!--step 1 options end-->
        <br>
        <br>
        <button class="btn btn-primary"type="submit" class="btn">Next</button>
      </form>
  </span>
  <!--end of step 1-->

<!--step 2 begin-->
  <span class= "step-2">
    <!--step 2 progress bar begin-->
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 20%;">
          Step 2 of 4
      </div>
    </div>
    <!--step 2 progress bar end-->
    <h1>Step 2: Pick your Sauce</h1>
    <!--step 2 options begin-->
    <form id="sauce">
      <div class="radio">
        <label>
          <input type="radio" name="saucesRadios" id="sauceChoice1" value="Marinara">
          Marinara
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="sauceRadios" id="sauceChoice2" value="Alfredo">
          Alfredo
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="sauceRadios" id="sauceChoice3" value="Pesto">
          Pesto (add $2.00)
        </label>
      </div>
      <!--step 2 options end-->
      <br>
      <br>
      <button class="btn btn-primary"type="submit" class="btn">Next</button>
    </form>
  </span>
<!--step 2 end -->

<!--step 3 span class begin0-->
  <span class= "step-3">
    <!--step 3 progress bar begin-->
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 50%;">
    Step 3 of 4
      </div>
    </div>
    <!--step 3 progress bar end-->
    <form id="toppings">
      <div class="checkbox-inline">
        <h4>Meat</h4>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionToppings1" value="pepperoni (+ $2.00)">
          Pepperoni (+ $2.00)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionToppings2" value="sausage (+ $2.00)">
          Sausage (+ $2.00)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionToppings3" value="chicken (+ $3.00)">
          Chicken (+ $3.00)
        </label>
        <br>
        <h4>Veggies</h4>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings5" value="onions (+ $0.25)">
          Onions (+ $0.25)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings6" value="green peppers (+ $0.25)">
          Green Peppers (+ $0.25)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings7" value="Jalapeños (+ $0.25)">
          Jalapenos (+ $0.25)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings8" value="mushrooms (+ $0.25)">
          Mushrooms (+ $0.25)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings9" value="pineapple (+ $0.50)">
         Pineapple (+ $0.50)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings10" value="black olives (+ $0.50)">
          Black Olives (+ $0.50)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings11" value="green olives (+ $0.75)">
          Green Olives (+ $0.75)
        </label>
        <br>
        <h4>Cheese it up!</h4>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings4" value="extra cheese (+ $1.00)">
          Exta Cheese (+ $1.00)
        </label>
      </div>
      <!--step 3 options end-->
      <br>
      <br>
      <button class="btn btn-primary"type="submit" class="btn">Next</button>
    </form>
  </span>
<!--step 3 span end -->

<span class= "step-4">
  <!--step 4 progress bar begin-->
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 75%;">
  Last step!
    </div>
  </div>
  <!--step 4 progress bar end-->
  <form id="how-many">
    <div class="form-group">
      <label for="number-pizzas">Number of this pizza that you want: </label>
      <input type="text" class="form-control" id="number-pizzas">
    </div>
    <br>
    <br>
    <button class="btn btn-primary"type="submit" class="btn">Next</button>
  </form>
  <!--end of form-->
</span>
<!-- step 4 span end-->

<span class= "step-5">
  <em><p> Size: </p></em>
  <ul class="list unstyled" id="crust">
  </ul>
  <em><p> Sauce: </p></em>
  <span class=sauce></span>
  <em><p> Toppings: </p></em>
  <ul class="list unstyled" id="toppings">
  </ul>
  <hr width=25%  align=left>
  <p>Total price of this pizza: $<span class="price"></span></p>
  <p> Number of pies: <span class="num-pizzas"></span></p>
  <p> Total price for this order:</p> <h4>$<span class="total-price"></span></h4>
  <form id="place-order">
    <button class="btn btn-primary"type="submit" class="btn">Submit Order</button>
  </form>
</span>
<!--Step 5 span end-->

<span class="step-6">
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
  CONGRATULATIONS! Your order is being prepared! Pick it up in about 30 minutes!
    </div>
  </div>
</span>
  </body>
</html>

我如何在 javascript 中调用它:

  $(".step-1").show();
  $("form#size").submit(function(event) {
    var pizzaSize = getRadioCheckedValue("optionsRadios");
    $(".my-size").text(pizzaSize);
    $(".step-1").hide();
    $(".step-2").show();
    event.preventDefault();
  });

  $("form#sauce").submit(function(event) {
    var sauce = getRadioCheckedValue("sauceRadios");
    $(".step-2").hide();
    $(".step-3").show();
    event.preventDefault();
  });

最佳答案

您可以使用 jQuery 来做到这一点:

var pizzaSize = $(":radio[name=optionsRadios]:checked").val();

您的代码失败的原因是您的页面上有多个表单:一个用于尺寸的表单，另一个用于酱汁的表单等。document.forms[0] 仅在第一个表单，因此如果您尝试从其他表单之一获取单选按钮，它将找不到它。

关于javascript - 为什么这个函数会导致错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32789464/

25 4 0
文章推荐： ios - UIView 功能错误
文章推荐： jquery - 在ie8的同一个元素上添加渐变背景和图片
文章推荐： javascript - 如何视差边距最高值
文章推荐： jQuery UI Sortable/Draggable 导致窗口跳转
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com