0
Вот функция, я использую, чтобы получить значение выбора пользователя кнопки радио из 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. Два радиодиапазона имеют разные названия. Когда я первый, он отлично работает и возвращает значение правильно, но когда я делаю второй, исходная страница подчеркивает линию
for(var i = 0; i < oRadio.length; i++)
и говорит: «неперехваченным TypeError: Не удается прочитать свойство„длина“ of undefined "
Я определенно пытаюсь назвать это по правильному имени.
Когда я изменяю имена второго радио, чтобы соответствовать первому в файле html и javascript, результатом является то, что вытаскиваемое значение - это тот, который вытащил ПЕРВОЕ время (одно из первой) страницы «).
Как я могу заставить эту функцию работать со вторым набором радиостанций?
EDIT: 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();
});
Включите свой HTML-код и как вы вызываете эту функцию. –
Чтобы ответить на вопрос, вы получаете эту ошибку, вероятно, потому, что переменная oRadio не является массивом. –
@LeoCHan ошибка означает, что 'oRadio'' undefined', так что да, это не массив :) – Pointy