如何从用Java语言输入的图像中获取用户输入值？

Question

//const choices = ['Rock', 'Paper', 'Scissors'] in image form
const choices = window.document.getElementsByClassName('Images');
console.log(choices)

var userInput = window.document.getElementsByTagName('input')
console.log(userInput)


//take the image input and use it as a variable for the playerSelection part.
function playerSelection() {
    let answer = prompt('Rock, paper, scissors').toLowerCase()
    return answer
}

<div class="Options">
    <input type ="image" class="Images" src ="https://image.flaticon.com/icons/svg/925/925141.svg" alt=""/>
    <input type ="image" class="Images" src="https://image.flaticon.com/icons/svg/2583/2583491.svg" alt style="padding-left: 50px; padding-right: 50px;">
    <input type ="image" class="Images" src="https://image.flaticon.com/icons/svg/494/494672.svg" alt="">
    </div>

因此，我要做的是，当用户单击其中一张图片时，从HTML文件获取用户输入。因此，我以后可以在我的javascript文件中使用它并将其保存到变量中。我已经尝试过getElementsByTagName，但是开发者控制台中什么都没有显示。我不确定的是如何使用Google Developer工具测试用户输入，以使我知道我的代码是否正常运行。

Answer 1

图像输入就像按钮一样。您应该给每个输入一个值。然后添加一个单击事件侦听器，以获取被单击按钮的值。

//const choices = ['Rock', 'Paper', 'Scissors'] in image form

const output = document.querySelector("#output");
const choices = document.querySelectorAll('.Images');

choices.forEach(i => i.addEventListener("click", function() {
  playerSelection(this.value)
}));

//take the image input and use it as a variable for the playerSelection part.
function playerSelection(answer) {
  output.innerText = answer;
}

.Images {
  width: 100px;
  height: 100px;
}

<div class="Options">
  <input type="image" value="rock" class="Images" src="https://image.flaticon.com/icons/svg/925/925141.svg" alt="" />
  <input type="image" value="paper" class="Images" src="https://image.flaticon.com/icons/svg/2583/2583491.svg" alt style="padding-left: 50px; padding-right: 50px;">
  <input type="image" value="scissors" class="Images" src="https://image.flaticon.com/icons/svg/494/494672.svg" alt="">
</div>
You selected: <span id="output"></span>