是否可以像我下面开始做的那样，在服务变量下的tip((函数中分配不同服务级别的值？我知道另一种可能也是首选的解决方案是将这些值分配给选项值，但我想知道是否也可以使用if语句。
function tip() {
var tipp = document.getElementById("bill").value;
var split = document.getElementById("billsplit").value;
var service = document.getElementById("service").value; //good=.3,ok=.25,bad=.2
if service = "Good" {
document.getElementById = ("service").innerHTML = .3;
}
document.getElementById("result").innerHTML = (tipp * service) / split;
}Enter Total Bill<br><br>
<input type="number" name="bill" id="bill">
<br><br> How was the Service <br><br>
<select id="service">
<option value="Good">Good</option>
<option value="Bad">Bad</option>
<option value="ok">ok</option>
</select>
<br><br> How many People are sharing Bill?<br><br>
<input type="number" name="billsplit" id="billsplit">
<button type="button" onclick="tip()">CALCULATE</button>
<br><br>Result : <span id="result"></span>您可以使用对象将值映射到服务级别。注意：在对输入值进行任何计算之前，您需要将其从字符串强制转换为数字。
// cache all the needed elements
const billTotal = document.querySelector('#bill');
const splitValue = document.querySelector('#split');
const service = document.querySelector('#service');
const result = document.querySelector('#result');
const button = document.querySelector('button');
// use a event listener instead of an inline function
button.addEventListener('click', calculate, false);
// map the values to service terms
const serviceMap = {
good: 0.3,
ok: 0.25,
bad: 0.2
}
function calculate() {
// get the input values
const bill = Number(billTotal.value);
const split = Number(splitValue.value);
// get the selected service grade
const serviceGrade = service.options[service.selectedIndex].value;
// get the service value from the object using the grade as the key
const serviceValue = serviceMap[serviceGrade];
// perform the calculation
const total = ((bill * serviceValue) / split).toFixed(2);
// output the result with `textContent`
result.textContent = `Total ${total} ((${bill} * ${serviceValue}) / ${split})`;
}input, button, div {
display: block;
margin-bottom: 0.5em;
}Bill <input id="bill" type="number" />
Split <input id="split" type="number" />
Service <select id="service">
<option value="good">Good</option>
<option value="ok">Bad</option>
<option value="bad">ok</option>
</select>
<button type="calculate">Calculate</button>
<div id="result"></div>您可以使用关联数组。您的tip()函数可能是这样的。
function tip() {
let service_values = {
"Good": 0.3,
"ok": 0.25,
"Bad": 0.2
};
var tipp = document.getElementById("bill").value;
var split = document.getElementById("billsplit").value;
var service_label = document.getElementById("service").value; //good=.3,ok=.25,bad=.2
let service = service_values[service_label];
document.getElementById("result").innerHTML= (tipp*service)/split;
}
编辑：检查下面的代码片段。
<!DOCTYPE html>
<html>
<h3> Tip Calculator <h3>
<script>
function tip() {
let service_values = {
"Good": 0.3,
"ok": 0.25,
"Bad": 0.2
};
var tipp = document.getElementById("bill").value;
var split = document.getElementById("billsplit").value;
var service_label = document.getElementById("service").value; //good=.3,ok=.25,bad=.2
let service = service_values[service_label];
document.getElementById("result").innerHTML= (tipp*service)/split;
}
</script>
<body>
Enter Total Bill<br><br>
<input type="number" name="bill" id="bill" value="10">
<br><br>
How was the Service <br><br>
<select id="service">
<option value ="Good">Good</option>
<option value ="Bad">Bad</option>
<option value ="ok">ok</option>
</select>
<br><br>
How many People are sharing Bill?<br><br>
<input type="number" name="billsplit" id="billsplit" value="1">
<button type="button" onclick="tip()">CALCULATE</button>
<br><br>Result : <span id="result"></span>
</body>
</html>