如何保留 onclick 函数的结果 [重复]答案

【问题标题】：How do i retain the results of an onclick function [duplicate]如何保留 onclick 函数的结果 [重复]
【发布时间】：2019-05-23 16:11:43
【问题描述】：

我正在为一个网格旋转器编写 javascript 函数，当单击一个按钮时它应该旋转按钮。

我正在开发一个网格旋转器，它由一个 3x3 网格形式和标记为 1-9 的按钮组成。单击 5 时，我的代码应旋转外部按钮。当我单击按钮时，它们会旋转，但会立即返回到初始状态。请帮助我确保轮换的结果保持不变。这是我编写 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>

当点击 5 时，我的预期输出应该保持 onclick 函数的结果。它适用于 div 标签，但不适用于表单。请帮忙。提前致谢

【问题讨论】：

不是真正的重复 - 该答案提供了解决此问题的方法，但 OP 不知道这是问题所在。

标签： javascript onclick innerhtml

【解决方案1】：

默认情况下，单击表单内的按钮会提交表单，重新加载当前页面。给按钮类型“按钮”，这样它就不会触发表单提交。

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

或者删除<form>标签。

【讨论】：

返回 false 和输入“按钮”都有效。谢谢大家，你们是最棒的
“按钮”类型不需要返回false

【解决方案2】：

将 return false 作为函数的最后一部分 - 这将阻止“自然”按钮/提交操作完成。

【讨论】：