Having trouble understanding this error message "Cannot set properties of null." I'm attempting to update the innerHTML with the output text from four functions that my button triggers. However, it seems to be stopping at the first function now even though it was working fine before.
Any suggestions on how to resolve this issue?
var calories;
var fat;
var saturatedFat;
var salt;
var carbohydrates;
var sugars;
var portionsize;
function getstats() {
calories = parseFloat(document.getElementById("caloriesinput").value);
fat = parseFloat(document.getElementById("fatinput").value);
saturatedFat = parseFloat(document.getElementById("saturatedFatinput").value);
salt = parseFloat(document.getElementById("saltinput").value);
carbohydrates = parseFloat(document.getElementById("carbohydratesinput").value);
sugars = parseFloat(document.getElementById("sugarsinput").value);
portionsize = parseFloat(document.getElementById("portionSizeInput").value);
};
function calculatestats() {
calories = (calories/100);
fat = (fat/100);
saturatedFat = (saturatedFat/100);
salt = (salt/100);
carbohydrates = (carbohydrates/100);
sugars = (sugars/100);
};
function convertstats() {
calories = (calories*portionsize);
fat = (fat*portionsize);
saturatedFat = (saturatedFat*portionsize);
salt = (salt*portionsize);
carbohydrates = (carbohydrates*portionsize);
sugars = (sugars*portionsize);
}
function putstatsout(){
document.getElementById("output1").innerHTML = ("calories:", calories);
document.getElementById("output2").innerHTML = ("fat:", fat);
document.getElementById("output3").innerHTML = ("saturated fat:", saturatedFat);
document.getElementById("output4").innerHTML = ("salt:", salt);
document.getElementById("output5").innerHTML = ("carbohydrates", carbohydrates);
document.getElementById("output6").innerHTML = ("sugars:", sugars);
};<!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">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>CALculator</title>
<script src="script.js"></script>
</head>
<body>
<div class="content">
<h1>CALculator</h1>
<sub>Please avoid using commas or dots.</sub>
<p>Provide calorie intake for 100g:</p>
<input id="caloriesinput" type="number"></input>
<p>Enter fat content in 100g:</p>
<input id="fatinput" type="number"></input>
<p>Saturated fat in 100g:</p>
<input id="saturatedFatinput" type="number"></input>
<p>Salt amount in 100g:</p>
<input id="saltinput" type="number"></input>
<p>Carb content in 100g:</p>
<input id="carbohydratesinput" type="number"></input>
<p>Amount of sugars in 100g:</p>
<input id="sugarsinput" type="number"></input>
<hr>
<p>Enter portion size in grams (or ml):</p>
<input id="portionSizeInput" type="number"></input>
<br>
<br>
<button onclick="getstats();calculatestats();convertstats();putstatsout();">Calculate</button>
<h4>Results:</h4>
<div style="display: flex; flex-direction: column;">
<span class="output1">....</span>
<span class="output2">....</span>
<span class="output3">....</span>
<span class="output4">....</span>
<span class="output5">....</span>
<span class="output6">....</span>
</div>
</div>
</body>
</html>