Javascript根据选择添加结果（HTML、CSS和Javascript）
我有一个HTML页面，有一个数据列表和一个输入型单选，我想通过按下底部的按钮，根据数据列表上的选择进行计算，每个选择都应该附加一个值，例如Κρητη和85等，单选第一点上的选择应该将数据列表中的值乘以1，二乘二等。。为了方便起见，我做了一些英语翻译的改动。为了进一步解释，我的意思是：用户从数据列表中选择一个选项，在我的示例中，这些选项是一些岛屿，用户还可以选择他希望在岛上住多少晚。每个岛屿都有自己的价格。我想做的是计算每晚的成本岛价格*入住的夜数，我的问题是如何保存用户选择以及如何保存变量以便进行计算。我希望我能被理解一点 选择目的地： 岛1的价格是每晚85英镑 岛2的价格是每晚70英镑 岛3的价格是每晚65英镑 岛4的价格是每晚55英镑 岛5的价格是每晚60英镑 一个晚上 两个晚上 三个晚上 四个晚上 五个晚上Javascript根据选择添加结果（HTML、CSS和Javascript）,javascript,html,css,Javascript,Html,Css,我有一个HTML页面，有一个数据列表和一个输入型单选，我想通过按下底部的按钮，根据数据列表上的选择进行计算，每个选择都应该附加一个值，例如Κρητη和85等，单选第一点上的选择应该将数据列表中的值乘以1，二乘二等。。为了方便起见，我做了一些英语翻译的改动。为了进一步解释，我的意思是：用户从数据列表中选择一个选项，在我的示例中，这些选项是一些岛屿，用户还可以选择他希望在岛上住多少晚。每个岛屿都有自己的价格。我想做的是计算每晚的成本岛价格*入住的夜数，我的问题是如何保存用户选择以及如何保存变量以便进
计算假期成本
结果：
此问题的一种可能解决方案如下： //缓存对页面中元素的引用， //document.querySelector返回第一个节点 //与提供的CSS选择器匹配或为空： const form=document.querySelector'form'， //这里我们有一个对象文本，它与 //岛屿以其每晚价格为变量 //顾名思义： 每晚成本={ “岛1”：85， “岛2”：70， “岛3”：65， “岛4”：55， “岛5”：60， }; //我们将匿名箭头函数绑定为的事件处理程序 //在任何子元素上激发“input”事件时 //在中，并将事件对象传递到 //功能： form.addEventListener'input'，e=>{ //在这里，我们得到了一个事件发生的参考- //处理程序已绑定： 设form=e.currentTarget， //这里我们得到一个元素的引用，该元素 //“input”事件最初被触发： 受影响=如目标， //这里我们使用Element.querySelectorAll来检索所有 //中与提供的匹配的元素 //CSS选择器；Element.queryselectoral返回 //元素的非活动节点列表，并将其转换 //使用数组文字运算符和 //扩展语法： checked=[…form.queryselectoral'：选中'] //然后，我们使用 //Array.prototype.filter以筛选该节点数组， //将节点数组的当前节点传递到 //职能： 滤器 el=>{ //使用Element.matches获取布尔值true/false //查看元素是否与CSS选择器匹配，因此 //检查当前节点是否为元素，以及 //该元素是此选项的默认选定项 //返回布尔值，如果为true，则返回true，如果为false，并进行检查 //如果再次禁用，则返回布尔值。 //原因是默认情况下第一个 //默认情况下，将选择元素的 //匹配“：checked”CSS选择器，但我想确保 //用户被迫选择自己的偏好，而不是 //而不是接受默认值： 如果el.matches'option'&&el.defaultSelected&&el.disabled{ //如果上述所有计算结果均为true，则返回 //false并从节点数组中删除： 返回false； } //否则我们返回true： 返回真值 }, //检索元素： fieldset=form.queryselectoral'fieldset'， //一个开关，用于评估 //：选中的项目数等于 //要素： haveBoth=checked.length==fieldset.length， //缓存对元素的引用： 结果=document.querySelector'result'， 成本=文档。查询选择器“成本”； //在这里，我们评估两者的结果，并将其倒置； //所以如果我们有相同数量的：检查元素 //两个元素的数量都是 //是的，这里我们把它颠倒为假，反之亦然。 //我们想进入这一分支，只要两者都有 //是假的，所以如果两者都有的话，我们就把假的倒过来 //这本身就是事实，我们不希望这样进入这个分支机构 //我们将true反转为false以跳过它： 如果 兼得{ //在这里，当hasseath为false时，我们隐藏result元素， //反过来说： result.hidden=true； }否则{ //这里我们使用Array.prototype.map在 //要根据返回不同数组的节点数组 //现有阵列： 选中。地图 //我们再次使用 //Array.prototype.map方法传递当前 //将数组的节点插入函数： el=>{ //我们检索最接近的祖先元素 //具有“name”属性的当前节点；在 //元素的情况是 //元素本身，以及 //元素它是父元素： 设hasName=el.最近的“[name]”， //我们使用解构赋值来分配 //要删除的hasName节点的命名属性值 //提供的变量包括： { 名称 价值 }=hasName； //这里我们使用HTMLOrForeignElement.datalist API //要在成本要素上创建数据-*属性， //将其属性值设置为 //当前值变量： cost.dataset[name]=值； //然后返回一个对象文本，其中包含两个 //属性、名称和值： 返回{ “name”：hasName.name， “值”：hasName.value } //我们使用Array.prototype.forEach在 //Array.prototype.map返回的对象数组， //将该数组的当前对象传递到 //作为“obj”变量的函数： }弗雷奇先生 //这里我们使用一个模板文本来检索供应链 //document.querySelector当前对象的名称 //检索将保存当前对象的 //值属性值： obj=>document.querySelector`${obj.name}`。textContent=obj.value ; //在这里，我们使用另一个模板文本来组合键 //我们可以使用括号表示法来获取每晚的成本 //正在检索所选岛屿的编号 //从前面成本节点上创建的数据-*属性： 让perNight=costPerNight[`island${cost.dataset.island}`]， //这里我们检索用户选择入住的夜数， //再次使用HTMLOrForeignElement.dataset API，然后 //使用基数为10的parseInt将该字符串转换为 //以10为基数的数字： nights=parseIntcost.dataset.nights，10； //我们将成本要素的文本内容更新为 //将perNight和nights变量相乘的结果： cost.textContent=每晚*晚； //我们将result元素的隐藏属性设置为false //它变得可见： result.hidden=false； } }; *, ：：之前， ：：之后{ 框大小：边框框； 字号：1rem； 线高：1.5； 保证金：0； 填充：0； } 形式{ 宽度：80vw； 保证金：0自动； 显示：网格； 网格模板列：repeat2，1fr； 间隙：0.5em； } 字段集{ 弹性：10自动； 显示器：flex； 弯曲方向：立柱； 间隙：0.5em； } 字段集+div{ flex:20自动； } h2：：之后{ 内容:'：'； } 选择 标签{ 宽度：80%； 边距内联：自动； } 标签跨度{ 边距内联开始：0.5em； } 输入：选中+span{ 字体大小：粗体； } 结果{ 网格行：自动； 网格柱：1/-1； } 结果跨度{ 字体大小：粗体； } 岛：非：空：：之前{ 内容:"岛";； } 夜晚：不：空：：之后{ 内容:"夜";； } 成本：非：空：：之前{ 内容：数据货币； } 和 关联的表单元素，以收集该信息：-> 元素：-> 元素来提供一个清晰的标题 我们还使用嵌套元素来提示用户 答案可能是a，但我想 元素在两个元素中的行为相似：-> 目的地 哪个岛 , 其中包含对用户的指令，是 选定，因此它的默认选定属性将为 正确，并且它已禁用，因此无法 由用户选择：-> 请选择： 一号岛每晚85英镑 2号岛每晚70英镑 3号岛，每晚65人 4号岛，每晚55人 5号岛，每晚60人 期间 你要呆多久 一晚 两晚 三晚 4晚 5晚 您已选择，费用为。
因为您使用的是javascipt，所以最好将所有列表存储在一个地方，并生成html 常数数据=[ { 名称:第一岛， 售价：85 }, { 名称:二号岛， 价格:70 }, { 名称:三号岛， 售价：65 }, { 名称:四号岛， 价格:55 }, { 名称:五号岛， 价格:6 0 } ] const destinationsCtl=document.getElementByIddestinations， calculateCtl=document.getElementByIdcalculate， choicesCtl=document.getElementByIdchoices， pricesCtl=document.getElementByIdprices， priceTempl=prices.querySelector.price， nightsCtl=document.getElementByIdnights， nightsList=nightsCtl.querySelectorAll'input[type=radio][name=night]， resultstl=document.getElementByIdresults， regId=newregexp\\\${+Object.keysdata[0].join |+}，g； prices.removeChildpriceTempl； var selectedDest=null， selectedNights=0； forlet i=0；i
你能更准确地解释一下你的问题吗？因为现在我无法理解期望的结果应该是什么样子。我甚至不明白价值观是什么意思，我只懂几个词，因为我不是希腊人。也许你的意思是当点击某个按钮时如何从输入中获取日期？我在你的html中没有看到任何值…而且，既然你是用英语提问的，如果你的示例代码也是用英语的，那就好了。如果您需要帮助，请帮助我们理解您的意思……为了方便起见，我做了一些英语翻译的改动。为了进一步解释，我的意思是：用户从数据列表中选择一个选项，在我的示例中，这些选项是一些岛屿，用户还可以选择他希望在岛上住多少晚。每个岛屿都有自己的价格。我想做的是计算每晚的成本岛价格*入住的夜数，我的问题是如何保存用户选择以及如何保存变量以便进行计算。我希望我能被理解一点。谢谢你的热情欢迎来到Stack Overflow！您应该编辑问题，将您的评论移到问题本身。你的评论与你的期望更为清晰。你会有更好的运气得到答案。另外，你应该在问题中添加JavaScript，因为调试实际问题是必要的。我没有用js-wet编写任何东西，我不知道从哪里开始，以及如何实际保存变量，以便计算它们。