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