我试图从两个下拉菜单和一个文本输入中乘以 3 个数字。我知道这听起来很简单，但我已经尝试了很多小时了！当我尝试在 Chrome 中询问开发人员工具时，它会正确返回值（在 console.log 中我写的是：kroner.value）。但我不能在“var total”行中乘以它。我必须改变某些东西的顺序吗？或者甚至重新考虑整个代码？:-)非常感谢！//Herfra starter udregningen af drikkepengefunction udregn() { var kroner = document.getElementById("kroner").value; var land = document.getElementById("land").value; var kvalitet = document.getElementById("kvalitet").value; //Hvis alle oplysninger ikke tastes if (kroner === "" || land === 0 || kvalitet === 0) { alert("Udfyld venligst alle felter."); return; } //Selve udregningen var total = kroner * land * kvalitet; //round to two decimal places total = Math.round(total * 100) / 100; //next line allows us to always have two digits after decimal point total = total.toFixed(2); //Vis drikkepengene document.getElementById("tipbelob").style.display = "block"; document.getElementById("tip").innerHTML = total;}document.getElementById("regnformig").onclick = function () { udregn();};body { background-color: #a2afba;}#drikkepengeboks { width: 400px; height: 600px; background-color: #e8eaeb; text-align: center; padding: 25px; margin: auto; margin-top: 70px; border-radius: 30px; box-shadow: black 0 20px 20px 0;}h1 { text-decoration: underline;}p { margin: auto; width: 350px; text-align: center; margin-bottom: 65px;}select { border: gold 1px solid; width: 50%;}input { border: gold 1px solid; width: 50%;}h3 { display: flex; margin: auto; align-items: center; justify-content: center; font-size: 20px; margin-top: 40px; width: 300px; height: 45px; border-radius: 25px; background-color: #a2afba; border: gold 2px solid; box-shadow: black 0 4px 4px 0;}#tipbelob { margin-top: 50px; font-size: 30px; font-weight: bolder;}
2 回答
慕妹3146593
TA贡献1820条经验 获得超9个赞
用 HTML 中的一个点替换逗号，它就可以工作了。
//Herfra starter udregningen af drikkepenge
function udregn() {
var kroner = document.getElementById("kroner").value;
var land = document.getElementById("land").value;
var kvalitet = document.getElementById("kvalitet").value;
//Hvis alle oplysninger ikke tastes
if (kroner === "" || land === 0 || kvalitet === 0) {
alert("Udfyld venligst alle felter.");
return;
}
//Selve udregningen
var total = kroner * land * kvalitet;
//round to two decimal places
total = Math.round(total * 100) / 100;
//next line allows us to always have two digits after decimal point
total = total.toFixed(2);
//Vis drikkepengene
document.getElementById("tipbelob").style.display = "block";
document.getElementById("tip").innerHTML = total;
}
document.getElementById("regnformig").onclick = function () {
udregn();
};
body {
background-color: #a2afba;
}
#drikkepengeboks {
width: 400px;
height: 600px;
background-color: #e8eaeb;
text-align: center;
padding: 25px;
margin: auto;
margin-top: 70px;
border-radius: 30px;
box-shadow: black 0 20px 20px 0;
}
h1 {
text-decoration: underline;
}
p {
margin: auto;
width: 350px;
text-align: center;
margin-bottom: 65px;
}
select {
border: gold 1px solid;
width: 50%;
}
input {
border: gold 1px solid;
width: 50%;
}
h3 {
display: flex;
margin: auto;
align-items: center;
justify-content: center;
font-size: 20px;
margin-top: 40px;
width: 300px;
height: 45px;
border-radius: 25px;
background-color: #a2afba;
border: gold 2px solid;
box-shadow: black 0 4px 4px 0;
}
#tipbelob {
margin-top: 50px;
font-size: 30px;
font-weight: bolder;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drikkepengeudregner</title>
</head>
<body>
<div id="drikkepengeboks">
<h1>Drikkepengeudregner</h1>
<p>Få hjælp til at udregne, hvor mange drikkepenge du skal give.
Udfyld nedenstående og se beløbet.
<h2>Hvad lyder regningen på?</h2>
<input id="kroner" type="number" placeholder="Beløbet i kr.">
<h2>Hvor befinder du dig?</h2>
<select id="land">
<option disabled selected value="0">-- Vælg venligst et land --</option>
<option value="0.15">Danmark</option>
<option value="0.05">Gran Canaria</option>
<option value="0.10">Kuching</option>
</select>
<h2>Hvor god var mad og service?</h2>
<select id="kvalitet">
<option disabled selected value="0">-- Vælg venligst din vurdering --</option>
<option value="1.1">Rigtig god</option>
<option value="1">Godkendt</option>
<option value="0.9">Under forventning</option>
</select>
<h3 id="regnformig">Vis mig beløbet!</h3>
<div id="tipbelob">
kr. <span id="tip">0.00</span>
</div>
</div>
</body>
</html>
波斯汪
TA贡献1811条经验 获得超4个赞
总数是NaN因为乘法是对无效数字执行的。这些值应该有一个小数点分隔符，而不是逗号。
固定片段：
//Herfra starter udregningen af drikkepenge
function udregn() {
var kroner = document.getElementById("kroner").value;
var land = document.getElementById("land").value;
var kvalitet = document.getElementById("kvalitet").value;
//Hvis alle oplysninger ikke tastes
if (kroner === "" || land === 0 || kvalitet === 0) {
alert("Udfyld venligst alle felter.");
return;
}
//Selve udregningen
var total = kroner * land * kvalitet;
// check value of total in the console
// console.log('total', total)
//round to two decimal places
total = Math.round(total * 100) / 100;
//next line allows us to always have two digits after decimal point
total = total.toFixed(2);
//Vis drikkepengene
document.getElementById("tipbelob").style.display = "block";
document.getElementById("tip").innerHTML = total;
}
document.getElementById("regnformig").onclick = function () {
udregn();
};
body {
background-color: #a2afba;
}
#drikkepengeboks {
width: 400px;
height: 600px;
background-color: #e8eaeb;
text-align: center;
padding: 25px;
margin: auto;
margin-top: 70px;
border-radius: 30px;
box-shadow: black 0 20px 20px 0;
}
h1 {
text-decoration: underline;
}
p {
margin: auto;
width: 350px;
text-align: center;
margin-bottom: 65px;
}
select {
border: gold 1px solid;
width: 50%;
}
input {
border: gold 1px solid;
width: 50%;
}
h3 {
display: flex;
margin: auto;
align-items: center;
justify-content: center;
font-size: 20px;
margin-top: 40px;
width: 300px;
height: 45px;
border-radius: 25px;
background-color: #a2afba;
border: gold 2px solid;
box-shadow: black 0 4px 4px 0;
}
#tipbelob {
margin-top: 50px;
font-size: 30px;
font-weight: bolder;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drikkepengeudregner</title>
</head>
<body>
<div id="drikkepengeboks">
<h1>Drikkepengeudregner</h1>
<p>Få hjælp til at udregne, hvor mange drikkepenge du skal give.
Udfyld nedenstående og se beløbet.
<h2>Hvad lyder regningen på?</h2>
<input id="kroner" type="number" placeholder="Beløbet i kr.">
<h2>Hvor befinder du dig?</h2>
<select id="land">
<option disabled selected value="0">-- Vælg venligst et land --</option>
<option value="0.15">Danmark</option>
<option value="0.05">Gran Canaria</option>
<option value="0.10">Kuching</option>
</select>
<h2>Hvor god var mad og service?</h2>
<select id="kvalitet">
<option disabled selected value="0">-- Vælg venligst din vurdering --</option>
<option value="1.1">Rigtig god</option>
<option value="1">Godkendt</option>
<option value="0.9">Under forventning</option>
</select>
<h3 id="regnformig">Vis mig beløbet!</h3>
<div id="tipbelob">
kr. <span id="tip">0.00</span>
</div>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消