Tengo 3 botones como el de abajo,
<button id="b1">0</button> <button id="b2">0</button> <button id="b3">0</button>En lugar de obtener/leer el valor del HTML, necesito almacenar el valor en el JS .
Cada botón, al hacer clic, debe incrementarse en 1 , cuando llega a 3, nuevamente debe convertirse en 0 .
Los valores [0, 1, 2, 3] deben ser de JS y no de HTML .
Usé switch case para mostrar si el valor es "0", el color es " rojo ", si el valor es 1, el color es " azul ", si el valor es 2, el color es " verde ", si el valor es 3, el color es "rosa".
Probé el siguiente código, pero el interruptor no funciona. Muestra la línea de código predeterminada .
$("button").click(function () { buttonVal(this); }); function buttonVal(ele) { var v = []; var val = +document.getElementById(ele.id).innerHTML; var res = val >= 3 ? 0 : val + 1; v[ele.id] = { intVal: res }; var colors = ["red", "blue", "green", "yellow", "cyan"]; var randColor = colors[Math.floor(Math.random() * colors.length)]; switch (v[ele.id]) { case "0": return document.getElementById(ele.id).innerHTML = "red"; case "1": return document.getElementById(ele.id).innerHTML = "blue"; case "2": return document.getElementById(ele.id).innerHTML = "green"; default: return document.getElementById(ele.id).innerHTML = "no"; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="b1">0</button> <button id="b2">0</button> <button id="b3">0</button>¿Cómo hacer que el código funcione?
Necesito una array para almacenar los valores de (0, 1, 2, 3).
¿Podría alguien por favor ayudar?
Muchas gracias
Ha usado v[ele.id] = { intVal: res }, definitivamente el interruptor no funcionará con 0,1,2 Use res en el interruptor
cambiar (res)
Realmente no necesita usar una matriz para ese caso de uso. Simplemente puede usar .each y completar el índice como texto:
Se agregó una matriz en lugar de un índice.
let btns = [0,1,2]; $("button").click(function () { buttonVal(this); }); $('button').each(function(index,ele){ $(ele).text( btns[index] ); }); function buttonVal(ele) { var val = $(ele).text(); var colors = ["red", "blue", "green", "yellow", "cyan"]; var randColor = colors[Math.floor(Math.random() * colors.length)]; switch (val) { case "0": return document.getElementById(ele.id).innerHTML = "red"; case "1": return document.getElementById(ele.id).innerHTML = "blue"; case "2": return document.getElementById(ele.id).innerHTML = "green"; default: return document.getElementById(ele.id).innerHTML = "no"; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="b1">0</button> <button id="b2">0</button> <button id="b3">0</button>Tu código fijo
Lógica
innerHTMLinnerHTML .style.backgroundColor para el valor innerHTML. $("button").click(function () { buttonVal(this); }); function buttonVal(ele) { var val = +document.getElementById(ele.id).innerHTML; val = val === 3 ? 0 : ++val; document.getElementById(ele.id).innerHTML = val; var colors = ["red", "blue", "green", "pink"]; switch (val) { case 0: document.getElementById(ele.id).style.backgroundColor = colors[0]; break; case 1: document.getElementById(ele.id).style.backgroundColor = colors[1]; break; case 2: document.getElementById(ele.id).style.backgroundColor = colors[2]; break; default: document.getElementById(ele.id).style.backgroundColor = colors[3]; break; } } <button id="b1">0</button> <button id="b2">0</button> <button id="b3">0</button> Para esta solución en particular, no necesita tener una caja de interruptores. Podrías mantener tu matriz de colors adecuada. Está manejando la lógica de innerHTML correctamente, así que solo acceda a los valores de la matriz de colors .
$("button").click(function () { buttonVal(this); }); function buttonVal(ele) { let val = +document.getElementById(ele.id).innerHTML; var colors = ["red", "blue", "green", "pink"]; val = val === 3 ? 0 : ++val; document.getElementById(ele.id).innerHTML = val; document.getElementById(ele.id).style.backgroundColor = colors[val]; } <button id="b1">0</button> <button id="b2">0</button> <button id="b3">0</button>