Show selected images, webpage

Question

I am trying to show an image selected by the user from the list, but I do not see anything on the screen.

<!DOCTYPE html>
<html>
<body>
  <style>
    .container {
      position: relative;
    }
    
    .center {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      font-size: 18px;
    }
    
    img {
      width: 100%;
      height: auto;
      opacity: 1;
    }
  </style>

  <p>Images:</p>
  <select id="ImSelect" size="6" onchange "getvalue()">
    <option value="LB_1_000561">LB_1_000561</option>
    <option value="LB_1_000562">LB_1_000562</option>
    <option value="LB_1_000563">LB_1_000563</option>
    <option value="LB_1_000564">LB_1_000564</option>
    <option value="LB_1_000565">LB_1_000565</option>
    <option value="LB_1_000566">LB_1_000566</option>
    <option value="LB_1_000567">LB_1_000567</option>
    <option value="LB_1_000568">LB_1_000568</option>
    <option value="LB_1_000569">LB_1_000569</option>
  </select>

  <div class="container" id="x"></div>

  <script>
    function getvalue() {
      var value_ = document.getElementById("ImSelect").value;
      img.src = "Images/" + value_ + ".jpg";
      var img = document.createElement("img");
      var src = document.getElementById("x");
      src.appendChild(img);
    }
  </script>
</body>
</html>

It may be helpful to open the console when debugging. You would probably see at least one error. — ryan28561, Jul 18 '19 at 16:40
@ryan28561 There wouldn't actually be any errors in this case, evidenced by running the snippet. The function with the errors is never called due to a typo in the HTML. — Tyler Roper, Jul 18 '19 at 16:40
@j08691 I believe that edit may have removed a fair bit of other HTML jankiness, by the way. As Scott points out below, the original HTML doesn't have a `` element. — Tyler Roper, Jul 18 '19 at 16:42
@j08691 You really shouldn't have made that edit because you altered the incorrectness of the HTML in the original code. — Scott Marcus, Jul 18 '19 at 16:47
@ScottMarcus and Tyler Feel free to make any rollbacks you need. Head issue aside, which I doubt is the cause of any issues, the only code change was a removed space in `onchange"getvalue()"` which was caused by the stack snippet tidy button. — j08691, Jul 18 '19 at 16:53
I elected to roll it back and just drop all the HTML in a snippet to keep it runnable but also reflect the original issues. Someone stomp that out if I dun' messed up :) — Tyler Roper, Jul 18 '19 at 16:54

Scott Marcus · Accepted Answer · 2019-07-18T21:18:59.153

That's because nothing ever calls your getValue function. You're onchange needs an = after it, as in onchange="getvalue()". But, you shouldn't be setting up event handlers in HTML in the first place. You need that function to be called whenever you make a selection in your select, so a change event handler needs to be set up for it and that handler should be set up in JavaScript.

Also, you are trying to set the src of your image before you've created it. You need to swap those two lines.

Additionally, you don't have a head section to your document and your style element should go in there, rather than in body.

Finally, your code will create a new image and append it to the document every time a selection is made, so you could wind up with many images showing. If you only want one image showing (the most recently selected one), then instead of creating a new image and appending it to the document, just create a static img element in the page, where you want it, but don't set its src in the HTML. Then, all your JavaScript needs to do is access that pre-existing image and set its src instead of generating a new one an appending it.

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
      position: relative;
    }
    
    .center {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      font-size: 18px;
    }
    
    img { 
      width: 100%;
      height: auto;
      opacity: 1;
    }
</style>
</head>
<body>   
    <p>Images:</p>
    <select id="ImSelect"  size="6">
      <option value="LB_1_000561">LB_1_000561</option>
      <option value="LB_1_000562">LB_1_000562</option>
      <option value="LB_1_000563">LB_1_000563</option>
      <option value="LB_1_000564">LB_1_000564</option>
      <option value="LB_1_000565">LB_1_000565</option>
      <option value="LB_1_000566">LB_1_000566</option>
      <option value="LB_1_000567">LB_1_000567</option>
      <option value="LB_1_000568">LB_1_000568</option>
      <option value="LB_1_000569">LB_1_000569</option> 
    </select>
    
    <div class="container">
      <!-- Each new image will display in this one elmeent -->
      <img id="target" src="" alt="">
    </div>
    
    <script>
    let select = document.getElementById("ImSelect");
    let target = document.getElementById("target");
    
    // Set up the change event hanlder in JavaScript, not in HTML
    select.addEventListener("change", getvalue);
    
    function getvalue() { 
      // Just update the src of the pre-existing img element
      target.src = "Images/" + select.value + ".jpg";
      target.alt = target.src; // Just to show something on the screen for demo
    }
    </script>
</body>
</html>

Can you please edit Code to have only one Image on the page. — Shahgee, Jul 18 '19 at 20:33

Show selected images, webpage

1 Answers1