使用HTML和Javascript制作混凝土供應計算器-取____m3和選擇選項(mpa)的值來給出總價-有解無憂

這是我第一次在 Stack Overflow 上提問，如果我有什么不對的地方，我深表歉意。我目前正在為一家混凝土公司構建一個網路計算器。以下是輸入的詳細資訊：有一個包含以下輸入的表格：輸入 1：立方米 (m3) 輸入 2：強度輸入 1 的值介于 0.1 m3 和 3.2 m3 之間。3.2 立方米是他們的卡車可以承載的最大重量。輸入 2 是一個選擇，具有三個選項 = 20MPa、25MPa、32MPa。困難的部分在這里：根據選擇的強度，有一個單獨的定價表。例如：0.1 立方米的成本： 20MPa = 230 美元 25MPa = 250 美元 32MPa = 280 美元每個清單的價格以每 0.1 的不同數量和每張表的不同費率遞增。我為每個強度表撰寫了一些 if/else 函式，它檢查值范圍并回傳相應的價格。我已經啟動了另一個函式來計算值，但我不知道如何將 if else 函式集成到這個計算中。我需要計算器來讀取 m3（例如 1.4）并讀取所選的強度選項，然后在該表中找到該 m3 數量的正確價格。抱歉，如果我的解釋寫得不好，我有點迷茫，希望得到一些幫助。

我試圖通過使用所選選擇選項的值創建變數來定義選項。然后我嘗試將 m3 量強度變數的結果插入計算器結果框中。我的下一步是以某種方式將我的 if else 函式插入到這個計算器函式中，但我不知道將它放在哪里以及使用什么語法。我包含了用于計算器的 HTML、用于計算器函式的 JavaScript 以及用于價目表的 if else 函式。感謝幫助 Web Dev 學生 :)

      <!-- My web calculator HTML -->
      <section class="price-calculator">
        <h1>Price Calculator - 20 MPa</h1>
        <p>Cubic Meters (m3)</p>
        <input id="cubic-amount" placeholder="3" /><br />
        <p>Strength</p>
        <select name="mpa" id="mpa">
          <option id="20" value="">20 (MPa)</option>
          <option id="25" value="25">25 (MPa)</option>
          <option id="32" value="32">32 (MPa)</option>
        </select>
        <button onclick="calculatePrice()">calculate</button>
        <p>Price ($AUD)</p>
        <div id="price-result"></div>
      </section>

// Price calculator

function calculatePrice() {
  let amount = document.getElementById("cubic-amount").value.replace(",", ".");
  amount = amount.replace(/,/g, ".");
  amount = parseFloat(amount);

  let mpa20 = document.getElementById("20").value.replace(",", ".");
  mpa20 = mpa20.replace(/,/g, ".");
  mpa20 = parseFloat(mpa20);

  let mpa25 = document.getElementById("25").value.replace(",", ".");
  mpa25 = mpa25.replace(/,/g, ".");
  mpa25 = parseFloat(mpa25);

  let mpa32 = document.getElementById("32").value.replace(",", ".");
  mpa32 = mpa32.replace(/,/g, ".");
  mpa32 = parseFloat(mpa32);

  let price = amount   mpa20;
  document.getElementById("price-result").innerHTML = price.toFixed(2);
}

// Table for m3 ranges - 20 MPa Strength

function ifElse20(val) {
  let answer = "";
  // Start of if else chain
  // 0.1
  if (val >= 0.1 && val <= 0.19) {
    return "$230";
    // 0.2
  } else if (val >= 0.2 && val <= 0.29) {
    return "$250";
    // 0.3
  } else if (val >= 0.3 && val <= 0.39) {
    return "$270";
    // 0.4
  } else if (val >= 0.4 && val <= 0.49) {
    return "$290";
    // 0.5
  } else if (val >= 0.5 && val <= 0.59) {
    return "$310";
    // 0.6
  } else if (val >= 0.6 && val <= 0.69) {
    return "$330";
    // 0.7
  } else if (val >= 0.7 && val <= 0.79) {
    return "$350";
    // 0.8
  } else if (val >= 0.8 && val <= 0.89) {
    return "$380";
    // 0.9
  } else if (val >= 0.9 && val <= 0.99) {
    return "$410";
    // 1.0
  } else if (val >= 1.0 && val <= 1.09) {
    return "$430";
    // 1.1
  } else if (val >= 1.1 && val <= 1.19) {
    return "$470";
    // 1.2
  } else if (val >= 1.2 && val <= 1.29) {
    return "$520";
    // 1.3
  } else if (val >= 1.3 && val <= 1.39) {
    return "$570";
    // 1.4
  } else if (val >= 1.4 && val <= 1.49) {
    return "$610";
    // 1.5
  } else if (val >= 1.5 && val <= 1.59) {
    return "$650";
    // 1.6
  } else if (val >= 1.6 && val <= 1.69) {
    return "$690";
    // 1.7
  } else if (val >= 1.7 && val <= 1.79) {
    return "$740";
    // 1.8
  } else if (val >= 1.8 && val <= 1.89) {
    return "$780";
    // 1.9
  } else if (val >= 1.9 && val <= 1.99) {
    return "$820";
    // 2.0
  } else if (val >= 2.0 && val <= 2.09) {
    return "$860";
    // 2.1
  } else if (val >= 2.1 && val <= 2.19) {
    return "$900";
    // 2.2
  } else if (val >= 2.2 && val <= 2.29) {
    return "$940";
    // 2.3
  } else if (val >= 2.3 && val <= 2.39) {
    return "$980";
    // 2.4
  } else if (val >= 2.4 && val <= 2.49) {
    return "$1020";
    // 2.5
  } else if (val >= 2.5 && val <= 2.59) {
    return "$1060";
    // 2.6
  } else if (val >= 2.6 && val <= 2.69) {
    return "$1100";
    // 2.7
  } else if (val >= 2.7 && val <= 2.79) {
    return "$1150";
    // 2.8
  } else if (val >= 2.8 && val <= 2.89) {
    return "$1190";
    // 2.9
  } else if (val >= 2.9 && val <= 2.99) {
    return "$1240";
    // 3.0
  } else if (val >= 3.0 && val <= 3.09) {
    return "$1290";
    // 3.1
  } else if (val >= 3.1 && val <= 3.19) {
    return "$1330";
    // 3.2
  } else if (val >= 3.2 && val <= 3.29) {
    return "$1380";
    // End of chain
  }
  return answer;
}

uj5u.com熱心網友回復：

也許是那樣的……？

const
  f_priceCalculator = document.querySelector('#price-calculator')
, pricingArr = 
    [ { ref: 0.1, price:  230 }, { ref: 0.2, price:  250 }, { ref: 0.3, price:  270 }, { ref: 0.4, price:  290 }
    , { ref: 0.5, price:  310 }, { ref: 0.6, price:  330 }, { ref: 0.7, price:  350 }, { ref: 0.8, price:  380 }
    , { ref: 0.9, price:  410 }, { ref: 1.0, price:  430 }, { ref: 1.1, price:  470 }, { ref: 1.2, price:  520 }
    , { ref: 1.3, price:  570 }, { ref: 1.4, price:  610 }, { ref: 1.5, price:  650 }, { ref: 1.6, price:  690 }
    , { ref: 1.7, price:  740 }, { ref: 1.8, price:  780 }, { ref: 1.9, price:  820 }, { ref: 2.0, price:  860 }
    , { ref: 2.1, price:  900 }, { ref: 2.2, price:  940 }, { ref: 2.3, price:  980 }, { ref: 2.4, price: 1020 }
    , { ref: 2.5, price: 1060 }, { ref: 2.6, price: 1100 }, { ref: 2.7, price: 1150 }, { ref: 2.8, price: 1190 }
    , { ref: 2.9, price: 1240 }, { ref: 3.0, price: 1290 }, { ref: 3.1, price: 1330 }, { ref: 3.2, price: 1380 }
    ];

f_priceCalculator.onsubmit = e =>  // same as <button type="submit">  clicked
  {
  e.preventDefault();  // disable form submit (== page reload) 

  let
    cAmountRef = ((f_priceCalculator['cubic-amount'].valueAsNumber * 10) | 0) / 10
  , prx        = pricingArr.find( x => x.ref === cAmountRef )
    ;
  f_priceCalculator['price-result'].value = (prx.price   parseInt(f_priceCalculator.mpa.value)).toFixed(2)
  }
f_priceCalculator.oninput =_=>  // on any change...
  {
  f_priceCalculator['price-result'].value = ''
  }

body {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 16px;
  }
form {
  width   : fit-content;
  border  : 1px solid steelblue;
  margin  : 1rem;
  padding : .8rem 1rem;
  }
form h2 {
  margin  : .2rem 0 2rem 0;
  }
input[type=number] {
  font-size  : 1.2rem;
  width      : 7rem;
  text-align : center;
  }
label {
  display : block;
  margin  : .2rem 0 .8rem 0;
  }
button { 
  margin         : 1em 0;
  padding        : .3em 3em;
  }
output[name="price-result"] {
  float : right;
  }
output[name="price-result"]::before {
  content : '$ '
  }

<form id="price-calculator">
  <h2> Price Calculator - 20 MPa </h2>
  <label> Cubic Meters (m3) :
    <input name="cubic-amount" type="number" min="0.10" value="3.00" max="3.29" step="0.01" >
  </label>
<fieldset>
  <legend>Strength</legend>
  <label> 
    <input  name="mpa" type="radio" value="20" checked >
    20 (MPa)
  </label>
  <label> 
    <input  name="mpa" type="radio" value="25"  >
    25 (MPa)
  </label>
  <label> 
    <input  name="mpa" type="radio" value="32"  >
    32 (MPa)
  </label>
  </fieldset>
  <button type="submit"> Calculate </button>
  <fieldset>
    <legend>Price ($AUD)</legend>
    <output name="price-result"> </output>
  </fieldset>
</form>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/535699.html

標籤：javascript网页格式形式功能if语句

上一篇：如何在用戶使用CSS單擊它時創建影片電子郵件輸入

下一篇：我需要在HTML表單中創建一個下拉串列，列出接下來的四五個星期六