Buttons and page numbers not showing properly [SOLVED]

Hi there


I’m trying to get the text in the buttons black, and the page and zoom level to show. However, it’s not working.

You can find the code here: https://github.com/IF-Apps/IF-Charts/blob/master/KPSP/KPSP_dep.html

The area in question is this:

                    <div id="nav_buttons">
                        <button id="prev">Previous</button>
                        <button id="next">Next</button>
                        <button id="zoomin">Zoom In</button>
                        <button id="zoomout">Zoom Out</button>
                        &nbsp; &nbsp;
                        <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
                        <span>   Zoom Level: <span id="zoom_lvl"></span></span>

As you can see, the buttons should be black, and the number section is not showing.

<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
                            <span>   Zoom Level: <span id="zoom_lvl"></span></span>

This bit does not even show!

Thanks in advance!

css/styles.css defines the color property to be white, and all children to body that don’t have color set inherit body's color.

In general, I foresee many problems with your project. It’s unmaintainable, and that’s going to cause you more grief in the future. You’ve got CSS scattered around the project and lots of HTML pages that seem to duplicate the same structure. I’m not even sure what’s going on with the JavaScript. It seems like you’ve got a really cool project of passion, but you haven’t done much of the freeCodeCamp curriculum. I really think could benefit from more modern web development paradigms like templates or a front-end library, which you could learn by going through the curriculum. At the very least, you should clean up the code before moving on. It will prevent future bugs.

1 Like

Okay, thank you very much!