如何创建一个多次运行 javascript 函数的按钮？

Question

基本上我希望能够在单击旋转按钮时顺时针旋转数字。我想我已经附上了所有相关代码。我创建了一个按钮。它链接回 javascript 函数。它甚至运行该功能。问题是我只能让它运行函数并旋转一次。

var value1 = "1";
var value2 = "2";
var value4 = "3";
var value3 = "4";

document.getElementById("value1").innerHTML = value1;
document.getElementById("value2").innerHTML = value2;
document.getElementById("value3").innerHTML = value3;
document.getElementById("value4").innerHTML = value4;

var btn = document.querySelector('#bt1');

btn.addEventListener('click', rotate)

function rotate() {
  var Value1 = value1;
  var Value2 = value2;
  var Value3 = value3;
  var Value4 = value4;
  document.getElementById("value1").innerHTML = Value4;
  document.getElementById("value2").innerHTML = Value1;
  document.getElementById("value3").innerHTML = Value2;
  document.getElementById("value4").innerHTML = Value3;
}

body {
  font-family: sans-serif;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}

.import {
  padding-bottom: 0.3em;
}

.import input[type=text] {
  width: 630px;
}

.valid {
  background-color: limegreen;
}

.invalid {
  background-color: red;
}

.imported_square {
  background-color: lightgray;
}

.puzzle {
  border: 4px solid black;
  border-collapse: collapse;
}

.puzzle tr {
  padding: 0;
}

.puzzle td {
  padding: 0;
  border: 1px solid black;
  width: 2em;
  font-size: 50pt;
  text-align: center;
}

.puzzle .thick_right {
  border-right: 4px solid black;
}

.puzzle .thick_bottom {
  border-bottom: 4px solid black;
}

<div>
  <button id="bt1">Rotate</button>
  <table class="puzzle" width=250px height=250px>
    <tr class="1 thick_bottom">
      <td id="value1" class="1 thick_right"></td>
      <td id="value2" class="2 thick_right"></td>
    </tr>
    <tr class="2 thick_bottom">
      <td id="value3" class="1 thick_right"></td>
      <td id="value4" class="2 thick_right"></td>
    </tr>
  </table>
</div>

我花了很长时间在这里搜索线程，并尝试创建自己的迂回方式，但似乎没有任何效果。我可以让它旋转一次，但我就是找不到让它旋转不止一次的方法。我希望能够根据需要多次单击旋转按钮，并且数字保持顺时针方向旋转。

Answer 1

添加旋转按钮值（在 id 旁边）onclick='rotate(element)' 并在 rotate() 函数中添加一个参数，说明要旋转哪个元素。

Answer 2

你一直轮换相同的数字，所以按钮似乎不起作用。我已经安排了代码，以便该功能可以正常工作。注意哪些变量与另一个变量交换。这是逆时针旋转。

var value1 = "1";
var value2 = "2";
var value4 = "3";
var value3 = "4";

document.getElementById("value1").innerHTML = value1;
document.getElementById("value2").innerHTML = value2;
document.getElementById("value3").innerHTML = value3;
document.getElementById("value4").innerHTML = value4;

var btn = document.querySelector('#bt1');

btn.addEventListener('click', rotate)

function rotate() {
  var old_value1 = value1
  value1 = value2;
  value2 = value4;
  value4 = value3;
  value3 = old_value1;
  document.getElementById("value1").innerHTML = value1;
  document.getElementById("value2").innerHTML = value2;
  document.getElementById("value3").innerHTML = value3;
  document.getElementById("value4").innerHTML = value4;
}

body {
  font-family: sans-serif;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}

.import {
  padding-bottom: 0.3em;
}

.import input[type=text] {
  width: 630px;
}

.valid {
  background-color: limegreen;
}

.invalid {
  background-color: red;
}

.imported_square {
  background-color: lightgray;
}

.puzzle {
  border: 4px solid black;
  border-collapse: collapse;
}

.puzzle tr {
  padding: 0;
}

.puzzle td {
  padding: 0;
  border: 1px solid black;
  width: 2em;
  font-size: 50pt;
  text-align: center;
}

.puzzle .thick_right {
  border-right: 4px solid black;
}

.puzzle .thick_bottom {
  border-bottom: 4px solid black;
}

<div>
  <button id="bt1">Rotate</button>
  <table class="puzzle" width=250px height=250px>
    <tr class="1 thick_bottom">
      <td id="value1" class="1 thick_right"></td>
      <td id="value2" class="2 thick_right"></td>
    </tr>
    <tr class="2 thick_bottom">
      <td id="value3" class="1 thick_right"></td>
      <td id="value4" class="2 thick_right"></td>
    </tr>
  </table>
</div>