根据下拉香草 js 更改图像

Question

嗨，我是 javascript

的新手

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

我想 link 用户从 select 和数组中选择什么

我也喜欢它在 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>

Answer 1

我认为问题在于您在 swap 数组

中访问属性的方式

尝试

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

下拉列表将有一个 selectedIndex 值，它像数组一样从 0 开始，但是因为第一个值是“请 select”，我们需要从 select 中减去一个edIndex 使其与图像数组正确对齐。

根据下拉香草 js 更改图像

change image based on dropdown vanilla js

javascript

arrays

input

dropdown