CODEWITHSUNDEEP
javascripthtmlfunctionbutton
dansdaman
dansdaman

Reputation: 1

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

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

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.

Upvotes: 0

Views: 450

Answers (6)

Anirudh Singh
Anirudh Singh

Reputation: 36

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>

Upvotes: 0

Giorgi Shalamberidze
Giorgi Shalamberidze

Reputation: 304

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

Upvotes: 0

PADMANABAN GOKULA
PADMANABAN GOKULA

Reputation: 1

You have to use array.

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

Upvotes: 0

jjj
jjj

Reputation: 408

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

Upvotes: 1

IT goldman
IT goldman

Reputation: 19521

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

Upvotes: 0

user20624405
user20624405

Reputation: 1

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.

Upvotes: 0

Related Questions