Home Array of buttons does not work in JavaScript when storing and calling a button

Questions

Array of buttons does not work in JavaScript when storing and calling a button

December 30, 2022

So I have this problem, the goal of this code is that when I select 5 buttons from the table ( maximum number of clickable buttons) the 6th one that I will click, will make the first of five I clicked to be disabled, and then let the current one to be clicked. When the body is loaded, a table is created with buttons via js Example : I select the numbers : 1-2-3-4-5 and if I click the number 6 number 1 gets disabled or at least does not count between the 5 selected and gets the green class removed. I need to make this thing progressive so I will also need to track what is the "first" button I selected and I thought that the "best" way would be store the first one into an array of buttons.

That seems not to work because I get this error when the 5th button is clicked :

Uncaught TypeError: Cannot read properties of undefined (reading 'button')
    at button.onclick

And that makes me think that when I access the array it actually can’t store the buttons or either does not work. Am I trying to access the array wrongly? (firstButton = array_btn[previous].button) Assuming the input checks already work to verify that no more than 5 buttons are clicked how can I accomplish this goal? Thank you for the help in advance 🙂 I apologize if some part of the code is still in Italian I did my best to set it as understandable as possible.

HTML :

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lotto</title>
    <link rel="stylesheet" href="stile.css" />
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap");
      @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
    </style>
    <script src="lotto.js"></script>
  </head>
  <body onload="createTable()">
    <h1>Benvenuto all'Enalotto !</h1>
    <p class="istruzioni">
      Seleziona dalla tabella sottostante i numeri che vuoi giocare (MASSIMO 5
      !)
    </p>
    <br />
    <table id="tab-punt" class="tabella"></table>
    <br /><br />
    <p id="stampa" class="punt">Stai puntando i seguenti numeri :</p>
    <button onclick="randomArray(); check();" class="bottone" id="btnvinto">
      Scopri se hai vinto !
    </button>
    <p id="vincenti" class="vincenti"></p>
    <p id="vinto" class="perso"></p>
    <br /><br />
  </body>
</html>

JavaScript :

let num = 1;
function createTable() {
  let tabella = document.getElementById("tab-punt");

  for (let i = 0; i < 10; i++) {
    let nuovaRiga = tabella.insertRow(-1);

    for (let j = 0; j < 9; j++) {
      let nuovaCella = nuovaRiga.insertCell(j);
      nuovaCella.appendChild(createButton(num));
      num += 1;
    }
  }
}

//Creating arrays to store user input
const input = new Array(5);

var click_counter = 0;
var stringa_out = "";
var i = 0;

let lastButton;
let array_btn = [];
let previous;

//Function to create every single button
function createButton(index) {
  let button = document.createElement("BUTTON");
  button.classList.add("bot-tab");
  //All buttons will share this class
  button.classList.add("click");
  var text = document.createTextNode(index);
  button.appendChild(text);

  button.onclick = function () {
    let firstButton;
    let currentButton;
    currentButton = this;
    array_btn.push({ currentButton });
    input[i] = index;
    i += 1;
    button.classList.add("verde");
    click_counter += 1;
    if (click_counter === 5) {
      firstButton = array_btn[previous].button;
      firstButton.disabled = true;
      //lastButton = button;
      firstButton.classList.remove("verde");
      click_counter -= 1;
      previous+=1;
    }
  };

  return button;
}

>Solution :

The below code should fix you issue, if it does not, let me know your end goal, since the way you are going about this is complex, it could be way more simple.

Let me know the goal, I would be able to give you a more simply code to achieve it.

Notes:

Only the code from 'let lastButton; onwards is included
See the comment lines starting with // <- for explanation

let lastButton;
let array_btn = [];
let previous = 0; // <- This should be initialised

//Function to create every single button
function createButton(index) {
  let button = document.createElement("BUTTON");
  button.classList.add("bot-tab");
  //All buttons will share this class
  button.classList.add("click");
  var text = document.createTextNode(index);
  button.appendChild(text);

  button.onclick = function () {
    let firstButton;
    let currentButton;
    currentButton = this;
    array_btn.push({ button: currentButton }); // <- you need to assign button property as it is accessed later on
    input[i] = index;
    i += 1;
    button.classList.add("verde");
    click_counter += 1;
    if (click_counter === 5) {
    console.log(array_btn[previous]);
      firstButton = array_btn[previous].button; // <- 'button' property accessed here
      firstButton.disabled = true;
      //lastButton = button;
      firstButton.classList.remove("verde");
      click_counter -= 1;
      previous+=1;
    }
  };

  return button;
}