IMG Info will not show

Code Help HTML/CSS/JS
1

I am developing a status website for OyoSoft Domains, and I am working on a maintenance banner which appears at the top of the page in yellow. Above the maintenance text, there should be a small image called “info.png”. But it isn’t showing. My code is in three separate files, status.js, layout.css, and index.html. Can someone please troubleshoot this? I honestly have no idea why it isn’t showing.

https://replit.com/@OSoft/Status?v=1

1 Like
2

I’m not a very good JavaScript developer, but it seems like you might be overriding the div which has your image inside it with the .maintenance-message class with

<div class="maintenance-message">
    <h2><img class="maintenance" src="info.png" alt="down"></h2>
</div>
...
<script>
    document.querySelector(".maintenance-message").innerHTML = "OONA is currently undergoing maintenance. Please check back later.";
</script>

Simply changing “=” to “+=” should solve the issue.

Also, the image will appear extremely small due to this CSS rule.

.maintenance {
  height:30px;
  width:3px;
}

Hope this solves your problem!

3 Likes