Question

如果.innerText的选定值为a，我正在尝试更改第一个option的{{1}}属性我没有看到任何错误控制台，并尝试移动我的脚本，看看是否有任何改变，但事实并非如此。现在我的剧本就在身体的尽头。

为什么这不起作用？！

HTML：

JS：

<div id="container">
    <ol>
        <li><a href="#">This is the first link</a></li>
        <li><a href="#">This is the first link</a></li>
        <li><a href="#">This is the first link</a></li>
        <li><a href="#">This is the first link</a></li>
        <li><a href="#">This is the first link</a></li>
        <li><a href="#">This is the first link</a></li>
        <li><a href="#">This is the first link</a></li>
        <li><a href="#">This is the first link</a></li>
    </ol>
    <select id="numbers">
        <option>Select</option>
        <option value=1>1</option>
        <option value=2>2</option>
        <option value=3>3</option>
        <option value=4>4</option>
    </select>
</div>

Answer 1

查看小提琴和控制台，您将看到错误Uncaught TypeError: Cannot read property 'firstElementChild' of null

错误是由在页面上加载元素之前调用该函数引起的。

window.onload = (function(){

    "use strict";

    var select = document.getElementById("element"),
        option = select.firstElementChild; 

    select.addEventListener("onchange", function(){

            var div = document.getElementById("hook"),
                ol = div.firstElementChild,
                li = ol.firstElementChild,
                a = li.firstElementChild;   
                console.log(a);

            if(this.children[0].value === 1)
                  a.innerHTML = "This is the first element";
    }, true);


})();  <-- executes the function and assigns result to unload handler

您想要删除()

现在下一个问题是您使用addEventListener错误。你不用事件名称中的“on”。并非所有浏览器都支持它。

select.addEventListener("change", function(){

Answer 2

尝试制作一个实际的javascript函数，然后将onchange属性添加到html中的元素：

function ChangeText() {
  var div = document.getElementById("hook"),
  ol = div.firstElementChild,
  li = ol.firstElementChild,
  a = li.firstElementChild;   

  console.log(a);

  if(select.children[1].innerText === 1) {
    a.innerText = "This is the first element";
  }
}

<select id="numbers" onchange="ChangeText();">...</select>

你可能最好更改功能，以简化它，但希望这可以指出你正确的方向并解决你的直接问题。

我的onchange事件没有解雇！不确定为什么

2 个答案: