3

tengo 9 botones tipo 3x3 en los que si el select esta sleccionado como subir cada vez que haga click en un boton tiene que aumentarse +1 el boton y si esta seleccionado en bajar tiene reducirse en -1 pero no consigo hacerlo y en clase me han dicho que use el this y no se como funciona

function ejercicio2(){
    var boton=document.getElementsByTagName("button");
    var desplegable=document.getElementById("lista1");
    alert(boton.value);
    if(desplegable.value=='subir'){
        this.value++;
    }else{
        this.value--;
    }
}

<div id="ejercicio2" style="padding: 15px">
        EJERCICIO 2 <br>
        <button name="boton" id="b1" onclick="ejercicio2()">0</button>
        <button name="boton" id="b2" onclick="ejercicio2()">0</button>
        <button name="boton" id="b3" onclick="ejercicio2()">0</button><br>
        <button name="boton" id="b4" onclick="ejercicio2()">0</button>
        <button name="boton" id="b5" onclick="ejercicio2()">0</button>
        <button name="boton" id="b6" onclick="ejercicio2()">0</button><br>
        <button name="boton" id="b7" onclick="ejercicio2()">0</button>
        <button name="boton" id="b8" onclick="ejercicio2()">0</button>
        <button name="boton" id="b9" onclick="ejercicio2()">0</button>
        <select name="lista" id="lista1">
            <option value="subir">Subir</option>
            <option value="bajar">Bajar</option>
        </select>
    </div>
4
  • ¿Podrías añadir el HTML para que podamos tener el escenario al completo?
    – phpMyGuel
    Commented el 7 oct. 2019 a las 7:26
  • Deberias insertar el HTML que estas utilizando para poder dar una respuesta acertada. Si estas utilizando <button> para obtener el "valor" debes usar innerHTML ya que value es para elementos <input>
    – Daniel
    Commented el 7 oct. 2019 a las 7:46
  • Lo que te están pidiendo es que uses this para referirte al elemento pulsado dentro de la función que pasas a addEventListener Commented el 7 oct. 2019 a las 7:54
  • ye he añadido el html que me lo pidio phpMiguel creo Commented el 7 oct. 2019 a las 10:40

2 respuestas 2

2

Para conseguirlo lo que podrías hacer es pasarle el this como parámetro de entrada a la función del onclick, de esta manera el this hace referencia al elemento que disparó el evento click por lo que podrías interactuar solamente con este en vez de con todos los botones.

Hay que tener en cuenta que para operar matemáticamente con el contenido de cada botón (para sumarle 1 o restarle 1) hay que transformarlo primero a integer a través de la función parseInt()

<div id="ejercicio2" style="padding: 15px">
  EJERCICIO 2 <br>
  <button name="boton" id="b1" onclick="ejercicio2(this)">0</button>
  <button name="boton" id="b2" onclick="ejercicio2(this)">0</button>
  <button name="boton" id="b3" onclick="ejercicio2(this)">0</button><br>
  <button name="boton" id="b4" onclick="ejercicio2(this)">0</button>
  <button name="boton" id="b5" onclick="ejercicio2(this)">0</button>
  <button name="boton" id="b6" onclick="ejercicio2(this)">0</button><br>
  <button name="boton" id="b7" onclick="ejercicio2(this)">0</button>
  <button name="boton" id="b8" onclick="ejercicio2(this)">0</button>
  <button name="boton" id="b9" onclick="ejercicio2(this)">0</button>
  
  <select name="lista" id="lista1">
    <option value="subir">Subir</option>
    <option value="bajar">Bajar</option>
  </select>
</div>

<script>
  function ejercicio2 (boton) {
    let valor = boton.innerText;

    if (lista1.value == 'subir') {
       boton.innerText = parseInt(valor) + 1;
    }
    else {
       boton.innerText = parseInt(valor) - 1;
    }
  }
</script>

1
  • FUNCIONA!!! joder todo el mundo le sale en clase en un momento y yo en una hora no lo sacaba menos mal que estais por aqui todos muchas gracias ^^ Commented el 7 oct. 2019 a las 10:53
1

En lugar de hacer todos los onclick podŕias agregar un listener, y en la función que se le pasa por parámetro ya está el this.

const option = document.getElementById("lista1");

[...document.getElementsByName("boton")].forEach(boton => {
  boton.addEventListener("click", function() {

    //Aqui "this" es cada elemento

    (option.value === 'subir') ? this.innerText++: this.innerText--;
  })
});
<div id="ejercicio2" style="padding: 15px">
  EJERCICIO 2 <br>
  <button name="boton" id="b1">0</button>
  <button name="boton" id="b2">0</button>
  <button name="boton" id="b3">0</button><br>
  <button name="boton" id="b4">0</button>
  <button name="boton" id="b5">0</button>
  <button name="boton" id="b6">0</button><br>
  <button name="boton" id="b7">0</button>
  <button name="boton" id="b8">0</button>
  <button name="boton" id="b9">0</button>
  <select name="lista" id="lista1">
    <option value="subir">Subir</option>
    <option value="bajar">Bajar</option>
  </select>
</div>

1
  • Mucha mejor opción, aunque quizás exceda el nivel de un ejercicio de aprendizaje básico.
    – phpMyGuel
    Commented el 7 oct. 2019 a las 15:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.