I am wanting to use a series of visibility controls to create a clean UI for a Battleship game I am working on. Unfortunately, that part isn’t going very well.
What works:
In the index.php file we have, in the header:
<style> #initializeBoard {visibility:hidden;} </style>
and below that we use the javascript file like so:
<script type="text/javascript" src="script/graphics.js"> </script>
On the bottom of the page, we have a form inside:
<div id="initializeBoard"> </div>
and in the .js file we the following function:
function showInitialize(){ document.getElementById('initializeBoard').style.visibility= 'visible' ; }
with an onClick, we both generate the board and reveal that element like so:
<div id="newGameButton"> <button onclick="drawBox(); showInitialize(); hideNewGameButton();"> New Game </button>
That much works at least. When the page loads, the element is not visible until the button is pressed.
What doesn’t work:
That button is supposed to do a third thing. Call a function that is supposed to make the button element hidden, so the button goes away to then be replaced with something else.
function hideNewGameButton(){ document.getElementById('newGameButton').style.visibility= 'hidden' ; }
As far as I can tell, this SHOULD work, but it doesn’t. At first I thought the issue was that maybe buttons can’t be set to hide themselves for some reason, but creating a test button on the bottom of the page didn’t make a difference.
Finally, I checked different browsers and, to my surprise, it doesn’t work in Chrome - but works in Firefox! So I ran chrome incognito tab to see if it works, and it does!
Now, I don’t get this: clearly scripts on the site are not being blocked, because of all the stuff that works so far, and this new function is in the same js file that works, so why would this one thing be such a problem for chrome?