Why is my news-bar not hidden when I click on the close-button?

Question

const closeButton = document.getElementById('close-button');

// Listen for a click event on the close button
closeButton.addEventListener('click', () => {
    const newsBar = document.getElementById('news-bar');

    // Set the display of the news bar to "none" to hide it
    newsBar.style.display = 'none';
});

#news-bar {
    background-color: rgb(255, 221, 0);
    margin-top: -1em;
    display: block;

}

.news-message {
    display: inline-grid;

    margin: auto;
    margin-top: 1.3em;
    margin-bottom: 0.3em;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#close-button {
    margin-left: 2em;

}

<div id="news-bar">
    <p class="news-message"> Our Website is currently being developed. Please stay patient.</p>
    <button class="news-message" id="close-button">X</button>
</div>

I tried to change the element CSS so it's hidden by default, but that makes no sense because I want it to be here when a user visits the website

I converted your code to a snippet. It appears to work. Perhaps your javascript is executing before the dom is loaded. How and where are you loading your javascript? — Tom, Dec 15 '22 at 18:27
Oh okay, I am using Visual Studio Codes Live Server... Do I have to compile something in order to make the JS work by default? — Lukas, Dec 15 '22 at 18:30
can you double check that there is only one element with the id `news-bar` — Pat Murray, Dec 15 '22 at 18:44

Elbashir Saror · Answer 1 · 2022-12-15T19:02:08.607

0

Try change all const to var, and see if it works.

check your html id name! [![enter image description here][1]][1]

this error means it couldn't get the defined id [1]: https://i.stack.imgur.com/gaE4Q.jpg

edited Dec 15 '22 at 19:02

answered Dec 15 '22 at 18:30

Elbashir Saror

302
6

Still not working....:( – Lukas Dec 15 '22 at 18:32
your code is working fine with me, I tried it. maybe its browser or other issue. – Elbashir Saror Dec 15 '22 at 18:44
https://unrivaled-sundae-a44a5c.netlify.app Here is a website with my code... It's not working for me. – Lukas Dec 15 '22 at 18:52
@Lukas A someone mentioned in the comments to your question, you're running your javascript too early on the page. Before the elements exist. Move the link to your js file to the end of the page. – j08691 Dec 15 '22 at 20:50

score 0 · Answer 2 · answered Dec 15 '22 at 18:44

0

Maybe your script is wrong linked or the document.getElementById() is not finding any element, please make a console.log of what the 2 document.getElementById() return. Also, the CSS can be blocking your style change, so I would recommend you to make two different ids. For example:

CSS FILE

#news-bar {
    background-color: rgb(255, 221, 0);
    margin-top: -1em;
    display: block;

}
#news-bar-hidden {
    display:none;
}

JS FILE

let closeButton = document.getElementById('close-button');

// Listen for a click event on the close button
closeButton.addEventListener('click', () => {
let newsBar = document.getElementById('news-bar');

// Set the id of newsBar to "news-bar-hidden"
newsBar.removeAttribute("id")
newsBar.setAttribute("id","news-bar-hidden")
});

answered Dec 15 '22 at 18:44

Santiago Mirantes

54
5

html head link: console is saying: TypeError: null is not an object (evaluating 'closeButton.addEventListener') I hope that helps... – Lukas Dec 15 '22 at 18:54
document.getElementById() is not returning an element, please verify if both of the document.getElementById() elements exist with exactly the same id that you are searching for, also, remember that all the id´s need to be unique, so verify if there are more than one single element with the same id. – Santiago Mirantes Dec 15 '22 at 18:58
Both Elements exist with exactly the same ID the JS is linking to:

Our Website is currently being developed. Please stay patient.

– Lukas Dec 15 '22 at 19:07
@Lukas i recently checked your code and there are not errors. This must be an error coming from your host because even in stack it works fine. Try with another host or with another selector (like document.querySelector()). – Santiago Mirantes Dec 15 '22 at 19:09
Hey:) Here is a website with the identical code.. it's not working there... unrivaled-sundae-a44a5c.netlify.app – Lukas Dec 15 '22 at 19:10
Yes that is what I was saying, i saw your page in netifly and it doesn´t work with no reason, try using your code in pure chrome without exporting to any host or server and tell me if it works (I executed the code in the same console of your page and it worked) – Santiago Mirantes Dec 15 '22 at 19:13
@Lukas check my new answer, I´m sure that´s the error. – Santiago Mirantes Dec 15 '22 at 20:30

score 0 · Answer 3 · answered Dec 15 '22 at 19:34

0

Your code is working fine.

Make sure you didn't forget to import the js file into the html, Ex:

<script src="src/index.js"></script>

answered Dec 15 '22 at 19:34

David Marom

11
5

score 0 · Answer 4 · answered Dec 15 '22 at 20:29

I found what problem do you have, I was thinking that it was a problem with the JS file but it´s not, the problem is that you´re linking the js file in the head of the document when the elements doesn´t even exist (because HTML files create the elements reading from the top to the bottom of the file). You need to put the <script src="script.js"></script> at the end of the <body> tag.

Why is my news-bar not hidden when I click on the close-button?

4 Answers4