Forum:

HTML Pages with CSS and JavaScript

JavaScript slot game

Greenhorn

Posts: 2

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I'm trying to make a slot game using javascript. I need some help here because i'm stuck. I used an Array to store the images. I calculate an random number so it takes an image from the array an place it into the src in the HTML file. Then it looks if the images are the same and calculate the ouput in €. If the user clicks on the spin button it had to do the functions.

The eventListener does't do anything when i click it? Does anybody know why they don't listen to the clicks?

var omzet = document.getElementById('omzet');
var inzet = document.getElementById('inzet').options.value;

var afbeeldingArray = ['1.png', '2.png', '3.png', '4.png', '5.png'];
var afbeeldingen = document.querySelectorAll('img');

function randomPlaatje() {
    var image = Math.floor((Math.random() * afbeeldingArray.length));
    var afb = "img/" + afbeeldingArray[image];
    return afb;
}

var i;
for(i = 0; i <= afbeeldingArray.length; i++){
    afbeeldingen[i].src = randomPlaatje();
}

function berekenOmzet(afb1, afb2, afb3){
    omzet = 0;
        if(afb1 == afb2 && afb2 == afb3 && afb1 == afb3) { omzet.innerHTML += inzet; }
            else { omzet.innerHTML -= inzet; }
}

function gebruikPlaatje(){
    var afb1 = randomPlaatje();
    var afb2 = randomPlaatje();
    var afb3 = randomPlaatje();

document.getElementById('img1').src = afb1;
    document.getElementById('img2').src = afb2;
    document.getElementById('img3').src = afb3;

setTimeout(function() {
        berekenOmzet(afb1, afb2, afb3);
    }, 1000); // 1000 = 1 seconde
}

function start(){
    setTimeout(function() {
        gebruikPlaatje();
    }, 1000); // 1000 = 1 seconde
}

var spin = document.getElementById('spin');
var reset = document.getElementById('reset');

spin.addEventListener('click', start);

reset.addEventListener('click', function() {
    alert('Hallo');
    omzet = 0;
});

Slot Machine

Bear Bibeault

Sheriff

Posts: 67750

173

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Welcome to the Ranch!

How have you verified that the event listeners are not getting called? Setting breakpoints on the appropriate lines of code?

Have you verified that your element references are correct in the first place? (Hint: they're not.)

And why aren't you using jQuery to make this all much much simpler?

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

jor kol

Greenhorn

Posts: 2

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I can only use js for this assignement

Bear Bibeault

Sheriff

Posts: 67750

173

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You answered only the last of my 4 questions.

Set a breakpoint in the code and inspect your variables. Which one is wrong?

[Asking smart questions] [About Bear] [Books by Bear]

Peer Reynders

Bartender

Posts: 2968

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

If you haven't you should have a quick look over the Javascript Links (Wiki forum at Coderanch)
Right now you should be interested in the "Debugging" section.

For example if you are allowed to use Google Chrome/Chromium as your browser you should be looking at:
Chrome DevTools Overview - Google Chrome: Debugging JavaScript
and
Debugging JavaScript - Google Chrome: Debugging with breakpoints
so that you can follow Bear's advice:

Bear Bibeault wrote:Set a breakpoint in the code [, step through your code] and inspect your variables. Which one is wrong?[For example, is any variable null or undefined when you don't expect it to be - is there an error message in the JavaScript console that may indicate that something has gone wrong?]

Switching from electric heat to a rocket mass heater reduces your carbon footprint as much as parking 7 cars. Tiny ad:

We need your help - Coderanch server fundraiser

https://coderanch.com/wiki/782867/Coderanch-server-fundraiser