Question

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

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

我喜欢它，以便客户选择地毯类型 - 每平方米成本与之相关

然后选择房间的大小。

结果将是cost per m2 x m2 of the room。

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

`<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

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

它不是你想要的全面实现，它只是一个很好的起点。在这里，我从两个输入中获取值，将它们相乘并将最终值写入h1标记（我没有为NaN添加任何检查，依此类推，它只是一个启动器对你而言）：

＆＃13;

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

＆＃13;

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

＆＃13;

更新

＆＃34;我想知道我在这里失踪了什么 - jsfiddle.net/v1ncjkpw＆＃34;

您忘记更改功能名称并插入h1标记。 onchange事件由于某种原因没有触发jsfiddle（对于jsfiddle来说没问题），所以这里是带有更新代码的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

正如我从你们所了解的那样，问题是你想要多个选定的值，例如（class + 5）* size

＆＃13;

function calculate(){
	var classCost = Number(document.getElementById("classSelect").value);
  if (classCost === 0){
  	document.getElementById("result").innerHTML = "Select Class";
    return; 
  }
  
  var roomSize = Number(document.getElementById("size").value);
  if (roomSize === 0){
  	document.getElementById("result").innerHTML = "Select Size";
    return; 
  }
  
  var total = (classCost + 5) * roomSize;
  
  document.getElementById("result").innerHTML = "Total Cost is " + total;
	
}

＆＃13;

<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>
<div id="result"></div>

＆＃13;

请参阅fiddle

上的解决方案

javascript＆amp; HTML成本计算器 - 地毯的价值x房间的大小

2 个答案:

更新