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)
}
I am trying trying to create a function where when the image is clicked that respective image gets displayed in the player-box div. I tried a few different variation of javascript programs and none of them are working the way I want it to. Any help would be appreciated.
Details are commented in example below
// 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>HTML elements with an id are directly put into javascript variables. It's not the case with classes (since multiple html elements can have the same class name).
So if you'd use
<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>
Your code should work.
Else, if you need to use class names, use const rock = document.querySelector('.rock') and const playerBox = document.querySelector('.player-box').
Also, i'm not sure why you're removing the onclick attribute just to add the same listener again.
Also, when adding the event listener, the name of the event is 'click' and not 'onclick'.
Only create the new image once, if it hasn't been created already. On click, copy the src attribute of the clicked image to the one created inside the playerbox div.
See how it works by running the snippet and clicking one of the three images...
// 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>