Javascript 如何从检查的输入中为计数价格编写代码

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

但是我不知道怎么做

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

你能帮我吗

---

通过查看代码，您似乎希望从单选按钮中获得用户选择的选项，而不是所有单选按钮（参考）。为此，您可以查看返回的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;
   }
}

for（设i=0；i

---

对所有输入类型执行此操作后，您可以对其进行求和。

您可以通过获取所有输入的元素列表、检查选中的元素、获取它们的值、将它们转换为数字并求和来完成此操作

从ID列表开始，使用将列表转换为字符串ID列表（

1->test1

）

然后应用于每个id以获取HTML元素

然后，如果选中输入，则从元素中提取并转换值，否则将元素映射为0

用于对值求和

使用，找到输出范围，并将其

innerHTML

设置为总计

函数showPrice（）{
常量总计=[1,2,3,4,5,6,7,8,9]
.map（id=>`test${id}`）
.map（id=>document.getElementById（id））
.map（el=>el&&el.checked？编号（el.value）：0）
.减少（（总和，值）=>总和+值，0）；
document.getElementById（'getPrice'）。innerHTML=total；
}

.priceInput{
显示：块；
边框：1px纯黑；
填充：10px；
宽度：300px；
文本对齐：居中；
左边距：自动；
右边距：自动；
}
.价格输出{
显示：块；
边框：1px纯黑；
填充：10px；
宽度：300px；
文本对齐：居中；
左边距：自动；
右边距：自动；
}

第一部分

测试1
测试2
测试3
第二部分
测试4
测试5
测试6
第三部分
测试7
测试8
测试9


显示价格
你们的价格是：0$

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

我只发现了一个问题：当我从HTML输入标签中删除“checked”时，我只为1或2个单选选项设置了klikn，它在段落中显示了NaN的价格

顺便说一句，对不起我的英语（我通常不使用英语）

或者您也可以登录
非常感谢您的快速回答。你的代码工作100%。但是我不明白：.map（id=>
test${id}
）和这个.reduce（（sum，value）=>sum+value，0）。我将学习一些关于array.map和reduce的知识。test${id}是一个模板字符串，它允许您将变量注入字符串中，我为reduce和mapHi添加了一些链接，我试图理解它，但我不能：/也许我不会像您那样是一名优秀的开发人员，但我尝试编写自己的代码。你能检查一下吗？我知道它在工作，但如果它写得正确。您好，我找到了它的意思。map（id=>
test${id}
）……如果没有，请修复我。map（id=>'test'+（id））。但是我仍然不知道如何理解这个。map（el=>el&&el.checked？Number（el.value）：0是吗？如果（el=>el&&el.checked）{.map（Number（el.value））}else.map（0）
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;
   }
}

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