javascript - 函数没有获取值？
问题描述
我正在制作一个小费计算器，它似乎没有得到文本输入字段的值。没有记录控制台错误。我认为这可能是函数和变量范围的放置，但我不知道。任何帮助都会很可爱。请全屏运行该代码段，因为它目前看起来很糟糕。
// Variables
var tipAmount = document.getElementById("tipAmount").value;
var billAmount = document.getElementById("bill").value;
var numPeople = document.getElementById("people").value;
var button = document.querySelector("button");
var output = document.querySelector("span");
// Value checks
getTip = (cost) => {
if (billAmount == " " || tipAmount == 0) {
alert("Please enter values");
}
if (numPeople == " " || numPeople <= 1) {
numPeople = 1;
}
var cost = billAmount * (tipAmount / 100) * numPeople;
console.log(cost);
//Display the tip
document.getElementById("totalTip").style.display = "block";
document.getElementById("tip").innerHTML = cost;
}
// Calculating Tip on button click
button.onclick = () => {
getTip();
};
// To hide total tip span on load
document.getElementById("totalTip").style.display = "none";
document.getElementById("each").style.display = "none";body {
display: grid;
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
}
#container {
border: 1px solid black;
border-radius: 20px;
height: 40em;
margin: 5vh;
width: 20em;
}
li {
margin: 10px;
padding: 45px;
}
input[type="text"] {
height: 4vh;
font-size: 14px;
width: 150px;
}
select {
font-size: 25px;
}
button {
border-radius: 15px;
display: inline-block;
height: 4vh;
font-size: 17px;
width: 150px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Tip Calculator</title>
</head>
<body>
<h1>Tip Calculator</h1>
<div id="container">
<div id="calc">
<form>
<ul>
<li>
<label for="bill">How much was the bill?</label>
$
<input type="text" id="bill" placeholder="Bill Amount" />
</li>
<li>
<label for="tipAmount">How was the Service?</label>
<select id="tipAmount">
<option disabled selected value="0">
-- Choose an Option --
</option>
<option value="5">5% - Terrible</option>
<option value="10">10% - Bad</option>
<option value="15">15% - Ok</option>
<option value="20">20% - Good</option>
<option value="30">30% - Outstanding</option>
</select>
</li>
<li>
<label for="people">How many people?</label>
<input
type="text"
id="people"
placeholder="Enter Number of People"
/>
</li>
<li><button type="button" value="Calculate" />Calculate</li>
<div id="totalTip">
<sup>$</sup><span id="tip">0.00</span>
<small id="each">each</small>
</div>
</ul>
</form>
</div>
</div>
<script src="app.js"></script>
</body>
</html>