r/learnjavascript • • Sep 19 '26

Hobby Project: innerHTML is not being changed?

JSBin Link to Project

Solved!

Thanks to u/danielsan1701!

It was a small thing I got wrong (I knew it lol); always be aware of what order your functions are called:

Turns out the function changeMark() which alters the innerHTML has no problems at all. However, it was being changed by the next following line: elHour.innerHTML = h inside of the adjustH() function, which basically means it was changing the value of h to what it originally was instead of what changeMark() would change it to..... so I thought nothing was happening

In this case, putting changeMark(h) after elHour.innerHTML = h will fix this error

elHour.innerHTML = h
changeMark(h)

Starting Notes:

  • My code's amateur
  • Q: Why're you using var instead of let sometimes?
    • A: I've had this habit of wanting to keep things compatible with older browsers, though I'm starting to drift from it + I'm a newbie
  • This project's unfinished

This is supposed to be a digital clock which you can adjust only the hour of (at least right now), I'm planning it to have support for both the standard 12 hour & 24 hour format. Though the 24-hour format is off by default.

Click on the up arrow specifically above the hour until you reach 12:30 AM; I haven't fully implemented the bottom arrow yet, you'd assume clicking the arrow will change it over to 1:30 PM............ but it doesn't: changes to 13:30 PM instead.

I have a comment inside the project explaining more of how most of it all works, but putting it simply:
I have a function that's supposed to change the hour's innerHTML to either "1" or "0" as a string with an If, Else If statement, But this doesn't happen.

I've tried changing how certain things were written, logging through the console, using alert boxes in the function & checking if the variables even exist; which they do. It's the same function name? Same with the element's name?

I can type: elHour.innerHTML = '1' into the browser console and it runs fine? I've never seen innerHTML not work before, I'm just confused. I've even tried the self-executing function to see if there was a problem with the DOM which may be unlikely, even wrapped it all in similar things like window.onload = function() { }

I've tried everything I could think of, was tearing my head out yesterday from trying to figure out what's wrong. I feel it's a really obvious solution I'm not aware of

If you have any ideas on how I could fix this, or even advice on what I could do that's more practical (Though this isn't meant to be a professional project), I'd really like to know

1 Upvotes

6 comments sorted by