-1

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"

NGAJISUBUH
  • 19
  • 1
  • https://stackoverflow.com/questions/807878/how-to-make-javascript-execute-after-page-load ? – Walfrat Apr 21 '22 at 10:23
  • I've copied your code into a runnable Stack Snippet. As you can see, it works. Please clarify what issue you're having. Is there any error in the console? If so, [this](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) is probably the problem. *"when I try to `console.log()` the `innerHTML`, it is also not showing in the console."* Where/how are you doing that? It's not in the question. – T.J. Crowder Apr 21 '22 at 10:25
  • It works? How did you try. I suppose you did not write your JS code in proper place. – KOMODO Apr 21 '22 at 10:27
  • Do you have idea why my web page does not have updated value? Although I have reassign the value using `document.getElementById("targetMinum").innerHTML = "string";` – NGAJISUBUH Apr 21 '22 at 10:31

1 Answers1

0

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

zAlMo
  • 1
  • 3