.Innerhtml Steen papier schaar.

Eerder probleem is inmiddels opgelost! REST NOG NIET

Spoiler tonen

Hallo,

Ik heb een steen papier schaar script gemaakt, deze vond ik iets wat simpel dus heb ik er voor gekozen om scores bij te houden.
wanneer ik het volgende doe geeft hij de score in de console de score weer:

Codeblok (script.js):

1
2

console.log(computerScore);
console.log(playerScore);

Hoe kan ik er nu voor zorgen dat deze score op mn webpagina te zien is?

Dit staat in mn html:

Codeblok (index.html):

1
2

Player score:

0

Computer score:

0

Nu heb ik al lopen proberen met innerhtml maar dat lukte me niet, weet iemand hoe ik dit wel moet doen?

Nu heb ik nog een vraag...
Hoe kan ik er voor zorgen dat er een pop-up scherm komt wanneer iemand gewonnen heeft?
Op dit scherm moet je kunnen klikken op een knop waarop staat "Speel Opnieuw"
Als je wint staat er "Gefeliciteerd je hebt gewonnen", Als je verliest "Je hebt verloren"

Ik heb nu dit:

Codeblok (voorbeeld.js):

1
2
3
4
5
6

function winner (){
if(computerScore == 3){
}
else if(playerScore == 3){

}

Als ik dit doe dan stopt ie r helemaal mee

function winner (){
        if(computerScore == 3) {
            
        var opnieuwSpelen = confirm("De computer heeft gewonnen!");    
        if (opnieuwSpelen == true) {
            x = "Probeer opnieuw!";
            document.location.href="index.html";
        }
            
        } else if(playerScore == 3) {
        
        var opnieuwSpelen = confirm("Je hebt gewonnen!");    
        if (opnieuwSpelen == true) {
        x = "Speel nog een keer!";
        document.location.href="index.html";
    }

maar loop verder vast!

jQuery library eraan toevoegen.
En wanneer je dat gedaan hebt, zou ik alles wat geladen moet worden op de pagina in $(function() {}); zetten en dan:

$(function() {
    $(#steenpapierschaarknop).click(function() {
        steenpapierschaarresult = 1;
        if(steenpapierschaarresult == 1) {
            playerScore++;
            $(#playerScore).text(playerScore);
        } else {
            computerScore++;
            $(#computerScore).text(computerScore);
        }
    })
});

Maar zo zou ik het doen
of gewoon:

document.getElementById(playerScore).innerHTML = playerScore;
document.getElementById(computerScore).innerHTML = computerScore;

Eerste probleem is inmiddels opgelost! Nu heb ik nog een vraagje (Zie topic)

Kan je kijken wat er in de console staat?

Als je goede inspringing gebruikt, ziet je code er als volgt uit:

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function winner (){
if(computerScore == 3) {

var opnieuwSpelen = confirm("De computer heeft gewonnen!");
if (opnieuwSpelen == true) {
x = "Probeer opnieuw!";
document.location.href="index.html";
}

} else if(playerScore == 3) {

var opnieuwSpelen = confirm("Je hebt gewonnen!");
if (opnieuwSpelen == true) {
x = "Speel nog een keer!";
document.location.href="index.html";
}

Nu vallen mij de volgende dingen op:

• Je mist twee sluitende accolades aan het eind
• Je maakt variabele x nergens aan

Je kunt overigens de Ok/Cancel niet aanpassen in de javascript confirm. Als je echt Speel nog een keer wilt als knop, dan kun je jQuery dialogs gebruiken. Je kunt ook de text in de confirm message aanpassen naar iets als: Je hebt gewonnen! Wil je nog een keer spelen?

@Vinceyka