'Different way of showing and hiding certain elements

I made a javascript aim train app that contains a menu. When I click play, I hide the elements of the menu and show the elements of the game... I was wondering if there was a more correct way of doing this without doing visibility hidden.

https://codepen.io/miguelserdeira/pen/oNEZRMj

This is an example of the part of the code that I want to change. Perhaps when I click play it should direct me to another page with the game? Thanks.

 //Shows the elements that should be visible or hidden
    imgTarget.style.visibility = "visible";
    startBtn.style.visibility = "hidden";
    timeText.style.visibility = "hidden";
    timeSlider.style.visibility = "hidden";
    targets.style.visibility = "hidden";
    sizeImg.style.visibility = "hidden";
    aviso.style.visibility = "visible";
    valor.style.visibility = "hidden";
    valor2.style.visibility = "hidden";
    valor3.style.visibility = "hidden";
    hits.style.visibility = "visible";
javascripthtml


Solution 1:[1]

Example:

var startBtn = document.getElementById("comecar");

Is currently hidden with

startBtn.style.visibility = "hidden";

Try this instead:

$("#comecar").hide();

and to show it:

$("#comecar").show();

You can also chain elements together to hide them all in one line, like so:

$("#element1, #element2, #element3, #element4").hide();

Remove all of the visibility assignments. That leaves the HTML element in place and masks the content, whereas the jQuery hiding removes the element

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 flyinryan

Related Questions