Remove text-decoration when the div style is displayed none until the event is triggered?

Question

I am working on mobile optimization for my site and am having trouble getting the menu to display the way I want it to... I am having trouble removing the underline from my links.

On page load, the header shows a business logo, a menu button, and a phone number. When the user clicks the menu button I want the phone screen to display buttons to link them to other pages. This is working, but I can't get rid of the underline on the links.

function dispmenu(){
    document.getElementById('toolbar').style.display='block';
    document.getElementById('menubutton').style.display='none';
    document.getElementById('contact_bar_phone').style.display='none';
    document.getElementById('logo').style.display='none';
}

var buttonsmob = `
    <span id='toolbar' style='display:none;'>
    <a href='https://www.home.com'><div class='toolbarbutton'>Home</div></a>
    <a href='Locations.php'><div class='toolbarbutton'>Locations</div>
    <a href='ContactUs.php'><div class='toolbarbutton'>Contact Us</div></a>
    <div onclick='closemenu()' class='toolbarbutton'>Close Menu</div>
    </span>`;

I have tried adding text-decoration: none; to the css in .toolbarbutton a{ .toolbarbutton{ and

function dispmenu()
{
    document.getElementById('toolbar').style.display='block';
    document.getElementById('toolbar').style.text-decoration='none';
}

but none of this is working. I feel like it's because the item is set to display: none on page load, but don't know how to fix it?

Answer 1

Use this code:

function dispmenu()
{
    document.getElementById('toolbar').style.display='block';
    document.querySelectorAll('#toolbar a').forEach(link =>{
      link.style.textDecoration = 'none';
    })
}

Answer 2

the css property in js have different name (see camelCase textDecoration)

function dispmenu()
{
    document.getElementById('toolbar').style.display='block';
    document.getElementById('toolbar').style.textDecoration='none';
}

Answer 3

you should use:

a {
    text-decoration: none;
}

Answer 4

I suggest to you if the menu is for mobile only, use media queries to make this change

a media query is a command that you can limit a screen size and apply to css properties without using java script

@media (max-width: 600px) {
   .toolbarbutton a {
       text-decoration: none;
   }
}

Here's a tutorial that can help you.