0

estoy intentando realizar que me reconozca de que cuando coloque un botón en específico, el código lo que haga sea reconocer que botón coloqué y arroje según cada botón que coloque un resultado. Pero no me deja realizarlo.

El problema radica en que quiero llamar a que realice con el boton al dar click la accion de seleccionar según el tipo de "innerhtml" una accion, pero probando el codigo no me permite realizar eso, ya que la respuesta siempre que la coloco es cinco, dos veces. He intentando cambiar el foreach por un for, he intentando hasta no colocar un switch sino un for simple y no me funciona :(

Adjunto el codigo para dar a entender mi idea:

var inputValue = 0
var totalTip = 0;


const $inputBill = document.getElementsByClassName('bill_input')[0];
$inputBill.addEventListener('keyup', (event) => {
    const inputBill = event.path[0].value;
    inputValue =+ inputBill;    
})


const $five = document.querySelector('#five');
const $ten = document.querySelector('#ten');
const $fifteen = document.querySelector('#fifteen');
const $twentyFive = document.querySelector('#twentyFive');
const $fifty = document.querySelector('#fifty');

buttonsArray = [$five, $ten, $fifteen, $twentyFive, $fifty] ;

$five.addEventListener('click' , calculatorTip);
$ten.addEventListener('click' , calculatorTip);
$fifteen.addEventListener('click' , calculatorTip);
$twentyFive.addEventListener('click' , calculatorTip);
$fifty.addEventListener('click' , calculatorTip);



function calculatorTip () {
    buttonsArray.forEach(button => {
        switch (button.innerHTML) {
            case '5%':
                console.log('cinco por ciento')
                break;
            case '10%':
                console.log('diez por ciento')
                break;
            case '15%':
                console.log('quince por ciento')
                break;
            case '25%':
                console.log('veinticinco por ciento')
                break;
            case '50%':
                console.log('cincuenta por ciento')
                break;
            default:
                break;
        }     
    });
}
1
  • 1
    Saludos. Revisa tu implementación de calculatorTip te estas basando en el buttonsArray no estás (digamos) identificando el botón que es cliqueado. Commented el 11 sept. 2021 a las 18:26

1 respuesta 1

1

Tal como te señalaba RobertoLeOr, el problema radica en que tu función no identifica el botón que está siendo clickado, sino que se ejecuta por igual para el innerHTML de cada uno de los elementos del buttonsArray (a fin de cuentas, eso significa foreach :P).

La solución sería, por lo tanto, leer sólo el innerHTML del elemento que haya sido clickado.

const $five = document.querySelector('#five');
const $ten = document.querySelector('#ten');
const $fifteen = document.querySelector('#fifteen');
const $twentyFive = document.querySelector('#twentyFive');
const $fifty = document.querySelector('#fifty');

buttonsArray = [$five, $ten, $fifteen, $twentyFive, $fifty];

buttonsArray.forEach(button => button.addEventListener('click', function calculatorTip() {
  switch (button.innerHTML) {
    case '5%':
      console.log('cinco por ciento')
      break;
    case '10%':
      console.log('diez por ciento')
      break;
    case '15%':
      console.log('quince por ciento')
      break;
    case '25%':
      console.log('veinticinco por ciento')
      break;
    case '50%':
      console.log('cincuenta por ciento')
      break;
    default:
      break;
  }
}));
<button id="five" type="button">5%</button>
<button id="ten" type="button">10%</button>
<button id="fifteen" type="button">15%</button>
<button id="twentyFive" type="button">25%</button>
<button id="fifty" type="button">50%</button>

Como ves, en este ejemplo el innerHTML que se lee es sólo el del button que está siendo clickado, no el de todos ellos. ;)

1
  • Muchas gracias compañeros, solucionado Commented el 21 jun. 2022 a las 22:05

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.