Question

首先定义

selectedOptionElement = document.getElementsByTagName('select')[0];

我正在努力了解原因

.onchange = () => {};

发射而

addEventListener('change', () => {});

不是吗？

同样，为什么它可以与

一起使用

selectedOptionElement = document.getElementsByTagName('select')[0];

但不是

selectedOptionElement = document.getElementById('selectBoxIdName')[0];

谢谢

在Chrome 66.0.3359.181中进行测试

try {
  selectedOptionElement = document.getElementById('projectsSelectBox');
  selectedOptionElement.onchange = () => {
  // selectedOptionElement.addEventListener('change', () => {
    var projectsSelectBox, selectedOption, projectType1, projectType2;
    projectsSelectBox = document.getElementById('projectsSelectBox');
    selectedOption = projectsSelectBox.options[projectsSelectBox.selectedIndex].value;
    projectType1 = document.getElementById('projectType1');
    projectType2 = document.getElementById('projectType2');

    if (selectedOption === '1') {
      projectType2.style.display = "none";
      projectType1.style.display = "block";
    } else if (selectedOption === '2') {
      projectType1.style.display = "none";
      projectType2.style.display = "block";
    } else {
      projectType1.style.display = "block";
      projectType2.style.display = "block";
    }
  };
} catch (err) {
  console.log(err);
}

Answer 1

如果您取消注释addEventListener行并删除.onchange行，则会出现错误：

Uncaught SyntaxError: missing ) after argument list

这可以通过在右大括号后添加右括号来解决。

selectedOptionElement.addEventListener('change', () => {
  var projectsSelectBox, selectedOption, projectType1, projectType2;
  projectsSelectBox = document.getElementById('projectsSelectBox');
  selectedOption = projectsSelectBox.options[projectsSelectBox.selectedIndex].value;
  projectType1 = document.getElementById('projectType1');
  projectType2 = document.getElementById('projectType2');

  if (selectedOption === '1') {
    projectType2.style.display = "none";
    projectType1.style.display = "block";
  } else if (selectedOption === '2') {
    projectType1.style.display = "none";
    projectType2.style.display = "block";
  } else {
    projectType1.style.display = "block";
    projectType2.style.display = "block";
  }
});  // <-- closing paren

完成此操作后，您的代码即可使用。

try {
  selectedOptionElement = document.getElementById('projectsSelectBox');
  selectedOptionElement.addEventListener('change', () => {
    var projectsSelectBox, selectedOption, projectType1, projectType2;
    projectsSelectBox = document.getElementById('projectsSelectBox');
    selectedOption = projectsSelectBox.options[projectsSelectBox.selectedIndex].value;
    projectType1 = document.getElementById('projectType1');
    projectType2 = document.getElementById('projectType2');

    if (selectedOption === '1') {
      projectType2.style.display = "none";
      projectType1.style.display = "block";
    } else if (selectedOption === '2') {
      projectType1.style.display = "none";
      projectType2.style.display = "block";
    } else {
      projectType1.style.display = "block";
      projectType2.style.display = "block";
    }
  });
} catch (err) {
  console.log(err);
}

<select name="" id="projectsSelectBox">
  <option value="1">1</option>
   <option value="2">2</option>
</select>
<p id="projectType1">Option Text</p>
<p id="projectType2">Option Text 2</p>

.onchange =（）=> {};触发，addEventListener（'change'，（）=> {}）;才不是？

1 个答案: