使用 Javascript 从 json 计算每日费率的表格

Question

我想从 json 读取价格，具体取决于房间、季节和晚数。

这是使用的 html。 3 个表单输入中的每一个当前都会触发一个警报，显示所选的值。

<!DOCTYPE html>
<html>
<body>

<script src="showprice.js"></script>
<h3>Daily Rate Calculator</h3>

<form>
<label for="aroom">Choose Room:</label>
<div id="room"></div><br>
<label for="aseason">Choose Season:</label>
<div id="season"></div>



<br>
  <label for="days">Number of days:</label>
  <select name="days" id="days" onchange=loadNumber(this.value)>
    <option value="-">-</option>
    <option value="0">1</option>
    <option value="1">2</option>
    <option value="2">3</option>
    <option value="3">4</option>    
    <option value="4">5</option>
    <option value="5">6</option>
    <option value="6">7+</option>
  </select>
</form>

<br>
<div id="demo"></div>
</body>
</html>

到目前为止，这是 showprice.js：

var troom
var tseason
var tday

 async function start(){


        const response=await fetch("pricing.json")
        const data=await response.json()
        createRList(data.rooms)
       console.log (data.rooms)
        createSList(data.rooms.Spanish)
        //console.log (data.message.rooms.keys)
        createRate(data.message.troom.tseason[tday])
        console.log (data.message.troom.Entries(tseason)[tday])
      }
      start()

function createRList(rListic){
      document.getElementById("room").innerHTML=`
                    ${Object.keys(rListic).map(function(roomic){
                          return `<input onMouseUp="loadByRoom(this.value)" type="radio" id="${roomic}"
                          name="aroom" value="${roomic}">
                          <label for="${roomic}">${roomic}</label><br>`
                  }).join('')
                
}`
}

function createSList(sList){
  document.getElementById("season").innerHTML=`
                ${Object.keys(sList).map(function(seasonic){
                      return `<input  onClick="loadBySeason(this.value)" type="radio" id="${seasonic}"
                      name="aseason" value="${seasonic}">
                      <label for="${seasonic}">${seasonic}</label><br>`
              }).join('')
            
}`
}




function loadByRoom(roomic) {
 alert (roomic)
 troom=roomic
}
function loadBySeason(seasonic) {
  alert (seasonic)
 tseason=seasonic
 }
 function loadNumber(days) {
  alert (days)
  tday=days
 }

 function createRate(drate) {
  document.getElementById("demo").innerHTML=`Daily Rate: £${drate}`
 }

这是定价。json：


       { "rooms": {
              "Greek": {  "Peak":[200,190,180,170,160,150,140] ,"Mid":[190,180,170,160,150,140,130],"Off":[180,170,160,150,140,130,120]},
              "Spanish": {  "Peak":[220,210,200,190,180,170,160] ,"Mid":[205,195,185,175,165,155,145],"Off":[200,190,180,170,160,150,140]},
              "Italian": {  "Peak":[210,200,190,180,170,160,150] ,"Mid":[200,190,180,170,160,150,140],"Off":[190,180,170,160,150,140,130]}
                }
        }

我希望我离得不远，因为我可以控制所有数据，但我不知道如何显示特定速率，即形成 createRate fn 的参数以产生 drate。 谢谢你。

Answer 1

drate 不是 HTML 中元素的 id，也不是由 JavaScript (DOM) 动态创建的。 我认为首先，map 这个 id 通过 HTML 或 DOM 到所需的元素。

使用 Javascript 从 json 计算每日费率的表格

问题描述

1 个解决方案

解决方案1
0 2022-03-24 01:10:59

使用 Javascript 从 json 计算每日费率的表格

问题描述

1 个解决方案

解决方案1 0 2022-03-24 01:10:59

解决方案1
0 2022-03-24 01:10:59