我试图将一个图像添加到一个div中，但由于一些未知的原因，我无法通过JavaScript访问该div。
function redirectToProductPage1() {
// location.href = '/product';
const pictureDiv = document.getElementById('productPicture');
console.log(pictureDiv);
}<body>
<div id="signOutContainer">
<div id="helloNameDiv">
<p id="helloName">hello</p>
</div>
<div id="signOutDiv"> <button id="signOutButton">sign out</button> </div>
</div>
<div id="productPicture">
<div id="advertising3"></div>
<div id="picture">
<img id="img1" src="" alt="test">
</div>
<div id="advertising4"></div>
</div>
<div id="priceAndColorsDiv">
<div class="inputsAndPriceDivs" id="price">
<p>price</p>
</div>
<div class="inputsAndPriceDivs"><input type="color" id="chooseColor"></div>
<div class="inputsAndPriceDivs"><input type="number" id="productAmount" placeholder="product Amount"></div>
</div>
<input type="range" id="chooseSize">
<div id="description">description</div>
<div id="addToCartDiv"><button id="addToCartButton">add to cart</button></div>
<script src='script.js'></script>
</body>正如你所看到的，我试图访问pictureDiv，但是当我打印它时，我得到了null。当我尝试打印第一个div signOutContainer时，我正确地获得了元素，div中的每个元素也正确地打印，在那个div之后的每个元素都将打印null，我尝试了DOMcontentLoad没有帮助，任何建议？
尝试DOMcontentLoad可能它还没有加载或其他东西，尝试删除第一个div signOutContainer，我仍然无法获得HTML中的其他元素。
2条答案
按热度按时间huwehgph1#
该事件的正确名称是
DOMContentLoaded，而不是DOMcontentLoad。尝试以下JavaScript：
事实上，这里不需要回调，因为默认情况下脚本标记是同步处理的，所以上面的JS代码也应该可以工作（DOM将在JS触发之前准备好）。
另外，不要忘记在某处调用
redirectToProductPage1()函数。y3bcpkx12#
JavaScript代码可能在HTML元素完全加载之前执行，因此，代码运行时productPicture div可能还不存在。解决这个问题的一种方法是将JavaScript代码 Package 在DOMContentLoaded事件侦听器中，如下所示：
这确保JavaScript代码仅在HTML内容完全加载后运行。您可以尝试的另一件事是将script标记移动到body元素的末尾，就在结束标记之前。这种方法还有助于确保在脚本运行之前加载所有HTML内容。