Question

JavaScript 抛出错误“未捕获类型错误：无法设置属性‘值’为 null”，但元素已存在

2018-03-14

1613

javascript html jsp tomcat jspx

我正在使用 jsp。jsp 文件中有一个 <input> 元素。但是当我尝试使用 javascript 设置 <input id="digipan" name="digipan" type="hidden" value="" ></input> 的值时，我收到此错误：“Uncaught TypeError：无法将属性‘value’设置为 null”。这是我的 html 代码：

<div class="col-xs-12 contactDetails">
        <div class="col-md-6">
           <mark>PAN Card</mark>
            <div >
               <label style="color: red">Choose File:</label> 
               <div class="form-group">
                 <input type='file' id="PAN_Card" name="PAN_Card" /> <div id="dl_pan"> OR <div class="share_fm_dl" id="attachment_poi" ></div></div>
               </div>
               <div id="digipanfile" name="digipanfile"></div>
               <input id="digipan" name="digipan" type="hidden" value="" ></input>
             </div>
       </div>
    </div>

这是我的 Javascript 代码：

document.getElementById('digipanfile').innerHTML = "File:<a href=" + response + ">" + filename + "</a>";
        document.getElementById('digipan').value = response;
        document.getElementById('PAN_Card').style.display = 'none';

此 javascript 代码位于一个函数内，该函数仅在页面加载后执行。此外，查看页面源代码显示此 <input> 标记，但检查元素未显示它。注意：- 我已经在使用 jQuery 文档就绪方法，但仍然出现此错误。

Answer 1

您必须等到文档加载完毕。因此，您应该在 javascript 文件中使用“load”事件侦听器：

window.addEventListener("load", e => {
        document.getElementById('digipanfile').innerHTML = "File:<a href=" + response + ">" + filename + "</a>";
        document.getElementById('digipan').value = response;
        document.getElementById('PAN_Card').style.display = 'none';
    })

您还可以使用 jQuery 方法 window load 和 document ready。两者大致同时发生。如果您想知道其中哪一个先触发，您应该运行此代码以了解：

$(document).ready(function() {
      alert("document ready occurred!");
});

$(window).load(function() {
      alert("window load occurred!");
});

Answer 2

在 DOM 完全加载后触发所有脚本是一种很好的做法。正如 alexleo2000 提到的，您可以将脚本函数包装在 window.load(function() { //here goes your script function }) 中