Stack Overflow en español Asked by Yasser Chacon on October 11, 2020
Buen dia,
Ando creando un simple proyecto donde tengo un grupo de 9 botones. Estoy programando un js script que al momento de dar click en cualquiera de los 9 botones, les cambie el valor asignado a este boton.
Mi problema recide en que no se como obtener el valor del boton que selecciono en ese momento sin tener que crear un funcion para cada boton.
<div class="lineas">
<button type="button" id="b1" class="cajas" onclick="asignar(this)"> ? </button>
<button type="button" id="b2" class="cajas" onclick="asignar(this)"> ? </button>
<button type="button" id="b3" class="cajas" onclick="asignar(this)"> ? </button><br/>
<button type="button" id="b4" class="cajas" onclick="asignar(this)"> ? </button>
<button type="button" id="b5" class="cajas" onclick="asignar(this)"> ? </button>
<button type="button" id="b6" class="cajas" onclick="asignar(this)"> ? </button> <br/>
<button type="button" id="b7" class="cajas" onclick="asignar(this)"> ? </button>
<button type="button" id="b8" class="cajas" onclick="asignar(this)"> ? </button>
<button type="button" id="b9" class="cajas" onclick="asignar(this)"> ? </button>
</div>
Y este de abajo seria mi funcion, donde esperaba que recibiera un valor
<script type="text/javascript">
function asignar(comp) {
let id = comp.id;
var uno = document.getElementById(id);
valor ? uno.innerText = "X" : uno.innerText = "?";
valor ? uno.innerText = "O" : uno.innerText = "X";
valor = !valor
}
</script>
La solucion fue la siguiente,
<ui:composition template="./plantilla/plantilla1.xhtml">
<ui:define name="content">
<h1 class="encabezados"> Juguemos Gato!</h1>
<div class="contenedor">
<button type="button" id="b1" class="cajas" > . </button>
<button type="button" id="b2" class="cajas" > . </button>
<button type="button" id="b3" class="cajas" > . </button><br/>
<button type="button" id="b4" class="cajas" > . </button>
<button type="button" id="b5" class="cajas" > . </button>
<button type="button" id="b6" class="cajas" > . </button> <br/>
<button type="button" id="b7" class="cajas" > . </button>
<button type="button" id="b8" class="cajas" > . </button>
<button type="button" id="b9" class="cajas" > . </button>
</div>
<h2 class="encabezados" id="status" > Aun no hay un ganador</h2>
</ui:define>
</ui:composition>
<script>//script para turnar entre x y o en los botones de gato
var valor = true;
const contenedor = document.querySelector('.contenedor'); //variable contrante para la clase
contenedor.addEventListener('click', (elemento) => { //agregar un evenlistener de tipo click
if (elemento.target.classList.value === 'cajas') { //todo aquel elemento que posea la clase cajas entra en esta condicion
console.log(elemento.target.id);
valor ? elemento.target.innerText = "X" : elemento.target.innerText = " ";
valor ? elemento.target.innerText = "O" : elemento.target.innerText = "X";
valor = !valor;
}
});
</script>
</body>
Answered by Yasser Chacon on October 11, 2020
La variable comp
contiene el boton seleccionado (ha sido llamado como asignar(this)
y en este caso this
es el boton en si.
function asignar(comp) {
var valor = comp.innerText.trim();
if (valor == '?') comp.innerText = "X";
if (valor == 'X') comp.innerText = "O" ;
if (valor == 'O') comp.innerText = "?" ;
//console.log(valor);
}
<div class="lineas">
<button type="button" id="b1" class="cajas" onclick="asignar(this)"> ? </button>
<button type="button" id="b2" class="cajas" onclick="asignar(this)"> ? </button>
<button type="button" id="b3" class="cajas" onclick="asignar(this)"> ? </button><br/>
<button type="button" id="b4" class="cajas" onclick="asignar(this)"> ? </button>
<button type="button" id="b5" class="cajas" onclick="asignar(this)"> ? </button>
<button type="button" id="b6" class="cajas" onclick="asignar(this)"> ? </button> <br/>
<button type="button" id="b7" class="cajas" onclick="asignar(this)"> ? </button>
<button type="button" id="b8" class="cajas" onclick="asignar(this)"> ? </button>
<button type="button" id="b9" class="cajas" onclick="asignar(this)"> ? </button>
</div>
Answered by F.Igor on October 11, 2020
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP