Я новичок в Javascript, и я пытаюсь получить строку выбора для одновременного отображения, поскольку выполняется расчет количества отмеченных флажков (в виде цены). Я бы хотел использовать для этого ванильный Javascript.
HTML
<h3> Select Toppings </h3>
<form id="pizza-meat">
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Italian Sausage">Italian Sausage<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Bacon">Bacon<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Canadian Bacon">Canadian Bacon<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Meatballs">Meatballs<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Ham">Ham<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Grilled Chicken">Grilled Chicken<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Beef">Beef<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Pork">Jalapeno Peppers <br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Slim Jims"> Slim Jims <br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Salami"> Salami <br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Anchovies"> Anchovies <br>
</form>
<output id="result">Meat Price: <span id="selected2">0</span></output>
Meat: <output id="pizzaMeat"> </output>
Javascript
var selectedElm = document.getElementById('selected2');
function pizzaMeatPrice () {
selectedElm.innerHTML = document.querySelectorAll('input[name=meat]:checked').length*0.25;
}
document.querySelectorAll("input[name=meat]").forEach(i=>{
i.onclick =() => pizzaMeatPrice();
});
function meatOnPizza() {
var meat = document.getElementById("pizza-meat");
var txt = "";
var i;
for (i = 0; i < meat.length; i++) {
if (meat[i].checked) {
txt = txt + meat[i].value + ", ";
}
}
document.getElementById("pizzaMeat").value = txt;
}
По какой-то причине строка с мясом ничего не отображает. В идеале он должен отображать:
Бекон, Свинина, Салями (любой другой выбор)
Но по какой-то причине он не отображается.
Заранее спасибо!
2 ответа
Измените свою функцию на эту
function pizzaMeatPrice () {
selectedElm.innerHTML = document.querySelectorAll('input[name=meat]:checked').length*0.25;
meatOnPizza();
}
var selectedElm = document.getElementById('selected2');
function pizzaMeatPrice () {
selectedElm.innerHTML = document.querySelectorAll('input[name=meat]:checked').length*0.25;
meatOnPizza();
}
document.querySelectorAll("input[name=meat]").forEach(i=>{
i.onclick =() => pizzaMeatPrice();
});
function meatOnPizza() {
var meat = document.getElementById("pizza-meat");
var txt = "";
var i;
for (i = 0; i < meat.length; i++) {
if (meat[i].checked) {
txt = txt + meat[i].value + ", ";
}
}
document.getElementById("pizzaMeat").value = txt;
}
<h3> Select Toppings </h3>
<form id="pizza-meat">
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Italian Sausage">Italian Sausage<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Bacon">Bacon<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Canadian Bacon">Canadian Bacon<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Meatballs">Meatballs<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Ham">Ham<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Grilled Chicken">Grilled Chicken<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Beef">Beef<br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Pork">Jalapeno Peppers <br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Slim Jims"> Slim Jims <br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Salami"> Salami <br>
<input type="checkbox" name="meat" onclick="meatOnPizza()" value="Anchovies"> Anchovies <br>
</form>
<output id="result">Meat Price: <span id="selected2">0</span></output><br>
Meat: <output id="pizzaMeat"> </output>
Как насчет этого. Коды рабочие.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.