javascript 和 HTML 成本计算器 - 地毯的值(value) x 房间的大小

Question

我正在尝试为我 friend 的地毯业务网站创建一个成本计算器。

我不知道如何获取两个输入字段并将它们相乘以获得结果/成本。

我希望客户可以选择地毯类型 - 以及与之相关的每平方米成本

然后选择房间的大小。

结果将是每平方米成本 x 房间平方米。

到目前为止，我已经创建了这个恐怖节目，它适用于第一部分 - 每平方米的成本，而不是房间部分的乘法或大小。

`<select id="classSelect" onchange="aFunction()">
<option value="0">Choose Flooring Type</option>
<option value="1">Vinyl</option>
<option value="2">Thick Carpet</option>
<option value="3">Standard Carpet</option>
<option value="4">Class 4 Cost 4</option>
<option value="5">Class 5 Cost 5</option>
</select>

<select id="size" onchange="bFunction()">
<option value="0">Choose Size</option>
<option value="3">3 Meters Squared</option>
<option value="5">5 Meters Squared</option>
<option value="10">10 Meters Squared</option>
<option value="15">15 Meters Squared</option>
<option value="20">20 meters squared</option>
</select>


<div id="result"></div>
<script>
function aFunction(){
classCost = Number(document.getElementById("classSelect").value);
fee = 5;
if (classCost > 0){
    total = classCost + fee;
    document.getElementById("result").innerHTML = total;
}else{
    document.getElementById("result").innerHTML = ("Select Class");
}
}
</script>`

Answer 1

“我不知道如何获取两个输入字段并将它们相乘以获得结果/成本。”

这并不是您想要的完整实现，这只是一个很好的起点。在这里，我从两个输入中获取值，将它们相乘并将最终值写入 h1 标记(我没有添加任何对 NaN 等的检查，这只是一个开始为你):

function calculate() {
  var result = parseInt(document.getElementById('one').value) * parseInt(document.getElementById('two').value);
  document.getElementsByTagName('h1')[0].innerText = result;
}

<input id="one">
<input id="two">
<button onclick="calculate()">Calculate</button>
<h3>Result of multiplication: </h3>
<h1>0</h1>

更新

“有什么想法请告诉我这里缺少什么 - jsfiddle.net/v1ncjkpw”

您只是忘记更改函数名称并插入 h1 标记。由于某种原因，onchange 事件不会在 jsfiddle 上触发(对于 jsfiddle 来说没问题)，所以这里是包含更新代码的片段:

function calculate() {
  var result = parseInt(document.getElementById('classSelect').value) * parseInt(document.getElementById('size').value);
  document.getElementsByTagName('h1')[0].innerText = result;
}

<select id="classSelect" onchange="calculate()">
    <option value="0">Choose Flooring Type</option>
    <option value="1">Vinyl</option>
    <option value="2">Thick Carpet</option>
    <option value="3">Standard Carpet</option>
    <option value="4">Class 4 Cost 4</option>
    <option value="5">Class 5 Cost 5</option>
</select>

<select id="size" onchange="calculate()">
    <option value="0">Choose Size</option>
    <option value="3">3 Meters Squared</option>
    <option value="5">5 Meters Squared</option>
    <option value="10">10 Meters Squared</option>
    <option value="15">15 Meters Squared</option>
    <option value="20">20 meters squared</option>
</select>

<h1>0<h1>