'Cannot change HTML element using document.getElementById().innerHTML [duplicate]

Here is my code:

function renderMinum() {
  document.getElementById("targetMinum").innerHTML = "string";
}
renderMinum();
<section>
<div class="box-container text-center">
    <h1>Drink Tracker</h1>
    <br>
        <div class="container">
            <div class="row">
                <div class="col">
                    <h5>Kebutuhan minum hari ini</h5>
                    <h3 id="targetMinum" class="box-target">0 <span>ml</span></h3>
                </div>
                <div class="col">
                    <h5>Progres minum hari ini</h5>
                    <h3 id="progressMinum" class="box-target">0 <span>ml</span></h3>
                </div>
            </div>
        </div>
        <!-- <input type="button" onclick="" value="Sudah minum" class="btn btn-success"> -->
    </div>
</section>

I want to change the value with id="targetMinum" with a string. However the value inside of the HTML is not changing, and when I try to console.log() the innerHTML, it is also not showing in the console.

I am planning to change the value of "0 ml"

javascripthtmldom


Solution 1:[1]

So, after i tried adding a button which calls the function renderMinum() i noticed it actually worked, so my idea is that probably the function is called before the html page loads or something like that, so try adding an onload in the Section tag which calls the renderMinum() function

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 zAlMo

Related Questions