Как написать код для подсчета цен из проверенных входов

Question

Я начал изучать JavaScript 2 недели назад.Я хочу сделать свою первую программу, которая подсчитывает все цены из проверенного ввода.

Но я не знаю, как это сделать.

Я нашел что-то в интернете и stackoverflow, но я не знаю, чтобысделайте это для моих входов.

Не могли бы вы помочь мне?

Мой код

// this function counts all the values
function showPrice() {
    var priceOne = document.getElementsByName('price1');
    var priceTwo = document.getElementsByName('price2');
    var priceThree = document.getElementsByName('price3');
}    

Answer 1

Вы можете сделать это, получив список элементов для всех входных данных, проверьте те, которые проверены, получите их значения, преобразуйте их в числа и суммируйте их.

1. Началосо списком идентификаторов, используйте Array.map(), чтобы преобразовать список в список идентификаторов строк (1 -> test1).

2. Затем примените getElementById() для каждого идентификатора, чтобы получить элемент HTML.

3. Затем из элемента извлеките и преобразуйте значение, если вход проверен, в противном случае сопоставьте элемент с 0.

4. Используйте Array.reduce для суммирования значений.

5. Используя getElementById, найдите выходной диапазон иустановите его innerHTML на сумму.

function showPrice() {
  const total = [1,2,3,4,5,6,7,8,9]
    .map(id => `test${id}`)
    .map(id => document.getElementById(id))
    .map(el => el && el.checked ? Number(el.value) : 0)
    .reduce((sum, value) => sum + value, 0);

  document.getElementById('getPrice').innerHTML = total;
}

.priceInput {
  display: block;
  border: 1px solid black;
  padding: 10px;
  width: 300px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.priceOutput {
  display: block;
  border: 1px solid black;
  padding: 10px;
  width: 300px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

<div class="priceInput">
<p>Part 1</p>
<label for="test1">test1</label>
<input type="radio" name="price1" id="test1" value="10">
<label for="test2">test2</label>
<input type="radio" name="price1" id="test2" value="25">
<label for="test3">test3</label>
<input type="radio" name="price1" id="test3" value="12">
</div>
    
<div class="priceInput">    
<p>Part 2</p>    
<label for="test4">test4</label>
<input type="radio" name="price2" id="test4" value="5">
<label for="test5">test5</label>
<input type="radio" name="price2" id="test5" value="7">
<label for="test6">test6</label>
<input type="radio" name="price2" id="test6" value="2">
</div>
    
<div class="priceInput">   
<p>Part 3</p>    
<label for="test7">test7</label>
<input type="radio" name="price3" id="test7" value="250">
<label for="test8">test8</label>
<input type="radio" name="price3" id="test8" value="720">
<label for="test9">test9</label>
<input type="radio" name="price3" id="test9" value="410">
</div>
<br>
<div class="priceOutput">
  <button onclick="showPrice()">Show Price</button>
  <p>Your Price is : <span id="getPrice">0<!--Here i want to get price1(value) + price2(value) + price3(value)--></span> $</p>
</div>

Answer 2

JO_VA вот мой собственный код.Вы можете проверить это?Это проще для моего понимания.

Я обнаружил только одну проблему, и это так: когда я удаляю из HTML-тега ввода «флажок» и кликаю только для 1 или 2 параметров радио, он показывает NaN в пункте для цены.

Кстати извините за мой английский (я обычно не использую английский язык)

function showPrice(){
var pricePlace = document.getElementById("getPrice");
getVal1();
getVal2();
getVal3();
var InputNumber = Number(inputVal1) + Number(inputVal2) + Number(inputVal3);
pricePlace.innerHTML = InputNumber;
}
var inputVal1;
function getVal1(){
var a = document.getElementById("test1");
var b = document.getElementById("test2");
var c = document.getElementById("test3");
if (c.checked) {
    inputVal1 = c.value;
}
if (b.checked) {
    inputVal1 = b.value;
}
if (a.checked) {
    inputVal1 = a.value;
}
} 
var inputVal2;
function getVal2(){
var a = document.getElementById("test4");
var b = document.getElementById("test5");
var c = document.getElementById("test6");
if (c.checked) {
    inputVal2 = c.value;
}
if (b.checked) {
    inputVal2 = b.value;
}
if (a.checked) {
    inputVal2 = a.value;
}
}
var inputVal3;
function getVal3(){
var a = document.getElementById("test7");
var b = document.getElementById("test8");
var c = document.getElementById("test9");
if (c.checked) {
    inputVal3 = c.value;
}
if (b.checked) {
    inputVal3 = b.value;
}
if (a.checked) {
    inputVal3 = a.value;
}
}

Или вы можете проверить его в https://codepen.io/soorta/pen/gqEGyQ

Answer 3

Глядя на ваш код, кажется, что вы хотите получить опцию, выбранную пользователем из переключателей, а не всех переключателей (ссылаясь на getElementsByName ).Для этого вы можете просмотреть возвращенный нодлист и посмотреть, есть ли у какого-либо из элементов свойство selected.

for(let i = 0; i < priceOne.length; i++){
   if(priceOne[i].checked) {
     //Get value of the price selected with .value
     let priceOneValue = priceOne[i].value;
   }
}

После этого вы можете суммировать их для всех типов ввода.