时间戳

首页 > 解决方案 > 如何将空字符串从 HTML 和 JavaScript 中的 onclick 更改为字符串

javascript - 如何将空字符串从 HTML 和 JavaScript 中的 onclick 更改为字符串

问题描述

在下面的代码中，即使单击 HTML 中的 svg，我也无法将 playerInput 更改为以下元素之一。当我控制台日志时，他们返回空字符串，我可以知道如何解决这个问题吗？

<html>
    <input type="image" src="images/rock.svg" class="rock" onclick ="playerClick()">
    <input type="image" src="images/scissor.svg" class="scissor" onclick ="playerClick()">
    <input type="image" src="images/paper.svg" class="paper" onclick ="playerClick()">

<script>
    let playerInput = "";
    
    function playerClick() {
    if (document.getElementsByClassName("rock")){
     playerInput === "Rock"
    } else if (document.getElementsByClassName("scissor")){
     playerInput === "Scissor"
    } else if (document.getElementsByClassName("paper")){
     playerInput === "Paper"
    } 
    return playerInput;
    }
</script>

标签： javascripthtml

解决方案

这样您就可以console.log点击图像。

function playerClick(selection){
  console.log(selection)
}
  <input type="image" src="images/rock.svg" class="rock" onclick ="playerClick('rock')">
  <input type="image" src="images/scissor.svg" class="scissor" onclick ="playerClick('scissor')">
  <input type="image" src="images/paper.svg" class="paper" onclick ="playerClick('paper')">

如果你想使用并返回基于 的值class，你可以这样做：

let inputs = document.querySelectorAll('input');

inputs.forEach(input => input.addEventListener('click', ()=> alert(input.classList)));
<input type="image" src="images/rock.svg" class="rock">
<input type="image" src="images/scissor.svg" class="scissor">
<input type="image" src="images/paper.svg" class="paper">

推荐阅读