Different way of showing and hiding certain elements-CodePudding

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";

CodePudding user response：

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