如何编写来自已检查输入的计数代码的代码

Question

我2周前开始学习javascript。我想做我的第一个程序，它从已检查的输入中计算所有价格。

但我不知道如何做到这一点。

我在互联网和stackoverflow上发现了一些东西，但我不知道为我的输入做这件事。

你可以帮帮我吗？

My code

// 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. 从id列表开始，使用Array.map()将列表转换为字符串ID列表（1 -> test1）。
2. 然后将getElementById()应用于每个id以获取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

通过查看您的代码，您似乎希望获得用户从单选按钮中选择的选项而不是所有单选按钮（指getElementsByName）。为此，您可以检查返回的nodeList，并查看是否有任何元素具有checked属性。

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;
   }
}

对所有输入类型执行此操作后，您可以对它们进行总结。

Answer 3

JO_VA这是我自己的代码。你能检查一下吗？这对我的理解更容易。

我发现只有一个问题，它是：当我从HTML输入标签中删除“已检查”并且我只为1或2个无线电选项时，它会在段落中显示NaN的价格。

BTW对不起我的英语（我通常不使用英语）

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查看