Switching an image with switch statement

Question

I am creating my first project.

What I am trying to do is be able to switch an image from my unordered list nav-bar using the switch statement. I can easily create a function dedicated to each items in the list but i am working on a long list which will result to an unnecessarily long code hence the Switch statement.

Every time I click on a list item it just doesn't change the default image into an image that it is suppose to change into.

Here is my code so far:

 function changeImage(inobj) { switch (inobj) { case 'L1': document.getElementById('image').src = ['image1.jpg', 'image2.jpg']; break; case 'L2': document.getElementById('image').src = ['image3.jpg', 'image4.jpg']; break; case 'L3': document.getElementById('image').src = ['image5.jpg', 'image6.jpg']; break; case 'L4': document.getElementById('image').src = ['image7.jpg', 'image8.jpg']; break; case 'L5': document.getElementById('image').src = ['image9.jpg', 'image10.jpg']; break; case 'L6': document.getElementById('image').src = ['image11.jpg', 'image12.jpg']; break; case 'L7': document.getElementById('image').src = ['image13.jpg', 'image14.jpg']; break; case 'L8': document.getElementById('image').src = ['image15.jpg', 'image16.jpg']; break; case 'L9': document.getElementById('image').src = ['image17.jpg', 'image18.jpg']; break; case 'L0': document.getElementById('image').src = ['image19.jpg', 'image20.jpg']; break; } } 

 <!-- FIRST GROUP--> <button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><strong>TOP TIER CARRIERS </strong><span class="caret"></span></button> <ul id='parentlist' class="dropdown-menu"> <li id='list' value='L1' onClick='changeImage()'>LIST1</li> <li id='list' value='L2' onClick='changeImage()'>LIST2</li> <li id='list' value='L3' onClick='changeImage()'>LIST3</li> <li id='list' value='L4' onClick='changeImage()'>LIST4</li> <li id='list' value='L5' onClick='changeImage()'>LIST5</li> </ul> </div> <!-- SECOND GROUP--> <button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><strong>TOP TIER CARRIERS </strong><span class="caret"></span></button> <ul id='parentlist' class="dropdown-menu"> <li id='list' value='L6' onClick='changeImage()'>LIST1</li> <li id='list' value='L7' onClick='changeImage()'>LIST2</li> <li id='list' value='L8' onClick='changeImage()'>LIST3</li> <li id='list' value='L9' onClick='changeImage()'>LIST4</li> <li id='list' value='L0' onClick='changeImage()'>LIST5</li> </ul> </div> <center><img src="defaultimage.jpg" id="image" /></center> 

What did I do wrong?! your inputs are greatly appreciated.

Answer 1

Here is an unobtrusive plain JS way of doing what you seem to want

I have fixed your duplicate IDs

 window.addEventListener("load", function(event) { // whe page loaded document.querySelectorAll("li.list").forEach(function(li) { // all LIs li.onclick=function() { // each LI var image = "image"+this.getAttribute("data-image")+".jpg"; console.log(image); // can be removed, only for demonstration document.getElementById("image").src = image; } }); }); 

 <!-- FIRST GROUP--> <div> <button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><strong>TOP TIER CARRIERS </strong><span class="caret"></span></button> <ul class="dropdown-menu parentlist"> <li class='list' data-image='1'>LIST1</li> <li class='list' data-image='2'>LIST2</li> <li class='list' data-image='3'>LIST3</li> <li class='list' data-image='4'>LIST4</li> <li class='list' data-image='5'>LIST5</li> </ul> </div> <!-- SECOND GROUP--> <div> <button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><strong>TOP TIER CARRIERS </strong><span class="caret"></span></button> <ul class="dropdown-menu parentlist"> <li class='list' data-image='6'>LIST1</li> <li class='list' data-image='7'>LIST2</li> <li class='list' data-image='8'>LIST3</li> <li class='list' data-image='9'>LIST4</li> <li class='list' data-image='10'>LIST5</li> </ul> </div> <center><img src="defaultimage.jpg" id="image" /></center> 

You can use this.getAttribute("data-image").replace("L","") if you want to keep the "L1" format

Answer 2

Try with this code Used only two images in snippet

  function changeImage(inobj) { switch (inobj) { case 'L1': document.getElementById('image').src = 'http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153'; break; case 'L2': document.getElementById('image').src = 'https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg'; break; case 'L3': document.getElementById('image').src = 'http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153'; case 'L4': document.getElementById('image').src = 'https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg'; break; case 'L5': document.getElementById('image').src = 'http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153'; break; case 'L6': document.getElementById('image').src = 'https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg'; break; case 'L7': document.getElementById('image').src = 'http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153'; break; case 'L8': document.getElementById('image').src = 'https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg'; break; case 'L9': document.getElementById('image').src = 'http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153'; break; case 'L0': document.getElementById('image').src = 'https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg'; break; } } 

 <div> <button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><strong>TOP TIER CARRIERS </strong><span class="caret"></span></button> <ul id='parentlist' class="dropdown-menu"> <li id='list' value='L1' onClick='changeImage("L1")'>LIST1</li> <li id='list' value='L2' onClick='changeImage("L2")'>LIST2</li> <li id='list' value='L3' onClick='changeImage("L3")'>LIST3</li> <li id='list' value='L4' onClick='changeImage("L4")'>LIST4</li> <li id='list' value='L5' onClick='changeImage("L5")'>LIST5</li> </ul> </div> <!-- SECOND GROUP--> <button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><strong>TOP TIER CARRIERS </strong><span class="caret"></span></button> <ul id='parentlist' class="dropdown-menu"> <li id='list' value='L6' onClick='changeImage("L6")'>LIST1</li> <li id='list' value='L7' onClick='changeImage("L7")'>LIST2</li> <li id='list' value='L8' onClick='changeImage("L8")'>LIST3</li> <li id='list' value='L9' onClick='changeImage("L9")'>LIST4</li> <li id='list' value='L0' onClick='changeImage("L0")'>LIST5</li> </ul> </div> <center><img src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" id="image" /></center> 

Answer 3

What is mostly wrong on your code is that you are assigning an array where it should be a string, you can fix it with:

document.getElementById('image').src = 'image2.jpg';

Also, Id's are suposed to be unique.

If you want the image to be switched between the two options everytime the user clicks on it, than you can do something like this:

function changeImage(inobj) {
    switch (inobj) {
        case 'L1':
            document.getElementById('image').src = document.getElementById('image').src == 'image1.jpg' ? 'image2.jpg' : 'image1.jpg';
            break;

If you assign a unique ID to every li you can make things more interesting, and have the function receive the id, so you don't need the switch. Supose the id's are L1, L2, ...:

function changeImage(imageId) {
    imageNumber = imageId.substr(1);
    nextImageNumber = n % 2 == 0 ? imageNumber - 1 : imageNumber + 1
    document.getElementById('imageId').src = 'image' + nextImageNumber + '.jpg';
}

Answer 4

There were multiple problems with the code, but the general approach is fine (for beginners)

You can only use id s once; they are unique identifiers, if you want to handle multiple elements as a group, use class instead

The img source is a string, you were trying to assign an array of strings

You failed to pass the reference of the clicked element to the function, that is why I've added the this to changeImage() ; that will hold the clicked element

li s can not have value attributes, that is reserved for input types only (as far as I know), so I've replaced it to data-value

the data-xxx is a flexible attribute that you can use on (i think) any element, and you can substitute simple strings to the xxx part

 function changeImage(inobj) { switch (inobj.getAttribute('data-value')) { case 'L1': document.getElementById('image').src = 'http://via.placeholder.com/100?text=L1'; break; case 'L2': document.getElementById('image').src = 'http://via.placeholder.com/100?text=L2'; break; case 'L3': document.getElementById('image').src = 'http://via.placeholder.com/100?text=L3'; break; case 'L4': document.getElementById('image').src = 'http://via.placeholder.com/100?text=L4'; break; case 'L5': document.getElementById('image').src = 'http://via.placeholder.com/100?text=L5'; break; case 'L6': document.getElementById('image').src = 'http://via.placeholder.com/100?text=L6'; break; case 'L7': document.getElementById('image').src = 'http://via.placeholder.com/100?text=L7'; break; case 'L8': document.getElementById('image').src = 'http://via.placeholder.com/100?text=L8'; break; case 'L9': document.getElementById('image').src = 'http://via.placeholder.com/100?text=L9'; break; case 'L0': document.getElementById('image').src = 'http://via.placeholder.com/100?text=L0'; break; } } 

 <!-- FIRST GROUP--> <button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><strong>TOP TIER CARRIERS </strong><span class="caret"></span></button> <ul id='parentlist' class="dropdown-menu"> <li class='list' data-value='L1' onClick='changeImage(this)'>LIST1</li> <li class='list' data-value='L2' onClick='changeImage(this)'>LIST2</li> <li class='list' data-value='L3' onClick='changeImage(this)'>LIST3</li> <li class='list' data-value='L4' onClick='changeImage(this)'>LIST4</li> <li class='list' data-value='L5' onClick='changeImage(this)'>LIST5</li> </ul> </div> <!-- SECOND GROUP--> <button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><strong>TOP TIER CARRIERS </strong><span class="caret"></span></button> <ul id='parentlist' class="dropdown-menu"> <li class='list' data-value='L6' onClick='changeImage(this)'>LIST1</li> <li class='list' data-value='L7' onClick='changeImage(this)'>LIST2</li> <li class='list' data-value='L8' onClick='changeImage(this)'>LIST3</li> <li class='list' data-value='L9' onClick='changeImage(this)'>LIST4</li> <li class='list' data-value='L0' onClick='changeImage(this)'>LIST5</li> </ul> </div> <center><img src="http://via.placeholder.com/100?text=default" id="image" /></center>