Currently, I am attempting to gather input from the user in the form of two numbers. Upon clicking a button that executes a JavaScript function, the goal is to display the result on the webpage. However, upon running the code, it returns
NaN
I'm struggling to figure out how to resolve this issue. Is there a way for me to incorporate a tip display on the webpage?
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<title> Custom Tip Calculator by Jonah </title>
<div id = "links">
<script src = "functions.js"></script>
<link type = "text/css" rel = stylesheet href = "design.css">
<link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet">
</div>
</head>
<body>
<div id = "cool_main">
<h1 id = "title"> Custom Tip Calculator </h1>
<h2 id = "developer"> Created by Jonah Johnson </h2>
</div>
<p id = "main_para"><b> Enter the cost of the meal and the tax percentage, then click OK!</b></p>
<form id = "meal_cost">
Input Total Meal Cost:<br>
<input type="text" id = "meal__cost" name="mealcost" /><br>
</form>
<form id = "tax_percent">
Input Tax Rate (in percent):<br>
<input type ="text" id = "tax_per" name="taxpercent" ><br>
</form>
<h4 id = "per"> % </h4>
<button id = "getTip" onclick = "calculateTip()"> OK </button>
</body>
</html>
This is my JavaScript:
var taxValue = document.getElementById("tax_per").value;
var mealCost = document.getElementById("meal__cost").value;
function calculateTip() {
document.write(taxValue * mealCost);
}
This is my CSS:
div {
position: relative;
left: -490px;
}
#title {
font-family: "Bitter", sans-serif;
border: 0px solid black;
width: 225px;
padding: 10px 24px;
background-color: #dbdbcb;
border-radius: 4px;
box-shadow: 10px 10px 5px #888888;
position: relative;
left: 531px;
font-size: 40px;
text-align: center;
}
#developer {
font-family: "Bitter", sans-serif;
border: 0px solid black;
width: 300px;
padding : 5px 10px;
text-align: center;
background-color: #dbdbcb;
border-radius: 10px 10px;
box-shadow: 10px 10px 5px #888888;
position: relative;
left: 510px;
}
#main_para {
border: 1px solid black;
width: 415px;
position: relative;
left: 0px;
font-family: "Bitter", sans-serif;
padding: 4px 10px;
background-color: #dbdbcb;
border-radius: 10px 10px;
}
#meal_cost {
border: 0px solid black;
width: 400px;
height: 100px;
padding: 10px 10px;
text-align: center;
font-family: "Bitter", sans-serif;
background-color: #dbdbcb;
box-shadow: 10px 10px 5px #888888;
position: relative;
left: 550px;
bottom: 200px;
font-size: 40px;
}
#tax_percent {
border: 0px solid black;
width: 400px;
padding: 10px 10px;
text-align: center;
font-family: "Bitter", sans-serif;
font-size: 40px;
background-color: #dbdbcb;
position: relative;
box-shadow: 10px 10px 5px #888888;
left: 550px;
bottom: 170px;
}
#per {
position: relative;
left: 856px;
bottom: 226px;
width: 10px;
font-family: "Bitter", sans-serif;
}
If you have any advice or guidance, it would be greatly appreciated. Additionally, having the ability to customize the displayed value using CSS would be beneficial.