0

Intente darle al button dos clases y llamarla en javascript para ejecutar una funcion y darle un valor diferente a casa clase. El codigo que tengo hasta el momento es el siguiente:

Html:

<input id="resultadoA"></input>
<input id="resultado1"></input>
.
.
.
<button type="button" class="A A1">A-1</button>

JavaScript:

document.getElementsByClassName('A').addEventListener('click', A)
document.getElementsByClassName('A1').addEventListener('click', A1);

function A(){
    let actual = document.getElementById('resultadoA').innerText;
    let agregar = document.getElementsByClassName('A').value= "A";
    document.getElementById('resultadoA').innerHTML = actual + agregar;
}

function A1(){
    let actual = document.getElementById('resultado1').innerText;
    let agregar = document.getElementsByClassName('A1').value = "1";
    document.getElementById('resultado1').innerHTML = actual + agregar;
}
1
  • Esos día resultados los debe dar en momentos distintos o al parejo?
    – user128299
    el 21 sep. 2020 a las 21:19

3 respuestas 3

0

La función getElementsByClassName devuelve una estructura tipo arreglo, por la que tendrías que iterar para asignar el eventListener a cada uno de sus elementos.

Puedes iterar directamente por los elementos con una llamada a foreach de Array.prototype (dado que el objeto devuelto no es un arreglo, sino que solo parece uno.

function bodyLoad() {
  Array.prototype.forEach.call(document.getElementsByClassName('A'), function(el) {
    el.addEventListener('click', A);
  });
  
  Array.prototype.forEach.call(document.getElementsByClassName('A1'), function(el) {
    el.addEventListener('click', A1);
  });
}

function A(){
  console.log("ejecutando A");
}

function A1(){
  console.log("ejecutando A1");
}
<body onload="bodyLoad()">
  <input id="resultadoA"></input>
  <input id="resultado1"></input>
  <button type="button" class="A A1">A-1</button>
</body>

0

A ver si entendí bien, prueba haciendo lo siguiente

const resultadoA = document.querySelector('#resultadoA');
const resultado1 = document.querySelector('#resultado1')

document.querySelector('#btn-resultado').addEventListener('click', ()=>{
    resultadoA.value = "A";
    resultado1.value= 1;
})
<input id="resultadoA"></input>
<input id="resultado1"></input>
.
.
.
<button type="button" id="btn-resultado">A-1</button>

0
0

getElementsByClassName() retorna un array de elementos (aunque haya solo una coincidencia), por lo que no se puede llamar a addEventListener() desde ahi, debe ser un elemento individual.

Intenta usando querySelectorAll() que retorna una lista de elementos iterable usando foreach().

document.querySelectorAll('.A').foreach(element){ element.addEventListener('click', A) });
document.querySelector('.A1').foreach(element){ element.addEventListener('click', A1); });

No me queda claro cual es la logica, pero al parecer estas usando .innerHTML para obtener valores de inputs, siendo que debes obtener el valor usando .value. Y en elementos button, el contenido se obtendria con .innerHTML.

document.getElementById('resultadoA').value; // valor del input id=resultadoA

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.