HTML
<div class="user"> <img id="select" class="rock" src="images/rock-removebg-preview.png" onclick="addImg()"> <img id="select" class="paper" src="images/paper-removebg-preview.png" > <img id="select" class="scissors" src="images/scissors-removebg-preview.png" > </div> <div class="player-box"></div>JavaScript
function addImg() { rock.removeAttribute('onclick') const newElement = document.createElement('img'); newElement.src = 'images/rock-removebg-preview.png' playerBox.appendChild(newElement); rock.addEventListener('onclick', addImg) }Estoy tratando de crear una función en la que, cuando se hace clic en la imagen, esa imagen respectiva se muestra en el div del cuadro del reproductor. Probé algunas variaciones diferentes de programas javascript y ninguno de ellos funciona como yo quiero. Cualquier ayuda sería apreciada.
Los detalles se comentan en el ejemplo a continuación.
// Reference the <form> const RPS = document.forms.RPS // Register the click event to <form> RPS.onclick = addIMG; // Pass the Event Object function addIMG(e) { // Reference all form controls const IO = this.elements; // The tag that the user cklicked const clk = e.target; // Clean #player to make room. IO.player.replaceChildren(); /* ** Match clicked tag #id to <img> */ if (clk.matches('.rps')) { switch (clk.id) { case 'rock': IO.player.insertAdjacentHTML('afterbegin', `<img src='https://www.biography.com/.image/ar_16:9%2Cc_fill%2Ccs_srgb%2Cg_faces:center%2Cq_auto:good%2Cw_1920/MTc5NjIyODM0ODM2ODc0Mzc3/dwayne-the-rock-johnson-gettyimages-1061959920.webp' height='150'>`); break; case 'paper': IO.player.insertAdjacentHTML( 'afterbegin', `<img src='https://d1csarkz8obe9u.cloudfront.net/posterpreviews/notebook-paper-background-design-template-c114c2ed2104bd8b815cf7fbb2f34f44_screen.jpg?ts=1636989881' height='150'>`); break; case 'scissors': IO.player.insertAdjacentHTML( 'afterbegin', `<img src='https://smithsverdict.files.wordpress.com/2013/02/johnny-depp-as-edward-scissorhands-1990.jpeg' height='150'>`); break; default: break; } } } #objects { display: flex; justify-content: space-evenly; } object { display: block; margin: 0 15px; cursor: pointer; } #player { width: auto; max-height: 150px; text-align: center; } img { object-fit: contain; } <form id="RPS"> <fieldset id='objects'> <legend>Pick One</legend> <object id="rock" class="rps">🪨</object> <object id="paper" class="rps">🧻</object> <object id="scissors" class="rps">✂</object> </fieldset> <fieldset id="player"> <legend>Player</legend> </fieldset> <fieldset id='opponent'> <legend>Opponent</legend> </fieldset> </form>Los elementos HTML con una identificación se colocan directamente en las variables de JavaScript. No es el caso de las clases (ya que varios elementos html pueden tener el mismo nombre de clase).
Así que si usarías
<div id="user"> <img id="select" id="rock" src="images/rock-removebg-preview.png" onclick="addImg()"> <img id="select" id="paper" src="images/paper-removebg-preview.png" > <img id="select" id="scissors" src="images/scissors-removebg-preview.png" > </div> <div id="player-box"></div> Tu código debería funcionar. De lo contrario, si necesita usar nombres de clase, use const rock = document.querySelector('.rock') y const playerBox = document.querySelector('.player-box') .
Además, no estoy seguro de por qué está eliminando el atributo onclick solo para agregar el mismo oyente nuevamente. Además, al agregar el detector de eventos, el nombre del evento es 'clic' y no 'onclick'.
Solo cree la nueva imagen una vez, si aún no se ha creado. Al hacer clic, copie el atributo src de la imagen en la que se hizo clic en la creada dentro del div de playerbox .
Vea cómo funciona ejecutando el fragmento y haciendo clic en una de las tres imágenes...
// this "lazy" getter for playerImg will either return or create the img function playerImg() { let playerImg = document.getElementById('playerimg'); if (!playerImg) { playerImg = document.createElement('img'); playerImg.id = 'playerimg'; document.getElementById('playerbox').appendChild(playerImg); } return playerImg; } // set the source attribute of the playerImg function setPlayerImg(src) { playerImg().setAttribute('src', src); } // get the rock, paper, scissors elements with their common class const imgs = document.getElementsByClassName("myclass"); // for each, add a click handler that calls our src setting function for (let i = 0; i < imgs.length; i++) { const el = imgs[i]; el.addEventListener('click', () => setPlayerImg(el.src), false); } <div class="user"> <img class="rock myclass" src="https://dummyimage.com/100x100/0f0/000" /> <img class="paper myclass" src="https://dummyimage.com/100x100/ff0/000" /> <img class="scissors myclass" src="https://dummyimage.com/100x100/0ff/000" /> </div> <div id="playerbox"></div>