Como obtener el id de un un grupo de botones con JS?

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>

html javascript

2 Answers

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

Add your own answers!

Ask a Question

Get help from others!