Why doesn't this switch statement work?

[StevenHu]

This is for a page that displays a database of thumbnails with an exploded diagram jpg above them to show how the parts go together and what their part numbers are. So when they tap a button for that area of the catalog, like “Front Shock Tower,” the jpg appears at top with the thumbs below.

I am using a switch statement to identify the exploded drawing jpg with the button pushed, like this:

    case "Front Shock Tower":
      picImage = "FrontShockTower.jpg";
      break;

    default:
      picImage = ""; // insert nothing if no other image is associated with the group
  }

Then I display the filename per following script. Then the thumbs display below that. This works fine.

var output = document.getElementById("display"); // the div where the results will be displayed
 
 output.innerHTML=''; // refresh screen between button taps
 output.innerHTML+="<img src='../images/parts/" + picImage + "' alt='' style='width:100%; max-width: 500px'><br>";

My question is, why doesn’t it work if I put the entire image file URL in the case statement like this:

    case "Front Shock Tower":
      picImage = "<img src='../images/parts/FrontShockTower.jpg' alt='' style='width:100%; max-width: 500px'>";
      break;

    default:
      picImage = ""; // insert nothing if no other image is associated with the group
  }

… and try to display it like the following? No image appears.

output.innerHTML+=picImage + "<br>";

I prefer the latter method because not all catalog sections have an image at top. How do I make it work?

[DaveMaxwell]

Did you check the generated html? Is it giving you nothing, or is the img tag malformed?

[StevenHu]

What appears in place of the image is the text of the filename, FrontShockTower.jpg.

Google Developer Tools does not display any error in the Console.

… Ahhh, now I see the issue. I had the same case in the switch twice, but it was following the first one. So it was displaying the filename, as noted above. That was an important clue!

Thanks!

[SamuelCalifornia]

@StevenHu

picImage = “<img src=‘…/images/parts/FrontShockTower.jpg’ alt=‘’ style=‘width:100%; max-width: 500px’>”;

That line builds HTML. There is nothing wrong with that unless it does it wrong. When I have a problem that might exist in a statement like that I make it multiple lines. You could at least put the generated HTML in a variable and log that to the console. Problems are often much easier to see that way.