根据下拉香草js更改图像答案

【问题标题】：change image based on dropdown vanilla js根据下拉香草js更改图像
【发布时间】：2021-02-05 15:40:49
【问题描述】：

你好，我是 javascript 新手

我正在尝试根据用户从选择输入中选择的内容来更改图像。

我想链接用户从选择和数组中选择的内容

id 也喜欢它在 javascript 而不是 jquery 中

这是我到目前为止所管理的，但我坚持为什么它告诉我未定义


<html>

<body>

  <style>
    .cta {
      padding: 10px 20px;
      background-color: red;
      color: #ffffff;
      display: block;
      width: 180px;
      text-align: center;
    }
  </style>

  <div>
    <label for="fullname">First name:</label>
    <input name="fullname" class="sig_fullName" type="text" placeholder="Full name">
    <br>
    <label>Job title</label>
    <input class="sig_jobTitle" type="text" placeholder="Last name">
    <br>
    <label>phone number</label>
    <input class="sig_mobile" type="text" placeholder="Mobile">
    <br>
    <label for="company">Company:</label>

    <select name="company" class="sig_company">
      <option value="">please select</option>
      <option value="">company1</option>
      <option value="">company2</option>
      <option value="">company3</option>
    </select>


  </div>

  <a class="cta" onclick="generate();">Generate</a>


  <div>first name: <span class="name"></span></div>
  <div>Job title: <span class="job"></span></div>
  <div>Phone number: <span class="number"></span></div>
  <img class="companylogo" src="./img/example.jpg">



  <script>

    function generate() {

      var fullName = document.querySelector(".sig_fullName").value;
      var jobTitle = document.querySelector(".sig_jobTitle").value;
      var Mobile = document.querySelector(".sig_mobile").value;

      document.querySelector(".name").innerHTML = fullName;
      document.querySelector(".job").innerHTML = jobTitle;
      document.querySelector(".number").innerHTML = Mobile;

      var swap = [
        './img/company1.svg',
        './img/company2.svg',
        './img/company3.png',
      ]

      var logo = document.querySelector(".companylogo");
        var dropdown = document.querySelector(".sig_company");
        logo.src = swap.value;

    }

  </script>


</body>

</html>

【问题讨论】：

标签： javascript arrays input dropdown

【解决方案1】：

我认为问题在于您访问 swap 数组中的属性的方式

试试

logo.src = swap[dropdown.selectedIndex - 1];

下拉列表将有一个 selectedIndex 值，它是基于 0 的类似数组，但因为第一个值是“请选择”，我们需要从 selectedIndex 中减去一个以使其与图像数组正确对齐。

【讨论】：