Need a little help with this code


#1


here is the code and its working but how do i make it give an image instead of a prompt?
for example: user choise is rock user wins, show image of  rock

var userChoice = prompt("Do you choose rock, paper or scissors?");

var computerChoice = Math.random();
  if (computerChoice < 0.34) {
	computerChoice = "rock";
  } else if(computerChoice <= 0.67) {
	computerChoice = "paper";
  } else {
	computerChoice = "scissors";
  } 
  //console.log("Computer chooses: " + computerChoice);

var compare = function(choice1,choice2) {
    
    if (choice1 === choice2) {
        
        return "The result is a tie!" + " " + "Lets play again." ;
    }
    
    else if (choice1 === "rock") {
        
        if (choice2 === "scissors") {
            return "rock wins" + "<br>" + "You beat the computer, nice job!";
        }
        else {
            return "paper wins" + "<br>" + "Your really smart computer beat you.";
        }
    }
    
    else if (choice1 === "paper") {
        
        if (choice2 === "rock") {
            return "paper wins" + "<br>" + "You beat the computer, nice job!";
        }
        else {
            return "scissors wins" + "<br>" + "Your really smart computer beat you.";
        }
            
    }
    
    else if (choice1 === "scissors") {
        
        if (choice2 === "rock") {
            return "rock wins" + "<br>" + "Your really smart computer beat you.";
        }
        else {
            return "scissors win" + "<br>" + "You beat the computer, nice job!";
        }
    }
    
    
    } //closes compare function

    
   document.write("Computer chose: " + computerChoice + "<br>");
   document.write(compare(userChoice,computerChoice));


#2

don't use document.write(), use document.getElementById() and innerHTML (check MDN docs for this), so things don't ovewrite.

You only want to show the rock if they won? you will need a way to determine the user actually won, you could use boolean value:

var compare = function(choice1,choice2) {
    won = false
    if (choice1 === choice2) {
        
        return "The result is a tie!" + " " + "Lets play again." ;
    }
    
    else if (choice1 === "rock") {
        
        if (choice2 === "scissors") {
            won = true
            return "rock wins" + "<br>" + "You beat the computer, nice job!";
        }
        else {
            return "paper wins" + "<br>" + "Your really smart computer beat you.";
        }

add won=true to all cases where use wins, then we can do:

if (won){
document.getElementById('output').innerHTML = "<img src="+userChoice+".jpg>"
}

just make sure the source matches


How do i make this work?
#3

im not sure how to do this can you show me the code and try to explain?
thx


#4

MDN - getDocumentById
MDN - innerHTML

there is a demonstration:

document.getElementById('output').innerHTML = "<img src="+userChoice+".jpg>"

make sure to make an element (div for example) with the right id (outut in my example)


#5

i dont know how to that
can you put it in my code so i can check if its working?


#6

No, i don't do that. You need to code it. You need to learn, i can help you, that is fine

what code do you have so far?


#7

so far i have this

var userChoice = prompt("Do you choose rock, paper or scissors?");

var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
//console.log("Computer chooses: " + computerChoice);

var compare = function(choice1,choice2) {

if (choice1 === choice2) {

    won = true

    return "The result is a tie!" + " " + "Lets play again." ;
}

else if (choice1 === "rock") {



    if (choice2 === "scissors") {

        won = true

        return "rock wins" + "<br>" + "You beat the computer, nice job!";
    }
    else {
        return "paper wins" + "<br>" + "Your really smart computer beat you.";
    }
}

else if (choice1 === "paper") {

    won = true

    if (choice2 === "rock") {
        return "paper wins" + "<br>" + "You beat the computer, nice job!";
    }
    else {
        return "scissors wins" + "<br>" + "Your really smart computer beat you.";
    }

}

else if (choice1 === "scissors") {

    won = true

    if (choice2 === "rock") {
        return "rock wins" + "<br>" + "Your really smart computer beat you.";
    }
    else {
        return "scissors win" + "<br>" + "You beat the computer, nice job!";
    }
}


}

if (won){
document.getElementById('output').innerHTML = ""
}

document.getElementById()

and do i need to name the jpg the same as the user choice?


#8

else if (choice1 === "paper") {

    won = true // wrongly placed, we haven't yet determined user won?

    if (choice2 === "rock") {
        // you should place it here
        return "paper wins" + "<br>" + "You beat the computer, nice job!";
    }

see comments

src is short for source, it should match where ever you have the image located. My example was just if you have a rock.jpg image in the same directory as the html and JS file


#9

something like this?
i put the js file and the jpg in the same folder

var userChoice = prompt("Do you choose rock, paper or scissors?");

var computerChoice = Math.random();
  if (computerChoice < 0.34) {
	computerChoice = "rock";
  } else if(computerChoice <= 0.67) {
	computerChoice = "paper";
  } else {
	computerChoice = "scissors";
  } 
  //console.log("Computer chooses: " + computerChoice);

var compare = function(choice1,choice2) {
    
    if (choice1 === choice2) {
        
        won = true
        
        return "The result is a tie!" + " " + "Lets play again." ;
    }
    
    else if (choice1 === "rock") {
        
       
        
        if (choice2 === "scissors") {
           
            won = true
            
            return "rock wins" + "<br>" + "You beat the computer, nice job!";
        }
        else {
            return "paper wins" + "<br>" + "Your really smart computer beat you.";
        }
    }
    
    else if (choice1 === "paper") {
        
        
        
        if (choice2 === "rock") {
            
            won = true
            
            return "paper wins" + "<br>" + "You beat the computer, nice job!";
        }
        else {
            return "scissors wins" + "<br>" + "Your really smart computer beat you.";
        }
            
    }
    
    else if (choice1 === "scissors") {
        
        won = true
        
        if (choice2 === "rock") {
            return "rock wins" + "<br>" + "Your really smart computer beat you.";
        }
        else {
            return "scissors win" + "<br>" + "You beat the computer, nice job!";
        }
    }
    
    
    } 

if (won){
document.getElementById('output').innerHTML = "<img src="rock.jpg>"
}

document.getElementById()2

#10

here:

else if (choice1 === "scissors") {

    won = true

    if (choice2 === "rock") {
        return "rock wins" + "<br>" + "Your really smart computer beat you.";
    }

won is still wrongly placed? I demonstrated it for one, you should realize that its off at other places as well, coding everything for you and helping are two different things

here:

"<img src="rock.jpg>"

use apostrophes around the image name

this code:

document.getElementById()2

is not doing anything, remove it

did you make a div with id output? getElementById relies on it


#11

srry for wasting your time but im not getting it maby i should try somethign simpler?
i need to make a simple game in javascript for school


#12

well, its certainly not as easy as it sounds, here you go:

var userChoice = prompt("Do you choose rock, paper or scissors?");

var computerChoice = Math.random();
  if (computerChoice < 0.34) {
	computerChoice = "rock";
  } else if(computerChoice <= 0.67) {
	computerChoice = "paper";
  } else {
	computerChoice = "scissors";
  } 
  //console.log("Computer chooses: " + computerChoice);
won = false
var compare = function(choice1,choice2) {
    won = false    
    if (choice1 === choice2) {
        
        won = true
        
        return "The result is a tie!" + " " + "Lets play again." ;
    }
    
    else if (choice1 === "rock") {
        
       
        
        if (choice2 === "scissors") {
           
            won = true
            
            return "rock wins" + "<br>" + "You beat the computer, nice job!";
        }
        else {
            return "paper wins" + "<br>" + "Your really smart computer beat you.";
        }
    }
    
    else if (choice1 === "paper") {
        
        
        
        if (choice2 === "rock") {
            
            won = true
            
            return "paper wins" + "<br>" + "You beat the computer, nice job!";
        }
        else {
            return "scissors wins" + "<br>" + "Your really smart computer beat you.";
        }
            
    }
    
    else if (choice1 === "scissors") {
        
        
        if (choice2 === "rock") {
        won = true
            return "rock wins" + "<br>" + "Your really smart computer beat you.";
        }
        else {
            return "scissors win" + "<br>" + "You beat the computer, nice job!";
        }
    }
    
    
    } 

output = document.getElementById('output')
alert(compare(userChoice, computerChoice))
if (won){
output.innerHTML = "<img src='rock.jpg'>"
}
else {
	output.innerHTML = "you lost"
}

html:

<!DOCTYPE html>
<html>
	<head><title>test</title></head>
	<body>
		<div id="output"></div>
	</body>
	<script src="script.js"></script>
</html>

the script tags is at the end, so the document is loaded first


#13

thank you!!!! your a legend


#14

that code still sucks, here is a better one:

var userChoice = prompt("Do you choose rock, paper or scissors?");

var computerChoice = Math.random();
  if (computerChoice < 0.34) {
	computerChoice = "rock";
  } else if(computerChoice <= 0.67) {
	computerChoice = "paper";
  } else {
	computerChoice = "scissors";
  } 
  //console.log("Computer chooses: " + computerChoice);
won = false
var compare = function(choice1,choice2) {
    won = false    
    if (choice1 === choice2) {
        
        won = true
        
        return "The result is a tie!" + " " + "Lets play again." ;
    }
    
    else if (choice1 === "rock") {
        
       
        
        if (choice2 === "scissors") {
           
            won = true
            
            return "rock wins" + "<br>" + "You beat the computer, nice job!";
        }
        else {
            return "paper wins" + "<br>" + "Your really smart computer beat you.";
        }
    }
    
    else if (choice1 === "paper") {
        
        
        
        if (choice2 === "rock") {
            
            won = true
            
            return "paper wins" + "<br>" + "You beat the computer, nice job!";
        }
        else {
            return "scissors wins" + "<br>" + "Your really smart computer beat you.";
        }
            
    }
    
    else if (choice1 === "scissors") {
        
        
        if (choice2 === "rock") {
        won = true
            return "rock wins" + "<br>" + "Your really smart computer beat you.";
        }
        else {
            return "scissors win" + "<br>" + "You beat the computer, nice job!";
        }
    }
    
    
    } 

output = document.getElementById('output')
winner=compare(userChoice, computerChoice)
if (won){
	elWinner = document.createElement('p')
	elWinner.textContent = winner
	output.appendChild(elWinner);
	image = document.createElement('img')
	image.setAttribute('src', 'rock.jpg')
	output.appendChild(image)
}
else {
	output.textContent = winner
}

#15

thank you verry much for all you help!!! your a nice guy


#16

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.