CODEWITHSUNDEEP
javascriptswitch-statement
Ashim Adhikari
Ashim Adhikari

Reputation: 1

Using switch statement to show pictures in javascript

I want to make the image1 visible when it is Sunday, image2 visible when it is Monday, and so on, using the switch statement in Javascript. How do i do this?

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display what day it is today.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction()
{
    var x;
    var d=new Date().getDay();
    switch (d)
    {
        case 0:
            x="Today it's Sunday";
            break;
        case 1:
            x="Today it's Monday";
            break;
        case 2:
            x="Today it's Tuesday";
            break;
        case 3:
            x="Today it's Wednesday";
            break;
        case 4:
            x="Today it's Thursday";
            break;
    }
    document.getElementById("demo").innerHTML=x;
}
</script>

<img src="image1.png" id="one"style="visibility:Hidden"/>
<img src="image2.png" id="one"style="visibility:Hidden"/>
<img src="image3.png" id="one"style="visibility:Hidden"/>
<img src="image4.png" id="one"style="visibility:Hidden"/>
<img src="image5.png" id="one"style="visibility:Hidden"/>
</body>
</html>

Upvotes: 0

Views: 4701

Answers (4)

bmaggi
bmaggi

Reputation: 2977

Since JavaScript getDay() function returns 0 for sunday (see: http://www.w3schools.com/jsref/jsref_getday.asp) you dont need to mess around with the indexes, just use a simple for loop like this:

<!DOCTYPE html>


<body>
    <p>Click the button to display what day it is today.</p>
    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>
    <script>
        function myFunction() {
            var x;
            var d = new Date().getDay();
            switch (d) {
                case 0:
                    x = "Today it's Sunday";
                    break;
                case 1:
                    x = "Today it's Monday";
                    break;
                case 2:
                    x = "Today it's Tuesday";
                    break;
                case 3:
                    x = "Today it's Wednesday";
                    break;
                case 4:
                    x = "Today it's Thursday";
                    break;
            }
            document.getElementById("demo").innerHTML = x;
            images = document.getElementsByTagName('img')
            for (var i = 0; i < images.length; i++) {
                if (i != d) {
                    images[i].style.visibility = 'Hidden';
                } else {
                    images[i].style.visibility = 'visible';
                }
            }
        }
    </script>
    <img src="image1.png" id="one" style="visibility:Hidden" />
    <img src="image2.png" id="one" style="visibility:Hidden" />
    <img src="image3.png" id="one" style="visibility:Hidden" />
    <img src="image4.png" id="one" style="visibility:Hidden" />
    <img src="image5.png" id="one" style="visibility:Hidden" />
</body>

Upvotes: 0

lostsource
lostsource

Reputation: 21850

Instead of having five <img> elements, you can have one then simply change its src according to the day value.

HTML Markup

<img id='dayImage'/>

Javascript

var d = new Date().getDay()
var dayImg = document.getElementById('dayImage');
dayImg.src = "image"+d+".png";

Update

If you still need to have five separate images you will need a way to identify each image. As it stands all your images have the same id attribute so you will first need to fix this.

Assuming you change your markup to something like this:

<img src="image1.png" id="dayImg0" style="visibility:hidden"/>
<img src="image2.png" id="dayImg1" style="visibility:hidden"/>
<img src="image2.png" id="dayImg2" style="visibility:hidden"/>
...

You could then display the appropriate image like this

var d = new Date().getDay()
var dayImg = document.getElementById('dayImg'+d);
dayImg.style.visibility = "visible";

Upvotes: 2

Aniket Inge
Aniket Inge

Reputation: 25723

I would slightly modify the HTML page, to this:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display what day it is today.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction()
{
    var x;
    var d=new Date().getDay();
    switch (d)
    {
        case 0:
            x="Today it's Sunday";
            document.getElementById("one").style.display="block";
            break;
        case 1:
            x="Today it's Monday";
            document.getElementById("two").style.display="block";
            break;
        case 2:
            x="Today it's Tuesday";
            document.getElementById("three").style.display="block";
            break;
        case 3:
            x="Today it's Wednesday";
            document.getElementById("four").style.display="block";
            break;
        case 4:
            x="Today it's Thursday";
            document.getElementById("five").style.display="block";
            break;
    }
    document.getElementById("demo").innerHTML=x;
}
</script>

<img src="image1.png" id="one" style="display:none"/>
<img src="image2.png" id="two" style="display:none"/>
<img src="image3.png" id="three" style="display:none"/>
<img src="image4.png" id="four" style="display:none"/>
<img src="image5.png" id="five" style="display:none"/>
</body>
</html>

Upvotes: 0

algorhythm
algorhythm

Reputation: 8728

  • first, give your images different id's like zero, one, ..., four
  • use display:none; instead of visibility:hidden, because display-none not reserves it's required space

see this JSFIDDLE

Upvotes: 0

Related Questions