is there a way to have a specific image appear based on user input?

June 22, 2022

I’m trying to create a rock, paper, scissors game and I created a button where the user types in either rock, paper, or scissors and based on what they type, they press enter and the option they chose should appear (for ex: they choose rock and a hand in a fist should appear.
IM NOT ASKING ANYONE TO GIVE ME AN ANSWER. i’m wondering if anyone could point me in a direction of what I can study or look up to accomplish this because I’ve googled a billion things and nothing matches what I want to do.
I originally attempted using my index.html page and used img src to place the images there and link it to my button but that hasn’t worked and i’m confused. I said I don’t want the answer I just need guidance on what direction to head in because I have no clue where to start.

>Solution :

I’ve created a short example based on your explanation

<input type="text" id="textInput" />
<button onclick="checkInput()">check</button>
<img src="" id="image"/>

And here is the JS

function checkInput(){
let input = document.querySelector("#textInput").value
var imgSrc=""
switch(input){
case "rock":
 imgSrc="/rock-image-source"
 break;
case "scissors":
 imgSrc="/scissors-image-source"
 break;
case "paper":
 imgSrc="/paper-image-source"
 break;
default:
 break;
}
document.querySelector("#image").src=imgSrc
}

you may use the if-else statement instead of switch-case