CODEWITHSUNDEEP
javascript
Guilherme
Guilherme

Reputation: 325

Function to change colors multiple buttons colors only works fine in the same button

Im doing two functions "getBetNumbers" to get multiple buttons and "changeButtonColor" to change multiple button colors, i dont get any erros if i click in the same button multiple times, but whenever i click a button then another one goes to the last else from changeButtonColor. Does anyone know how can i fix it or a better way to do this?

function getBetNumbers(num) {
  var ext = document.getElementById('ext');
  ext.innerHTML = '';

  for (i = 1; i <= num; i++) {
if (i < 10) {
  ext.innerHTML +=
    '<div onclick="changeButtonColor(' +
    i +
    ')" class="quina" data-numbers="data' +
    i +
    '" id="ext' +
    i +
    '">' +
    0 +
    i +
    '</div>';
} else {
  ext.innerHTML +=
    '<div onclick="changeButtonColor(' +
    i +
    ')" class="quina" data-numbers="data' +
    i +
    '" id="ext' +
    i +
    '">' +
    i +
    '</div>';
}

} }

const changeButtonColor = function (number) {
  getDescription('games.json', function (err, data) {
    var ext = document.getElementById('ext' + number);
    if (err === null) {
      console.log('Ocorreu um erro' + err);
    } else if (counterr === 0) {
      ext.style.backgroundColor = '#ADC0C4';
      counterr = 1;
      counterNumbers = counterNumbers - 1;
      totalNumbers.splice(-1, 100, ext.innerText);
    } else if (
      counterr === 1 &&
      counterNumbers <= 15 &&
      whichLoteriaIs === 'lotofacil'
    ) {
      ext.style.backgroundColor = data.types[0].color;
      counterNumbers = counterNumbers + 1;
      counterr = 0;
      totalNumbers.push(ext.innerText);
    } else if (
      counterr === 1 &&
      counterNumbers <= 6 &&
      whichLoteriaIs === 'megasena'
    ) {
      ext.style.backgroundColor = data.types[1].color;
      counterNumbers = counterNumbers + 1;
      counterr = 0;
      totalNumbers.push(ext.innerText);
    } else if (
      counterr === 1 &&
      counterNumbers <= 20 &&
      whichLoteriaIs === 'lotomania'
    ) {
      ext.style.backgroundColor = data.types[2].color;
      counterNumbers = counterNumbers + 1;
      counterr = 0;
      totalNumbers.push(ext.innerText);
    } else if (
      counterr === 1 &&
      counterNumbers !== 5 &&
      whichLoteriaIs === 'quina'
    ) {
      ext.style.backgroundColor = data.types[3].color;
      counterNumbers = counterNumbers + 1;
      counterr = 0;
      totalNumbers.push(ext.innerText);
    }
  });
};

Upvotes: 0

Views: 64

Answers (1)

Kinglish
Kinglish

Reputation: 23654

While it's impossible to help with the change button color code (because it relies on many variables and other functions that we don't have access to), there is a more efficient and reliable way to create your number divs. In this example, I used backticks and template literals ( ${variable} ) to create your number divs - more readable and less code. For the 'onclick', I moved those to an event listener. Just one event listener is needed for all those button actions, but because those divs get created after the page loads, we put the listener on something that won't be created and destroyed, like body and check to see if we clicked on a quina div. In the context of the event listener, you can get to the item clicked with e.target

window.addEventListener('load', () => {
  document.querySelector('body').addEventListener('click', e => {
    if (e.target.classList.contains('quina')) {
      changeButtonColor(e.target)
    }
  })
})
const getBetNumbers = num => {
  let str = '',
    i = 0;
  while (++i <= num) str += `<div class="quina" data-numbers="data${i}" id="ext${i}">${("0"+i).slice(-2)}</div>`;
  document.getElementById('ext').innerHTML = str;
}

const changeButtonColor = ext => {
  console.log('changeButtonColor for ', ext.id)
  return // because it would error in this snippet. you can take this out.
  getDescription('games.json', function(err, data) {
    if (err === null) {
      console.log('Ocorreu um erro' + err);
    } else if (counterr === 0) {
      ext.style.backgroundColor = '#ADC0C4';
      counterr = 1;
      counterNumbers = counterNumbers - 1;
      totalNumbers.splice(-1, 100, ext.innerText);
    } else if (
      counterr === 1 &&
      counterNumbers <= 15 &&
      whichLoteriaIs === 'lotofacil'
    ) {
      ext.style.backgroundColor = data.types[0].color;
      counterNumbers = counterNumbers + 1;
      counterr = 0;
      totalNumbers.push(ext.innerText);
    } else if (
      counterr === 1 &&
      counterNumbers <= 6 &&
      whichLoteriaIs === 'megasena'
    ) {
      ext.style.backgroundColor = data.types[1].color;
      counterNumbers = counterNumbers + 1;
      counterr = 0;
      totalNumbers.push(ext.innerText);
    } else if (
      counterr === 1 &&
      counterNumbers <= 20 &&
      whichLoteriaIs === 'lotomania'
    ) {
      ext.style.backgroundColor = data.types[2].color;
      counterNumbers = counterNumbers + 1;
      counterr = 0;
      totalNumbers.push(ext.innerText);
    } else if (
      counterr === 1 &&
      counterNumbers !== 5 &&
      whichLoteriaIs === 'quina'
    ) {
      ext.style.backgroundColor = data.types[3].color;
      counterNumbers = counterNumbers + 1;
      counterr = 0;
      totalNumbers.push(ext.innerText);
    }
  });
};
<div id='ext'></div>
<button onclick='getBetNumbers(10)'>Get Bet Numbers</button>

Upvotes: 1

Related Questions