Question

我正在尝试编写一些代码，但有一个问题。基本上，我试图编写一些语句（如果，其他等等），并且需要访问来自不同<p>部分的一些<div>元素。

<body>
    //works with the one below = changes its value from x to 10
    <p id="one" class = "class">x</p>

    <script type="text/javascript">
        var time = new Date().getHours(); 
        if (time < 20) {
            document.getElementById("one").innerHTML = "10";
            document.getElementById("two").innerHTML = "10";
        }
    </script>

    <div class="green2">
        <p id ="two" class="class" >x</p>
        //with this one nothing happens
    </div>

我猜它没有到达ID为two的实际元素，那么我该如何处理呢？

Answer 1

您的脚本在two之前被加载，您应该将script标记始终放在body标记的最底部（在它们内部），以便所有内容先加载，然后再加载脚本。

Answer 2

要扩展Pedro的答案，您还可以使用jQuery并将所有内容包装在document.ready函数中：

$(document).ready(function(){
  var time = new Date().getHours(); 
  if (time < 20) {
    document.getElementById("one").innerHTML = "10";
    document.getElementById("two").innerHTML = "10";
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="one" class = "class" >x</p>

<div class="green2">
  <p id ="two" class="class" >x</p>
</div>

这样，您就可以在页面的任何位置显示JavaScript。

Answer 3

或者，您可以添加事件侦听器，例如jQuery的.ready（）或javascript的document.onDOMContentLoaded或window.onload事件。然后，您可以将脚本放置在所需的位置，并且仅在页面准备好后才能执行该功能。

只需将代码包装在侦听器函数中，如下所示：

<p id="one" class = "class" >x</p>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
  var time = new Date().getHours(); 
  if (time < 20) {
    document.getElementById("one").innerHTML = "10";
    document.getElementById("two").innerHTML = "10";
  }
});
</script>

<div class="green2">
<p id ="two" class="class" >x</p>
</div>

为什么我的脚本不影响我的第二段元素？

3 个答案: