es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Por qué no funciona mi función onClick de la imagen en React?

30 Jul, 2023 Programación

Soy nuevo en React y estoy trabajando en algo en el que habrá un botón que se puede presionar para lanzar un dado. Por ahora, actualmente solo estoy tratando de hacer que la imagen sea clickable y que, cuando hagas clic en ella, ‘lanzará’ el dado. Sin embargo, mi imagen no cambia cuando hago clic, y no estoy recibiendo ningún error en VSCode. Cualquier ayuda es apreciada.

import React from 'react'

import dice1 from './assets/dice1.png';
import dice2 from './assets/dice2.png';
import dice3 from './assets/dice3.png';
import dice4 from './assets/dice4.png';
import dice5 from './assets/dice5.png';
import dice6 from './assets/dice6.png';

function DiceRoll(e) {
var number = Math.floor(Math.random() * 6) + 1;

switch(number) {
  case 1: e.target.setAttricute('src', {dice1}); break;
  case 2: e.target.setAttricute('src', {dice2}); break;
  case 3: e.target.setAttricute('src', {dice3}); break;
  case 4: e.target.setAttricute('src', {dice4}); break;
  case 5: e.target.setAttricute('src', {dice5}); break;
  case 6: e.target.setAttricute('src', {dice6}); break;
  default: return <h1>Algo salió mal</h1>
}
}

function App() {
  return (
        <img src="{dice1}" onclick="{DiceRoll}">

);
}

export default App;
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código está en la función DiceRoll(). El método setAttribute está escrito incorrectamente y el valor pasado a él es un objeto en lugar de una cadena. Aquí está el código corregido:

    function DiceRoll(e) {
  var number = Math.floor(Math.random() * 6) + 1;

  switch(number) {
    case 1: e.target.setAttribute('src', dice1); break;
    case 2: e.target.setAttribute('src', dice2); break;
    case 3: e.target.setAttribute('src', dice3); break;
    case 4: e.target.setAttribute('src', dice4); break;
    case 5: e.target.setAttribute('src', dice5); break;
    case 6: e.target.setAttribute('src', dice6); break;
    default: return <h1>Algo salió mal</h1>
  }
}

    El método setAttribute establece el valor del atributo especificado en el elemento dado. En este caso, establece el atributo src del elemento img clicado a la imagen de dado correspondiente.

Comments are closed.