Question

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

但是我不知道该怎么做。

我在Internet和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

通过查看您的代码，您似乎希望从单选按钮而不是所有单选按钮（请参阅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 2

您可以通过获取所有输入的元素列表，检查被检查的元素，获取它们的值，将它们转换为数字并求和来实现此目的。

从ID列表开始，使用Array.map()将列表转换为字符串ID（1 -> test1）列表。
然后将getElementById()应用于每个id以获取HTML元素。
然后从元素中提取并转换该值（如果选中了输入），否则将元素映射到0。
使用Array.reduce对值求和。
使用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 3

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

我发现只有1个问题，那就是：当我从HTML输入标签“ checked”中删除并且我只选择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

中进行检查

如何编写代码来检查已检查输入中的盘点价格

3 个答案: