Как получить значение пользовательского ввода из изображения в Javascript?

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, чтобы я знал, что мой код работает правильно.

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>