Question

我有一个由<span>元素和<input>元素组成的网页。我的要求是根据<input> innerHTML动态启用/停用<span>元素。

我写了以下javascript：

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

但价值将以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元素内的文字，并重新运行该代码段，您会看到输入框仍处于停用状态。

Answer 2

如果您正在使用jquery，请尝试此操作：

    $(document).ready(function() {
         var spanText = $('#SPAN_ID').text();

         //based on var spanText value you can disable/enable input

         //To disable input
         $('#INPUT_ID').attr({
                'disabled': 'disabled'
         });

         // To enable input
         if ($('#INPUT_ID').attr('disabled')) {
            $('#INPUT_ID').removeAttr('disabled');
         }
    });

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

2 个答案: