If/else statement to display/hide image

Question

The function should go like: if an integer value for a variable provided by a core module is larger than 0 then an image should be displayed, else it should remain hidden.

The Coremodule is constructed so if I in my *.js file write: data.truck.retarderBrake (which is an integer). Then the coremodule will return the current integervalue .

So my "pseudo code" will look something like this:

if (data.truck.retarderBrake>0) {
    show.image ('images/RetarderON.png');
    } else {
    hide.image ('images/RetarderON.png');
}

In my HTML code I have a statement for the image:

    <div class="RetarderOn"></div>

and the CSS looks like this:

.RetarderOn {
  background-image: url("images/RetarderON.png");
  position: absolute;
  left: 851px;
  top: 13px;
  width: 92px;
  height: 71px;
  visibility: hidden;
}

Can I do it this way? And what would the correct syntax for the JS if statement be. Maybe I can define all the properties of the image in the JS file instead of the CSS file?

Answer 1

You can set the visibility property for that specific element via its style object; you can find the element via querySelector (if I assume there's only one of them), which accepts any valid CSS selector and returns the first match:

document.querySelector(".RetarderOn").style.visibility = data.truck.retarderBrake > 0 ? "visible" : "hidden";

If there are multiple matches, use querySelectorAll and pick the relevant one from the resulting NodeList .