javascript - 根据跨度值在页面加载时启用输入文本

Question

我有一个网页，其中包含 <span>元素和<input>元素。 我的要求是动态启用/禁用 <input>元素基于<span>内部HTML。

我编写了以下 JavaScript:

var vale=document.getElementById("SPAN_ID").innerHTML;

但是值(value)是 undefined ，因为我猜页面加载跨度元素尚未构建。我必须仅在页面加载时间执行此操作。任何人都可以为此提供任何合适的javascript代码吗？

Answer 1

您可以使用DOMContentLoaded在运行代码之前等待 HTML 完全加载和解析的事件:

<script>
document.addEventListener('DOMContentLoaded', function () {
  var value = document.getElementById("the-span").innerHTML;

  if (value) {
    document.getElementById('the-input').disabled = false;
  }

 }, false);
 </script>

<span id="the-span">Hi, I'm the span</span>
<input id="the-input" value="I'm the input" disabled>

如果删除 span 元素内的文本，然后重新运行代码片段，您将看到输入框仍然处于禁用状态。