單擊影像應僅使用JavaScript在另一個div中顯示相應的影像

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 程式變體，但它們都沒有按照我想要的方式作業。任何幫助，將不勝感激。

uj5u.com熱心網友回復：

詳細資訊在下面的示例中注釋

// 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,c_fill,cs_srgb,g_faces:center,q_auto:good,w_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>

uj5u.com熱心網友回復：

如果尚未創建新影像，則僅創建一次。單擊時，將單擊影像的 src 屬性復制到在playerboxdiv 中創建的影像。

通過運行代碼片段并單擊三個影像之一來了解它是如何作業的......

// 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>

uj5u.com熱心網友回復：

帶有 id 的 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')and const playerBox = document.querySelector('.player-box')。

另外，我不確定您為什么要洗掉該onclick屬性只是為了再次添加相同的偵聽器。另外，添加事件監聽器時，事件的名稱是“click”而不是“onclick”。

標籤：javascript html css

上一篇：簡單的JavaScript密碼檢查器在第一次迭代后不會回圈

下一篇：AddEventListener點擊事件不起作用