• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Need help with an error

embers02

New Coder
It says Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
How do i fix this?

HTML:
<HTML>
    <head>
        <title>Idle Miner</title>
      
        <style>
            .sectionLeft {
                float: left;
                width: 80%;
            }
            .sectionRight {
                float: right;
                width: 20%
            }
            .scoreContainer {
                background-color: rgb(238, 238, 238);
                width: 50%;
                padding: 10px;
                border-radius: 50px;
                font-size: 24px;
                font-weight: bold;
            }
          
            .clickerContainer img {
                position: relative;
                transition: all .2s ease-in-out;
            }
          
            .clickerContainer img:hover { transform: scale(1.10); }
            .clickerContainer img:active { transform: scale(0.99); }
          
            .shopButton {
                background-color: b5b5b5;
                transition: all .2s ease-in-out;
                border-radius: 10ps;
                width: 100%;
            }
          
            .shopButton:hover {
                background-color: c7c7c7;
                transition: all .2s ease-in-out;
            }
          
            .shopButton #image {
                width: 25%;
            }
          
            .shopButton img {
                height: 64px;
                width: 64px;
            }
          
            .shopButton #nameAndCost p {
                margin: 0px;
                width: 60%;
            }
          
            .shopButton #nameAndCost p:first-of-type {
                font-size: 24px;
            }
          
            .shopButton #amount {
            font
        </style>
    </head>
  
    <body>
        <div class="sectionLeft">
            <center>
                <div class="scoreContainer">
                    <span id="score">0</span> money<br>
                    <span id="scorepersecond">0</span> money per second
                </div>
                <br>
                <div class="clickerContainer">
                    <img src="images/rock.png" height="256px" width="256px" onclick="addToScore(clickingPower)">
                </div>
            </center>
        </div>
      
        <div class="sectionRight">
            <table class="shopButton" onclick="buyCoals()">
                <tr>
                    <td id="image"><img src="images/Coal.png"></td>
                    <td id="nameAndCost">
                        <p>Coal</p>
                        <p><span id="coalcost">32</span> money</p>
                    </td>
                    <td id="amount"><span id="coal">0</span></td>   
                </tr>
            </table>
        </div>
      
        <script>
            var score = 0;
            var clickingPower = 2;
          
            var coalCost = 32;
            var coals = 0;
            var ironCost = 128;
            var irons = 0;
          
            function buyCoals() {
                if (score >= coalCost) {
                    score = score - coalCost;
                    coals = coals + 1;
                    coalCost = Math.round(coalCost * 1.15);
                  
                    document.getElementById("score").innerHTML = score;
                    document.getElementById("coalcost").innerHTML = coalCost;
                    document.getElementById("coals").innerHTML = coals;
                    updateScorePerSecond();
                }
            }
          
            function buyIron() {
                if (score >= ironCost) {
                    score = score - ironCost;
                    irons = irons + 1;
                    Cost = Math.round(ironCost * 1.15);
                  
                    document.getElementById("score").innerHTML = score;
                    document.getElementById("ironcost").innerHTML = ironCost;
                    document.getElementById("irons").innerHTML = irons;
                    updateScorePerSecond();
                }
            }
          
            function addToScore(amount) {
                score = score + amount;
                document.getElementById("score").innerHTML = score;
            }
          
            function updateScorePerSecond() {
                scorePerSecond = coals + irons * 5;
                document.getElementById("scorepersecond").innerHTML = scorePerSecond;
            }
          
            setInterval(function() {
                score = score + coals;
                score = score + irons * 5    ;
                document.getElementById("score").innerHTML = score;
              
                document.title = score + " money - Idle Miner"
            }, 1000) ; // 1000ms = 1 second
        </script>   
    </head>
</HTML>
 
Last edited by a moderator:

Mutiny

Active Coder
Do you get a line number with your error? What code is on the line number in your editor for that error? Can you paste your code into the code editor here instead of just including on the post?

The error indicates that you're trying to set a property on an element that doesn't exist, so ensure that the thing you're trying to modify exists. Likely you have an incorrect or nonexistent ID specified in one of your innerHTML calls.
 

Malcolm

Administrator
Administrator
Staff Team
Hey there, so looking at the code you provided, I can see that you have multiple </head> tags, every HTML document should only contain 1 pair of <head></head>. And in addition to that, in your <style> near the bottom you have an incomplete selector and property:
Code:
.shopButton #amount {
            font
 
Last edited:

OldMan

Coder
I don't want to get on the wrong side of the owner and/or admin but
every HTML document should only contain 1 pair of <head></head> with your <script> inside of it.
Is wrong JavaScript belongs after the HTML code - After the </body> tag and before the </html> tag so the html is rendered before JS starts to modify the DOM.

Your CSS ends like this:
Code:
.shopButton #amount {
     font
</style>
fix this.

IN the JS
Code:
function buyCoals() {
    if (score >= coalCost) {
        score = score - coalCost;
        coals = coals + 1;
        coalCost = Math.round(coalCost * 1.15);
        document.getElementById("score").innerHTML = score;
        document.getElementById("coalcost").innerHTML = coalCost;
        document.getElementById("coals").innerHTML = coals;
        updateScorePerSecond();
    }
}
The IF never executes because you define
var score = 0;
and
var coalCost = 32;
 

Top