Java Script – Basic Functions, Global Variables, Getting Elements by Tag Name, Event Objects

Posted on August 24, 2015 by

So, today I have made a pretty simple application – and the word pretty stands for small, not for a synonym of beautiful 🙂 The reason for making this application was my awful internet connection – I feel like I am somewhere at the beginning of the 21. centrury and not in 2015. I really did not have much to do, thus I have challenged myself to do it the way I wanted and finally I had it.

Here is how it works – we have 6 pictures, which are a little blurred. If you press one of the pictures, it is automatically “unblurred”, but another random picture of the 6 changes its status. Something like this:

So, what have I done?
First, for the pressing over the pictures, the event onclick was used.
It was assigned to the pictures easily, using the fact that we may unite them in an array and use a for loop to iterate them.
Then I have two other functions – the first ShowAnswer, takes the target of the click event and kindly changes its source. The change of the source is done easily, because of the namings. At the end of the procedure, we define which picture was changed and we call the procedure once more, for another random picture. In order not to go in an endless loop here, we use make this procedure only if our counter is an odd number.

Pretty much that is all I can tell you. The rest is better told by the code. Once I have a better internet, I would upload all of the pictures in GitHub, until them you if you are a windows user you probably have them as well 🙂

Here comes the code:

<html>
<head>
    <title>Game</title>
    <style>
        body{
            margin: 5px;
            background-color:yellow;}
        }
        img{
            margin:5px;
            height:20%;
            width:20%;
            }
        
    </style>
    <script>
        window.onload = init;
        counter = 0;
        function init()
        {
            images = document.getElementsByTagName("img");
            for (var i = 0; i<images.length; i++)
            {
                images[i].onclick = showAnswer;
            }
        }
        
        function generateRandom(fromValue, toValue, withoutValue)
        {
            
            var random_result = Math.floor((Math.random()*toValue)+fromValue);
            
            if (random_result == withoutValue)
            {
                if (withoutValue == 0)
                {
                    random_result = 1;
                }
                else
                {
                    random_result = random_result-1;
                }
            }       
            
            return random_result;
        }
        
        function showAnswer(eventObj)
        {
            var image = eventObj.target;
            var name = image.id;
            var path = image.src;
            
            if (path.indexOf("blur")> -1)
            {
                name = name + ".jpg";
            }
            else
            {
                name = name + "blur.jpg";
            }                        
            image.src = name;
            
            for (var k = 0; k<images.length; k++){
              if (images[k].id == eventObj.target.id)
              {
                var result = k;                
              }   
            }
            
            result = generateRandom(0,images.length,result)
            
            counter ++;            
            if (counter%2==1){ 
                document.images[result].click();
            }
        }   
    </script>
</head>

<body>
    <img id="zero" src="zeroblur.jpg">
    <img id="one" src="oneblur.jpg">
    <img id="two" src="twoblur.jpg">
    <img id="three" src="threeblur.jpg">
    <img id="four" src="fourblur.jpg">
    <img id="five" src="fiveblur.jpg">
</body>
</html>

<html>

<head>

<style>

body{

margin: 5px;

background-color:yellow;}

}

img{

margin:5px;

height:20%;

width:20%;

}

</style>

window.onload = init;

counter = 0;

function init()

{

images = document.getElementsByTagName("img");

for (var i = 0; i<images.length; i++)

{

images[i].onclick = showAnswer;

}

function generateRandom(fromValue, toValue, withoutValue)

{

var random_result = Math.floor((Math.random()*toValue)+fromValue);

if (random_result == withoutValue)

{

if (withoutValue == 0)

{

random_result = 1;

}

else

{

random_result = random_result-1;

}

return random_result;

}

function showAnswer(eventObj)

{

var image = eventObj.target;

var name = image.id;

var path = image.src;

if (path.indexOf("blur")> -1)

{

name = name + ".jpg";

}

else

{

name = name + "blur.jpg";

}

image.src = name;

for (var k = 0; k<images.length; k++){

if (images[k].id == eventObj.target.id)

{

var result = k;

}

result = generateRandom(0,images.length,result)

counter ++;

if (counter%2==1){

document.images[result].click();

}

</script>

</head>

<body>

</body>

</html>

Enjoy it! 🙂

Tagged with: Basic Functions, Event Objects, Getting Elements by Tag Name, Global Variables, javascript