如何实现点击按钮多次触发JS函数以顺时针旋转数字

问题出在你的rotate函数中：你仅更新了DOM元素的显示内容，但没有同步修改全局变量value1、value2等的存储值。这导致每次点击按钮时，函数都会复用初始的变量值，而非上一次旋转后的最新状态。

修正后的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 currentValue1 = value1;
  var currentValue2 = value2;
  var currentValue3 = value3;
  var currentValue4 = value4;
  
  // 更新DOM内容
  document.getElementById("value1").innerHTML = currentValue4;
  document.getElementById("value2").innerHTML = currentValue1;
  document.getElementById("value3").innerHTML = currentValue2;
  document.getElementById("value4").innerHTML = currentValue3;
  
  // 更新全局变量，为下一次旋转做准备
  value1 = currentValue4;
  value2 = currentValue1;
  value3 = currentValue2;
  value4 = currentValue3;
}

关键修改说明 #

在旋转逻辑执行后，新增了对全局变量的赋值操作，将它们同步更新为本次旋转后的最新值。这样下一次点击按钮时，函数会基于当前的网格状态继续旋转，而非回到初始值。

可选：调整为标准90度顺时针旋转 #

如果你的目标是实现网格整体顺时针旋转90度，当前的旋转顺序可能不符合预期。标准2x2网格的顺时针旋转逻辑应为：

• 左上角（value1）取左下角（value3）的值
• 右上角（value2）取左上角（原value1）的值
• 右下角（value4）取右上角（原value2）的值
• 左下角（value3）取右下角（原value4）的值

对应的修正函数：

function rotate() {
  var currentValue1 = value1;
  var currentValue2 = value2;
  var currentValue3 = value3;
  var currentValue4 = value4;
  
  // 标准90度顺时针旋转逻辑
  document.getElementById("value1").innerHTML = currentValue3;
  document.getElementById("value2").innerHTML = currentValue1;
  document.getElementById("value3").innerHTML = currentValue4;
  document.getElementById("value4").innerHTML = currentValue2;
  
  // 更新全局变量
  value1 = currentValue3;
  value2 = currentValue1;
  value3 = currentValue4;
  value4 = currentValue2;
}

内容的提问来源于stack exchange，提问作者dansdaman