javascripthtml

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

  • 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