Q:

how to make javascript style change last

I have something like this for index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Game</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
  </head>
  <body>
    <h2 class= "question1">How many letters are in "hello" ?</h2>
    <form class="answers">
        <input type="submit" name="answer1" value="1" class="answer" onclick="wrongAnswer(this.name)">
    </form>

  </body>

  <script src="JavaScript.js"> </script>

</html>

and this is the JavaScript.js
function wrongAnswer(name)
{
  document.getElementsByName(name)[0].style.backgroundColor  = "red";
}

when the button is pressed the background gets red but it doesn't last. It goes away in about 1 second. I want it to be changed as long as the page is not refreshed. How to do that ?
Thanks for your time

A:

You are using a submit button input. When it is pressed, the browser tries to send the form's data to a server and this reloads the page. You can use a button element instead:
<h2 class= "question1">How many letters are in "hello" ?</h2>
<button name="1" onclick="wrongAnswer(this.name)">1</button>

