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)
}
Я пытаюсь создать функцию, в которой при нажатии на изображение соответствующее изображение отображается в div-плеере. Я попробовал несколько разных вариантов программ javascript, и ни одна из них не работает так, как я хочу. Любая помощь будет оценена по достоинству.
вы можете определить его значение: "var rock = document.querySelector('.rock');". Кроме того, в playerBox тоже отсутствует объявление.
HTML-элементы с идентификатором напрямую помещаются в переменные javascript. Это не относится к классам (поскольку несколько элементов html могут иметь одно и то же имя класса).
Итак, если вы будете использовать
<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>
Ваш код должен работать.
В противном случае, если вам нужно использовать имена классов, используйте const rock = document.querySelector('.rock')
и const playerBox = document.querySelector('.player-box')
.
Кроме того, я не уверен, почему вы удаляете атрибут onclick
только для того, чтобы снова добавить того же слушателя.
Кроме того, при добавлении прослушивателя событий имя события — «щелчок», а не «onclick».
Создайте новый образ только один раз, если он еще не создан. При щелчке скопируйте атрибут src изображения, на которое нажали, в атрибут, созданный внутри playerbox
div.
Посмотрите, как это работает, запустив фрагмент и щелкнув одно из трех изображений...
// 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>
Подробности прокомментированы в примере ниже
// 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>
Голосую за отличный выбор изображений!
Uncaught ReferenceError: камень не определен... вы не присвоили значение «камень».