Question

我正在尝试显示用户从列表中选择的图像，但屏幕上什么都看不到。

<!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>

Answer 1

那是因为没有人调用您的getValue函数。您onchange之后需要=，就像onchange="getvalue()"一样。 But, you shouldn't be setting up event handlers in HTML in the first place.每当在select中进行选择时，都需要调用该函数，因此需要为其设置change事件处理程序，并且应该在JavaScript中设置该处理程序

此外，您正在尝试设置图像的src，然后再创建它。您需要交换这两行。

此外，您的文档中没有head部分，您的style元素应该放在其中，而不是body中。

最后，您的代码将创建一个新图像，并在每次进行选择时将其添加到文档中，因此您可以显示许多图像。如果您只想显示一张图像（最近选择的图像），则无需创建新图像并将其附加到文档中，只需在页面中的所需位置创建一个静态img元素，但不要不要在HTML中设置其src。然后，您的JavaScript所有需要做的就是访问该预先存在的图像并设置其src，而不是在附加图像之后生成一个新图像。

<!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>

显示所选图像，网页

1 个答案: