При нажатии на изображение должно отображаться соответствующее изображение в другом div с использованием только JavaScript

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, и ни одна из них не работает так, как я хочу. Любая помощь будет оценена по достоинству.

Uncaught ReferenceError: камень не определен... вы не присвоили значение «камень».

Elvis Pimentel 17.05.2022 01:29

вы можете определить его значение: "var rock = document.querySelector('.rock');". Кроме того, в playerBox тоже отсутствует объявление.

Elvis Pimentel 17.05.2022 01:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
39
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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>

Голосую за отличный выбор изображений!

danh 17.05.2022 03:03

Другие вопросы по теме