CODEWITHSUNDEEP
javascript
user2612619
user2612619

Reputation: 1129

onclick In An Image Is Never Being Executed

I have an image that has two the following code, the problem is when it is being click nothing is happening.

<div style="float: left;"><input onload="setValue()" type="image" src="img/board new/blank.png" name="saveForm" class="btTxt submit" id="spinner" onclick="spin()" />  </div>

Here is my full code.

<html>

<style>

body {
    background-image: url(img/background4.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


</style>

<script>

var stop = false;
var spinResult;
var gameOver = false;
var oldHTML;
var newHTML;

function setValue() {

var rollResult = location.search.substr(location.search.indexOf("=")+1);
document.getElementById('own').innerHTML = "You own " + rollResult + " piece(s) on the board.";

}

function advanceSpinner(i) {
i = i || 1;

if (stop == false) {
if (i > 10) 
i = 1; // change this to return if you don't want to run forever
document.getElementById("spinner").src = "img/board new/" + i + ".png";
spinResult = i;
setTimeout(function () { advanceSpinner(i + 1) }, 50);
}
}



function spin() {

var start = Math.floor(Math.random() * (10 - 1 + 1)) + 1
advanceSpinner(start);
setTimeout(function () {stop = true;}, 4000);
setTimeout(function () {checkWin();}, 4050);

}

function checkWin() {
/*
if (rollResult == 1 && spinResult == 1) {
    alert("Win");
} else if (rollResult == 2 && spinResult == 1) {
    alert("Win");
} else if (rollResult == 2 && spinResult == 3) {
    alert("Win");
} else if (rollResult == 3 && spinResult == 1) {
    alert("Win");
} else if (rollResult == 3 && spinResult == 3) {
    alert("Win");
} else if (rollResult == 3 && spinResult == 6) {
    alert("Win");
} else if (rollResult == 4 && spinResult == 1) {
    alert("Win");
} else if (rollResult == 4 && spinResult == 3) {
    alert("Win");
} else if (rollResult == 4 && spinResult == 6) {
    alert("Win");
} else if (rollResult == 4 && spinResult == 8) {
    alert("Win");
}
*/

var fadeEffect=function(){
    return{
        init:function(id, flag, target){
            this.elem = document.getElementById(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
        },
        tween:function(){
            if(this.alpha == this.target){
                clearInterval(this.elem.si);
            }else{
                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value
            }
        }
    }
}();


</script>

<head>
<title>Power Up! - Spin</title>
</head>

<body>

<div style="float: left;"><input onload="setValue()" type="image" src="img/board new/blank.png" name="saveForm" class="btTxt submit" id="spinner" onclick="spin()" />  </div>

</br>
<h2 id="own"> </h1>

<h1 id='result'> </h1>

</body>


</html>

Upvotes: 0

Views: 62

Answers (3)

Alex Shilman
Alex Shilman

Reputation: 1547

Working demo here look at the console

var stop = false;
function setValue() {
rollResult = location.search.substr(location.search.indexOf("=") + 1);
}

function spin() {

var start = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
advanceSpinner(start);
setTimeout(function () {
    stop = true;
}, 4000);
//setTimeout(function () {checkWin();}, 4050);
}

function advanceSpinner(i) {
  i = i || 1;
  if (!stop) {
    if(i > 10)i = 1;
        console.log("img/board new/" + i + ".png");
        document.getElementById("spinner").src = "img/board new/" + i + ".png";
        spinResult = i;
        setTimeout(function () {
            advanceSpinner(i + 1);
        }, 50);

   }


    var spinResult;
    var gameOver = false;
    var oldHTML;
    var newHTML;
    var rollResult;
    var start;

   function setValue() {

    rollResult = location.search.substr(location.search.indexOf("=") + 1);
    //document.getElementById('own').innerHTML = "You own " + rollResult + " piece(s) on the   board.";

    }
}


function checkWin() {
 /*
if (rollResult == 1 && spinResult == 1) {
 alert("Win");
} else if (rollResult == 2 && spinResult == 1) {
 alert("Win");
} else if (rollResult == 2 && spinResult == 3) {
  alert("Win");
} else if (rollResult == 3 && spinResult == 1) {
alert("Win");
} else if (rollResult == 3 && spinResult == 3) {
alert("Win");
} else if (rollResult == 3 && spinResult == 6) {
alert("Win");
} else if (rollResult == 4 && spinResult == 1) {
alert("Win");
} else if (rollResult == 4 && spinResult == 3) {
alert("Win");
} else if (rollResult == 4 && spinResult == 6) {
alert("Win");
} else if (rollResult == 4 && spinResult == 8) {
alert("Win");
}
*/
}

var fadeEffect = function () {
return {
    init: function (id, flag, target) {
        this.elem = document.getElementById(id);
        clearInterval(this.elem.si);
        this.target = target ? target : flag ? 100 : 0;
        this.flag = flag || -1;
        this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
        this.elem.si = setInterval(function () {
            fadeEffect.tween();
        }, 20);
    },
    tween: function () {
        if (this.alpha == this.target) {
            clearInterval(this.elem.si);
        } else {
            var value = Math.round(this.alpha + ((this.target - this.alpha) * 0.05)) + (1 * this.flag);
            this.elem.style.opacity = value / 100;
            this.elem.style.filter = 'alpha(opacity=' + value + ')';
            this.alpha = value;
        }
     }
 };
}();

Upvotes: 0

cubitouch
cubitouch

Reputation: 1937

I looked into your source code using JSFiddle, I correct many thing like ";" end of statements :

http://jsfiddle.net/uz3gk/

JS

function setValue() {
    rollResult = location.search.substr(location.search.indexOf("=") + 1);
}



var stop = false;
var spinResult;
var gameOver = false;
var oldHTML;
var newHTML;
var rollResult;
var start;

function setValue() {

    rollResult = location.search.substr(location.search.indexOf("=") + 1);
    //document.getElementById('own').innerHTML = "You own " + rollResult + " piece(s) on the board.";

}


function advanceSpinner(i) {
    console.log(i);
    i = i || 1;

    console.log(stop);
    if (stop === false) {
        if (i < 10) {
//            i = 1;
            document.getElementById("spinner").src = "img/board new/" + i + ".png";
            spinResult = i;
            setTimeout(function () {
                advanceSpinner(i + 1);
            }, 50);
        }
    }
}


function spin() {
    alert("Test if being executed.");
    start = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
    advanceSpinner(start);
    setTimeout(function () {
        stop = true;
    }, 4000);
    setTimeout(function () {
        checkWin();
    }, 4050);
}

function checkWin() {
    /*
if (rollResult == 1 && spinResult == 1) {
    alert("Win");
} else if (rollResult == 2 && spinResult == 1) {
    alert("Win");
} else if (rollResult == 2 && spinResult == 3) {
    alert("Win");
} else if (rollResult == 3 && spinResult == 1) {
    alert("Win");
} else if (rollResult == 3 && spinResult == 3) {
    alert("Win");
} else if (rollResult == 3 && spinResult == 6) {
    alert("Win");
} else if (rollResult == 4 && spinResult == 1) {
    alert("Win");
} else if (rollResult == 4 && spinResult == 3) {
    alert("Win");
} else if (rollResult == 4 && spinResult == 6) {
    alert("Win");
} else if (rollResult == 4 && spinResult == 8) {
    alert("Win");
}
*/
}

var fadeEffect = function () {
    return {
        init: function (id, flag, target) {
            this.elem = document.getElementById(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function () {
                fadeEffect.tween();
            }, 20);
        },
        tween: function () {
            if (this.alpha == this.target) {
                clearInterval(this.elem.si);
            } else {
                var value = Math.round(this.alpha + ((this.target - this.alpha) * 0.05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value;
            }
        }
    };
}();

Was this what you were looking for ?

EDIT :

I corrected th JSFiddle, could you check if that ok for you now ?

Upvotes: 1

acarlon
acarlon

Reputation: 17264

Shouldn't 

if (i > 10)

be 

if (i < 10)

Also you will want to change

setTimeout(function () { advanceSpinner(i + 1); }, 50);

to 

i++;
setTimeout(function () { advanceSpinner(i); }, 50);

otherwise it never ends.

I would also suggest changing i to a global var spinCount otherwise you are likely to confuse i with other variables.

Upvotes: 1

Related Questions