Can not set property to null but my function is defined-CodePudding

i dont really know how to explain this but i keep getting the eror message "Cannot set properties of null" im trying to change the innerhtml to the output text. of the output i have four functions my button calls but it immediately stops at the first function. the function has worked before but it suddenly stopped.

how do i fix this?

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 >
        <h1>CALculator</h1>
        <sub>dontadd any commas or dots btw babe</sub>
        <p>calories in 100g</p>
        <input id="caloriesinput" type="number"></input>
        <p>fat in 100g</p>
        <input id="fatinput" type="number"></input>
        <p>saturated fat in 100g</p>
        <input id="saturatedFatinput" type="number"></input>
        <p>salt in 100g</p>
        <input id="saltinput" type="number"></input>
        <p>carbohydrates in 100g</p>
        <input id="carbohydratesinput" type="number"></input>
        <p>sugars in 100g</p>
        <input id="sugarsinput" type="number"></input>
        <hr>
        <p>how many grams(or ml) is the portion?</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 >....</span>
        <span >....</span>
        <span >....</span>
        <span >....</span>
        <span >....</span>
        <span >....</span>          
        </div>
        
    </div>
</body>
</html>

CodePudding user response：

Try what Bharat's commented. Alternatively you can try this:

window.onload = () => {
    // your code here
}

CodePudding user response：

@Keith i used id's because every singel span needed a different output.

You can use ID's, or classes, the point I was making your using classes for your output ...., and then you try to get a reference to the Element by using an ID., but it doesn't have an ID.

Either use a query selector, eg. document.querySelector('.output1'), or change you outputs to use an Id -> ....

Below is your snippet using the querySelector option.

has worked before but it suddenly stopped

No, something changed, it would not have suddenly stopped, unless you changed some code. I've a gut feeling you changed .... into ...., but forgot you did it..

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.querySelector(".output1").innerHTML = ("calories:", calories);
    document.querySelector(".output2").innerHTML = ("fat:", fat);
    document.querySelector(".output3").innerHTML = ("saturated fat:", saturatedFat);
    document.querySelector(".output4").innerHTML = ("salt:", salt);
    document.querySelector(".output5").innerHTML = ("carbohydrates", carbohydrates);
    document.querySelector(".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 >
        <h1>CALculator</h1>
        <sub>dontadd any commas or dots btw babe</sub>
        <p>calories in 100g</p>
        <input id="caloriesinput" type="number"></input>
        <p>fat in 100g</p>
        <input id="fatinput" type="number"></input>
        <p>saturated fat in 100g</p>
        <input id="saturatedFatinput" type="number"></input>
        <p>salt in 100g</p>
        <input id="saltinput" type="number"></input>
        <p>carbohydrates in 100g</p>
        <input id="carbohydratesinput" type="number"></input>
        <p>sugars in 100g</p>
        <input id="sugarsinput" type="number"></input>
        <hr>
        <p>how many grams(or ml) is the portion?</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 >....</span>
        <span >....</span>
        <span >....</span>
        <span >....</span>
        <span >....</span>
        <span >....</span>          
        </div>
        
    </div>
</body>
</html>