JS新手：NodeList返回null但有元素

Question

我有工作的 Javascript/HTML 代码，当时它都在一个文件中，现在我想将其拆分为单独的文件。

我的 JS 代码在拆分之前可以工作，但是当我将其移动到新文件时，注释掉的部分停止工作。我是自学成才的，所以这可能是显而易见的事情，但我还没有找到正确的信息。我无法访问该元素，也不知道为什么。我该如何修复它？并且：是否有某个地方讨论了为什么它在同一个文件中工作但分离代码会像这样破坏它？感谢您的任何见解！

在移动之前，我的 JS 代码位于 HTML 的底部，我发现这有时会产生影响。我尝试了底部的

<script src>

，但没有区别。

我的相关HTML代码块：

{%- block scripts %}
  <script src="{{ url_for('static',filename='download_page.js') }}"></script>
{%- endblock scripts %}
{% block title %} Download Page {% endblock title %}
{% block page_heading %} Download Shelf Tool{% endblock page_heading %}
{% block content -%}
{# #}
    <form action="{{ url_for('download_shelf_func') }}" method="post" name="choice_form">
      {{ form.csrf_token }}
      <form-title>
        {{ form.form_name.label(class="form-title") }}
      </form-title>
      <form-row>
        {{ form.shelf_choice.label(class="item-label") }}
        {{ form.shelf_choice(class="drop-down-menu", onchange="setShelfChoice(this)") }}
      </form-row>

尝试了没有

this

但没有改变。

我的JS代码：

document.addEventListener('DOMContentLoaded', setShelfChoice());

function setShelfChoice() { 
  let el = document.getElementsByName('shelf_choice');
  console.log("el type: ", typeof(el), el);
  console.log("el value: ", el[0].value);
  // let index = el.selectedIndex;
  // choiceValue = el.options[index].textContent;
  // console.log("setShelfChoice: ", choiceValue, "\n\n");
  // console.log("index: ", index);
}

当我重新加载 HTML 页面时，它会调用该函数，并且数组中有一个节点 0，并且它具有所有正确的值。但我不确定如果不是 [0] 我应该打电话给什么。

我尝试将

console.log("el: ", el[0].value);

更改为

console.log("el: ", el[0]);

输出只是显示未定义。

我尝试添加初始化，但这没有影响任何内容：

function setShelfChoice() { 
  let el = document.getElementsByName('shelf_choice');
  if (el.selectedIndex == undefined) {
    el.selectedIndex = 0;
  }
  console.log("el: ", typeof(el), el);
  console.log("el: ", el.value);

Answer 1

我认为，这里你试图从 Nodelist 获取，而不是从 Node 获取。

let index = el.selectedIndex;

也许它应该看起来像：

let index = el[0].selectedIndex;

你开始执行你的js代码了吗

window.onload 
document.onload

或

<body onload="myFunction()">

JS新手：NodeList返回null但有元素

问题描述投票：0回答：1

1个回答

最新问题

JS新手：NodeList返回null但有元素

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1