Question

我无法使用document.getElementById（“ ID”）从HTML页面获取值，返回Null，在所有其余代码中，一切都正常运行

这么简单的事情使我发疯，因为在代码的其他部分，同样的，一切都很好地工作

HTML：

<div id="childTemplateNotice" class="col-md-12">
    <div class="headerNews col-md-12">
        <h1 class="titleNotice"></h1>
        <p class="subTitle"></p>
    <div class="row">
        <span class="date"></span>
</div>

JavaScript：

function postNotice(){
    console.log(document.getElementById('childTemplateNotice'))
}



HTML INDEX:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-   scale=1.0">
    <title></title>



<link rel="stylesheet" type="text/css" href="notice.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/coments/coments.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/header/header.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/footer/footer.css" media="screen" />
<!-- Bootstrap e Jquery -->
<link rel="stylesheet" type="text/css" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" media="screen" />
</head>
<body>
<div class="col-md-12">
    <?php include "../../components/header/header.html"; ?>

    <div id="noticeFather"class=" col-md-12">  
    <div class="ads col-md-12 top">

</div>

<div class="headerNews col-md-12">
    <h1 class="titleNotice"></h1>
    <p class="subTitle"></p>
    <div class="row">
        <span class="date"></span>

    </div>
</div>

<div class="row">
    <div class="right col-md-3"></div>

    <div class="midle col-md-6">

    <p class="body"></p>
    <span class="linkTitle"></span>
    <a class="linkUrl"></a>
    <!-- Coments -->
    <div class="comentsDiv col-md-12">

    </div>
</div>

<div class="left col-md-3"></div>
</div>
</div>    
</div>

<div class="col-md-12">
<?php include "../../components/coments/coments.html" ?>    
</div>
<?php include "../../components/footer/footer.html"; ?>
</div>
<!-- Scripts js --> 
<script type="text/javascript" src="../../node_modules/moment/min/moment.min.js"></script>
<script type="text/javascript" src="../../node_modules/axios/dist/axios.min.js"></script>  
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script>   
<script type="text/javascript" src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>    
<script type="text/javascript" src="../../components/header/header.js">       </script>   
<script type="text/javascript" src="../../service/esmiucado-service.js"></script>
<script type="text/javascript" src="../../repositorio/repositorio.js"> </script>
<!-- Requisição DataBase -->
<script>

    postNotice()
    getComents(noticeCod)    
</script>

</body>
</html>

I already try:

$(document).ready(function() {

    function postNotice(){
        console.log(document.getElementById('childTemplateNotice'))
    }
});

and:
window.onload = function postNotice(){
    console.log(document.getElementById('childTemplateNotice'))
}

他们没有工作

OBS：javascript和html文件位于不同的目录中

更新：

当我调用另一个页面的功能时，一切正常，所以问题是当我调用此特定页面时，但我还没有确定哪个问题

Answer 1

document.ready函数中的

可以删除其中的function或调用function。第一个也可以正常工作，您只需要调用该函数即可。 window.onload运行正常

function postNotice(){
    console.log(document.getElementById('childTemplateNotice'))
}
postNotice();

 $(document).ready(function() {

  console.log(document.getElementById('childTemplateNotice'))


});


window.onload = function postNotice(){
    console.log(document.getElementById('childTemplateNotice'))
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="childTemplateNotice" class="col-md-12">
    <div class="headerNews col-md-12">
        <h1 class="titleNotice"></h1>
        <p class="subTitle"></p>
    <div class="row">
         <span class="date"></span>
 </div>

Answer 2

发生问题的原因仅是因为我没有在主页上调用html元素。

document.getElementById（'ID'）是否仅在我的部分代码中返回null

2 个答案: