How to create a button that runs a javascript function multiple times?-CodePudding

Basically I want to be able to rotate the numbers clockwise when I click the rotate button. I think I've attached all of the associated code. I created a button. It links back to the javascript function. It even runs the function. The issue is I can only get it to run the function and rotate one time.

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  width=250px height=250px>
    <tr >
      <td id="value1" ></td>
      <td id="value2" ></td>
    </tr>
    <tr >
      <td id="value3" ></td>
      <td id="value4" ></td>
    </tr>
  </table>
</div>

I've spent a long time scouring threads on here and also trying to create my own roundabout ways but nothing seems to work. I can get it to rotate once but I just can't find a way to make it rotate more than once. I want to be able to click the rotate button as many times as I want and the numbers keep rotating in a clockwise direction.

CodePudding user response：

You can use a function to modify each number upon each round of rotation:

    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 nextNum(currentNum) {
      // upon each rotate, minus the current number by 1 or reset to 4
      return currentNum - 1 < 1 ? 4 : currentNum - 1
    }
    
    function rotate(){

        value1 = nextNum(value1)
        value2 = nextNum(value2)
        value3 = nextNum(value3)
        value4 = nextNum(value4)
        
        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  width=250px height=250px>
      <tr >
        <td id="value1" ></td>
        <td id="value2" ></td>
      </tr>
      <tr >
        <td id="value3" ></td>
        <td id="value4" ></td>
      </tr>
  </table>
    </div>

CodePudding user response：

add in the rotate button values (next to id) onclick='rotate(element)' and add a parameter in rotate() function that says which element to rotate.

CodePudding user response：

You keep rotating the same numbers so it seems the button isn't working. I've arranged the code so that the function would work. Pay attention to what variables is exchanged with another. This is counterclockwise rotation.

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  width=250px height=250px>
    <tr >
      <td id="value1" ></td>
      <td id="value2" ></td>
    </tr>
    <tr >
      <td id="value3" ></td>
      <td id="value4" ></td>
    </tr>
  </table>
</div>

CodePudding user response：

You have to use array.

<div>
  <button id="bt1">Rotate</button>
  <table  width=250px height=250px>
      <tr >
        <td id="value1" ></td>
        <td id="value2" ></td>
      </tr>
      <tr >
        <td id="value3" ></td>
        <td id="value4" ></td>
      </tr>
  </table>
  <script>
    var values = ["1", "2", "3", "4"];
    
    document.getElementById("value1").innerHTML = values[0];
    document.getElementById("value2").innerHTML = values[1];
    document.getElementById("value3").innerHTML = values[2];
    document.getElementById("value4").innerHTML = values[3];
    
    var btn = document.querySelector('#bt1');
    
    btn.addEventListener('click', rotate)
    var counter = 0;
    function rotate(){
          counter;
        document.getElementById("value1").innerHTML = values[(counter   0)%4];
        document.getElementById("value2").innerHTML = values[(counter   1)%4];
        document.getElementById("value3").innerHTML = values[(counter   2)%4 ];
        document.getElementById("value4").innerHTML = values[(counter   3)%4 ];
    }
  </script>
        <style type="text/css">
          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;}
        </style>
    </div>

CodePudding user response：

   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() {
        if(value1 === 1) {
            value1 = 4
        }else {
            value1--
        }

        if(value2 === 1) {
            value2 = 4
        }else {
            value2--
        }

        if(value3 === 1) {
            value3 = 4
        }else {
            value3--
        }

        if(value4 === 1) {
            value4 = 4
        }else {
            value4--
        }

        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  width=250px height=250px>
    <tr >
      <td id="value1" ></td>
      <td id="value2" ></td>
    </tr>
    <tr >
      <td id="value3" ></td>
      <td id="value4" ></td>
    </tr>
  </table>
</div>

CodePudding user response：

Use loops and arrays in this case.

I didn't focus much on design. But this Javascript code will work on your script too.

function rotate() {
  
 var array = []

  document.querySelectorAll('td').forEach((element) => {
    array.push(element.innerText)
  })

  array.push(array.shift())

  document.querySelectorAll('td').forEach((element, index) => {
    element.innerText = array[index]
  })
  
}

table{
  border-collapse: collapse;
}

table td{
  border: 2px solid #111;
  padding: 20px;
}

button{
  margin-top: 20px;
  border: none;
  outline: none;
  padding: 10px 16px;
  background: #111;
  color: #FFF;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<button onclick='rotate()'>Rotate</button>