setAttribute with Global Attributes

JavaScript
1

Hey guys, i want to create a function to hide and show a button when the tab gets small but don’t works with the method setAttribute.

let wh = window.innerHeight;
let ww = window.innerWidth;

re = wh + ww;

document.getElementById("messenger").innerHTML = re;

if(re <= 1000)
{
    document.getElementById("button").setAttribute  = "hidden";
}
2

Is it likely that it’s only when the page loads that the code runs?

I don’t see any kind of event or interval in which that code runs. You will need one of those so that the code can run after the page loads.

I suggest using a setInterval of about 250 milliseconds so that the effect is responsive without affecting the browser performance.

3

I use this in the head tag of my web page

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

I confirm my code run on my web page with this


document.getElementById("messenger").innerHTML = re;

Showing the sum of the height and width of the tab. So, how i can get set the hidden value on my button?

4

When it’s a class name that you’re dealing with, use the classList API. For example:

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");
5

This is my button in my web page

 <button id="button"><img src="images/list.png"></img></button>

I don’t use OOP or any framework. It’s only raw web page with html, css and i tryng to put some javascript code in it.

6

So you could do:

const button = document.getElementById("button");
button.classList.add("hidden");

Or as a one-liner:

document.getElementById("button").classList.add("hidden");

to add the class hidden to the button element.

You could then use CSS to control its presentation:

.hidden {
  display: none;
}
1 Like
7

Thanks a lot!

1 Like
8

Or just use:

document.getElementById("button").style.display="none";
9

I know that it’s tempting to directly edit the style properties, but that’s usually a bad practice as it leads to reliability problems later on down the line.

10

I disagree :grinning:

11

I’m not in the mood to educate on issues about:

  • Separation of Concerns
  • Don’t Repeat Yourself
  • Caching
  • Version control

Just know that the concerns are there.

1 Like
12

FYI (after the fact)…

The <img> element is not a container. As such, it does not expect a closing tag (or an XHTML closing slash).

<img src="images/list.png"></img>

should be

<img src="images/list.png">

Depending on usage, it may require the “alt” attribute and possibly “width” and “height” attributes. You might want to check it out in your favorite HTML reference.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.