How do i retain the results of an onclick function

Question

I am writing javascript function for a grid rotator that should rotate the buttons when one button is clicked.

I am developing a grid rotator which consists of a 3x3 grid form with buttons labeled 1-9. my code should rotate the outer buttons when 5 is clicked. When i click the button, they rotate but immediately return to their initial state. please help me ensure that the result of the rotation stays. This is my second day coding JS.

Button_5.onclick = function() {
  var viarableNum = Button_1.innerHTML;
  Button_1.innerHTML = Button_4.innerHTML;
  Button_4.innerHTML = Button_7.innerHTML;
  Button_7.innerHTML = Button_8.innerHTML;
  Button_8.innerHTML = Button_9.innerHTML;
  Button_9.innerHTML = Button_6.innerHTML;
  Button_6.innerHTML = Button_3.innerHTML;
  Button_3.innerHTML = Button_2.innerHTML;
  Button_2.innerHTML = viarableNum;
}

form {
  display: grid;
  grid-column-gap: 4px;
  grid-template-columns: auto auto auto;
  background-color: rgb(182, 95, 95);
  padding: 4px;
  width: 400px;
  height: 400px;
  margin-left: 40%;
  margin-top: 10%;
}

.button {
  background-color: rgba(212, 210, 68, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 4px;
  font-size: 40px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

<!DOCTYPE HTML>
<head>
  <title>Rotate</title>
</head>
<body>
  <form>
    <button id="Button_1" class="button">1</button>
    <button id="Button_2" class="button">2</button>
    <button id="Button_3" class="button">3</button>
    <button id="Button_4" class="button">4</button>
    <button id="Button_5" class="button">5</button>
    <button id="Button_6" class="button">6</button>
    <button id="Button_7" class="button">7</button>
    <button id="Button_8" class="button">8</button>
    <button id="Button_9" class="button">9</button>
  </form>
</body>
</html>

My expected output should maintain the result of the onclick function when 5 is clicked. it works with a div tag but not with the form. please help. Thanks in advance

Not really a duplicate - that answer provides a solution to this issue, but the OP was not aware that it was the problem. — MikeB, May 23 '19 at 16:38

score 0 · Answer 1 · answered May 23 '19 at 16:15

Clicking a button inside a form does by default submit the form, reloading the current page. Give the button the type "button" so that it does not trigger form submission.

<form>
<button type="button" id="Button_1" class="button">1</button>
<button type="button" id="Button_2" class="button">2</button>
<button type="button" id="Button_3" class="button">3</button>
<button type="button" id="Button_4" class="button">4</button>
<button type="button" id="Button_5" class="button">5</button>
<button type="button" id="Button_6" class="button">6</button>
<button type="button" id="Button_7" class="button">7</button>
<button type="button" id="Button_8" class="button">8</button>
<button type="button" id="Button_9" class="button">9</button>
</form>

Or remove the <form> tags.

returning false and putting type "button" both worked. thanks guys, you are the best — David, May 23 '19 at 16:21

score -1 · Answer 2 · answered May 23 '19 at 16:16

-1

Put return false as the last part of your function - that will stop the 'natural' button/submit action from completing.

answered May 23 '19 at 16:16

MikeB

580
3
18

How do i retain the results of an onclick function

2 Answers2