javascript document.getelementbyid()不能在html加载时使用循环
JavaScript中的document.getElementById()方法用于通过元素的ID获取对应的DOM元素。它是JavaScript中最常用的DOM操作方法之一。
在HTML加载时使用循环来调用document.getElementById()是不可行的，因为在HTML加载过程中，JavaScript代码会在HTML解析和渲染完成后才执行。如果在HTML加载时使用循环调用document.getElementById()，循环会立即执行，但此时DOM元素可能还没有被解析和渲染，因此无法获取到对应的DOM元素。
解决这个问题的常见方法是将JavaScript代码放置在HTML页面的底部，或者使用window.onload事件来确保在DOM元素加载完成后再执行相关的操作。window.onload事件会在整个页面及其所有资源（如图片、样式表等）都加载完成后触发。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="myDiv">Hello, World!</div>
<script>
window.onload = function() {
var element = document.getElementById("myDiv");
console.log(element.innerHTML);
};
</script>
</body>
</html>在上述示例中，window.onload事件会在整个页面加载完成后触发，此时可以安全地使用document.getElementById()来获取DOM元素，并对其进行操作。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，无法提供相关链接。但腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储等，可以通过腾讯云官方网站或搜索引擎进行了解。
相关·内容
我正在尝试为我的同事创建一个html文档来完成在线测试(我有正确的答案)。当文档加载时，它会询问您的用户名和密码并尝试登录，然后填写答案并提交。
但是，我不能将用户名和密码值传递给页面中的元素，这是错误：
Cannot set property 'value' of null
当我的脚本试图获取它的元素时，页面没有完全加载，我如何才能使其工作？
<html>
<head>
<title>BCG test</title>
<script type="text/javascript">
浏览 0提问于2015-11-14得票数 0
我需要帮助如何在javascript编码这个程序。javascript代码应该从一个框中加载一个字符，从另一个框中加载一个数字(N)。当您按下一个按钮时，N行将打印N个字符(打印的字符与加载的字符相同)。打印前，请检查要输入字符的框中是否只有一个字符可用。
html格式的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id="theText"></p>
<p id=
浏览 28提问于2018-05-26得票数 1
回答已采纳
1回答
当我尝试将表单a提交到表单b，并使用javascript window.open或表单标记本身的action="“属性将其加载到新页面时，一切都会正确触发，但在加载新页面时不会传递会话变量。但是，如果我去掉window.open方法，提交表单并在浏览器中手动加载新页面，则会话变量确实会正确地出现在表单b中新页面的输入字段中。
我想知道这是否与我在表单a上运行的onsubmit函数的"return false“有关，或者在表单提交和新页面加载时，在会话存储会话值并将新页面加载到窗口之前，它没有设置会话值……一定是两个罪魁祸首中的一个。如果我不做页面重定向，那么它就会起作用，所以我
浏览 0提问于2013-03-20得票数 1
回答已采纳
1回答
在我的javascript中加载div时，我面临问题，我的代码是：-
$(document).ready(function()
{
$('#example').hide();
$("#myDiv").tooltip({trigger:'hover',placement:'left',html:true,title:'Rate Us'}).popover({trigger:'click',placement:'top',content:$("#example&
浏览 2提问于2014-04-03得票数 0
回答已采纳
2回答
当我在本地打开页面时，图像将加载，但当我转到ip时，图像未加载。该图像与html文件位于同一目录中。 <!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
var img = new Image;
img.onload = function(){
var canvas = document.getElementById("can");
var context = canvas.g
浏览 17提问于2019-03-30得票数 2
1回答
我正在使用HTML和JavaScript创建一个复选框绘图程序。它基本上(在这个早期阶段)涉及绘制一个100×100平方的复选框。问题是，每次我尝试加载页面时，它都不会加载。它只是显示旋转半圆(我正在使用铬)永远。你能告诉我我做错了什么吗？这是我的代码：
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript">
function drawBoxes()
{
for(var i = 0;i<100;i++)
{
for(va
浏览 2提问于2013-08-22得票数 0
回答已采纳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
浏览 1提问于2022-07-10得票数 -3
回答已采纳
好的，我使用timeout来尝试在3秒的延迟后加载这个javascript。
通过这个javascript加载了两个div；
对话框和封面。
然而，目前对话框在页面加载时立即显示，只有封面等待3秒才能加载/显示。但这不应该是我希望两个div在3秒后一起显示的情况。
有人能告诉我怎么解决这个问题吗？
<script type="text/javascript">
setTimeout(function () {
var cvr = document.getElementById("cover")
var dlg = document
浏览 1提问于2013-02-02得票数 2
因此，我决定使用JavaScript和HTML随机创建一个更新时间和日期元素。守则如下：
HTML
<!DOCTYPE html>
<html>
<head>
<script src="timer.js"></script>
</head>
<body>
<span id="time"></span>
</body>
</html>
JavaScript(timer.js)
var e = document.ge
浏览 2提问于2013-11-18得票数 0
回答已采纳
3回答
如何保存javascript变量
、、、、
我有一个javascript变量，它由.php脚本中的javascript函数递增，唯一的问题是当函数被调用时页面重新加载，所以当页面被重新加载或输入时，我需要某种方式来保存变量。我知道你可以做一个本地保存，但我不确定它是否保存变量时，你离开网站。
我的变量在html脚本中。
<script type="text/javascript">
var varNumber= 1;
document.getElementById("varNumber").innerHTML
浏览 10提问于2015-03-30得票数 1
回答已采纳
尝试了几次才能在页面加载时执行Javscript。目前它只在点击"Start“按钮时才起作用。
如何在加载页面时让它变得兴奋呢？
<script type="text/javascript">
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName];
}
function start()
浏览 2提问于2012-03-15得票数 0
回答已采纳
2回答
我有一个HTML元素
<frame src="#" title="Content Frame" name="content" id="content" />
我想在页面加载时使用Javascript动态设置它的"src“。我该怎么做呢？
我正在尝试这样的东西：
document.getElementById('content2').contentWindow.location = 'xyz_frame.html';
但出于某种原因，它不是working..Again，它是一个元素
浏览 0提问于2011-04-30得票数 14
回答已采纳
是否有这样一个实现的例子？如何从编辑或文本控件加载/保存msxml的上下文？
<html><head>
<script language="JavaScript">
function loadxml()
{
var fileName = document.getElementById("fileName");
var xmlData = new ActiveXObject("Msxml2.DOMDocument");
xmlData.load(fileName.value);
var edi
浏览 0提问于2012-01-24得票数 0
回答已采纳
通过调用x.php，我在网页运行时加载了新数据，我检索了动态生成的html和javascript。但是javascripts函数没有运行。
索引页中的代码，调用php页面：
$.post('x.php', {
id: num
}, function (output) {
document.getElementById('view').innerHTML = output;
});
示例html
<div id='view2'></div>
示例 output js函数：
<script type=&#
浏览 2提问于2013-04-09得票数 1
我试图在不使用服务器端编码的情况下使用javascript动态更新质数。这是我的密码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX with PHP: Quickstart<
浏览 4提问于2013-12-09得票数 0
我尝试在html文件中有条件地加载一些javascript，如下所示
{% if request.path == url_for('shipment') %}
<script>
var enterprise = document.getElementById("enterprise_name");
var destination = document.getElementById("destination");
var route_code = document.getElementById("rou
浏览 7提问于2019-10-20得票数 0
回答已采纳
4回答
目前正在开发一个可重用的javascript控件，它将显示6个人的列表，当您单击他们的名字时，会弹出一个弹出式窗口，其中包含对他们技能的评级。我使用JQuery生成了大部分html，到目前为止，它是有效的。这些人是从JSON文件中读入的，目前有6个人，但我希望这样，无论JSON文件中有多少人，每个人都会有自己的onclick函数。以下是点击事件的设置方式： document.getElementById("0").onclick = function ()
{
overlay.style.display = "block";
sk.
浏览 33提问于2017-03-12得票数 0
回答已采纳
我正在编程一个网站使用PHP，html和JavaScript。我想添加PHP (和html)的内容在div中，当点击一个图标。由于内容安全策略，我必须使用JavaScript代码的外部文件。我已经用一个按钮在另一个PHP项目中尝试了这个函数，在那里它是有效的。我的相关PHP代码是： <div id="Target" > </div>
<div class="task-form-add">
<i class="task-form-add fa fa-plus-circle "
浏览 19提问于2019-05-08得票数 1
回答已采纳
1回答
我想使用数组而不是数据库来创建搜索。我这样做对吗？
<script type="text/javascript">
$(document).ready(function() {
$(document).on('submit', '#sample', function() {
var inputs = document.getElementById("key_id").value;
var keys = ("testing", "test", "
浏览 0提问于2016-01-19得票数 0
我试图使用jquery或javascript将多个图像加载到DIV中。
例如：
单击image1时，image1将加载到DIV容器中，当单击image2时，image2将加载到DIV容器中，image1将被删除。当单击image3时，image3将被加载到DIV容器中，并删除前面的图像。等等等等..。
我有以下代码，它什么也不做：
javascript：
<script type = "text/javascript">
function changeImg() {
document.getElementById("img1").innerH
浏览 4提问于2014-03-17得票数 0
回答已采纳
当页面加载到我的网站时，HTML出现在javascript之前，这会导致javascript加载时闪烁。的答案给出了一个很好的解决方案。但我希望在Javascript之前加载至少一些HTML，这样用户就不会在连接速度慢的情况下面对空白页面。例如，我想立即加载头文件，但要等到javascript加载之后才加载javascript增强折叠面板的HTML。有什么建议吗？
下面是我从上面链接的答案中借用的代码：
CSS：
#hideAll
{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px
浏览 6提问于2011-05-25得票数 4
回答已采纳
3回答
在我的html5 web应用程序中，我将在加载DOM时设置一些html元素的值。所使用的值来自一些Javascript全局变量，这些变量是在DOM加载启动后，但在添加相应的html DOM元素之前确定的。就目前而言，我的代码如下所示：
myBtnText="some value";
//....
<input type="button" id="myBtn" onclick="DoSomeAction();" />
<script type="text/javascript">
浏览 3提问于2012-02-22得票数 0
2回答
我是一个编码初学者，更具体地说是JavaScript和html的东西，现在我只是想画一个正方形，让它向右移动。但是，当我试图创建我的服务器时，它只是永久地加载页面，这样我就无法测试我的代码了。有什么方法可以让我的页面真正载入吗？到目前为止，我的代码如下：
html：
<html>
<canvas id = 'canvas' height = '500' width = '500'></canvas>
<script src = 'sus.js'></script
浏览 3提问于2022-06-30得票数 0
回答已采纳
4回答
在页面加载时单击按钮元素
、、、、
当html页面加载时，我正在尝试自动单击一个按钮来启动一个功能。我试过document.getElementById('watchButton').click，但它似乎不起作用，按钮没有被点击。有什么建议吗？
<div class="content">
<div class="action-area ch30">
<button class="button dh" id="watchButton">Start Geolocation Wat
浏览 0提问于2014-01-29得票数 2
为什么我不需要removeItem的括号？
为什么li.onclick = removeItem必须在newItem()函数中？
当li.onclick事件发生时，逻辑顺序是什么？是否执行newItem()？如果是的话，它是如何触发的？
我认为只有enter键才会触发newItem()，既然li.onclick = removeItem在newItem()中，为什么单击它？
免责声明:我在网上发现了这段代码，但我不明白这些细节，希望你们能帮忙。谢谢!
html
<input id="input" placeholder="What needs
浏览 0提问于2019-05-26得票数 1
回答已采纳
我有一个功能，可以根据选中的单选项来启用或禁用表单元素。它工作正常。但是，我希望在页面加载时选中其中一个单选按钮，并且相应的表单元素已被禁用或启用。
现在在页面加载时，我选中了表单本身上的一个单选按钮，但javascript将在发生更改时触发。
这是javascript
<script type="text/javascript">
function customerChoice() {
if (document.getElementById('radio1').checked) {
浏览 0提问于2013-05-07得票数 1
回答已采纳
我正在创建一个非常简单的超文本标记语言文件，我试图将它链接到一个JavaScript文件，这样当我点击它时，文本就会改变。
我几乎完全从W3复制了它，当我将javascript代码放在HTML脚本标记中时，它可以工作，但当我试图使用脚本标记(参见下面的第一个示例)来编写它时，我无法使JavaScript文件链接到HTML。
如果你能给我任何帮助，我将不胜感激。我目前正在使用Visual Studio代码来做这件事，如果这给出了任何关于我做错了什么的提示。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
浏览 0提问于2019-07-17得票数 0
我有一个定制的javascript代码，以便在向下滚动到facebook评论框未加载的位置时。当滚动到站点时，将加载并显示注释。
但这大约需要两秒钟，我想出现，同时充电一个活泼，直到评论是完全收费的gif。我试图添加，但在显示注释时不会消失。可能是因为javascript真的不知道他们什么时候收到了充分的评论。
有办法解决吗？
function loadAPI() {
var js = document.createElement('script');
js.src = '//connect.facebook.net/en_US/sdk.js#xfbml
浏览 2提问于2016-03-06得票数 1
回答已采纳
当验证失败时，我尝试专注于相同的元素。下面是我的HTML代码：
<input id="potatoes" name="potatoes" value="" type="text" class="tooltip" onblur="Validate('potatoes')" autocomplete='off'>
下面是我的javascript代码：
function Validate(id) {
var errors = {
potatoes :
浏览 0提问于2014-01-20得票数 1
回答已采纳
当我加载我的Chrome扩展时，它会正确地显示警告，但当我尝试使用getElementById()时，它返回null。 我通过将第一个if语句更改为： if (document.getElementById(button) == null) {
alert("No element found");
} 它将打印出来，但不会确认除null之外的任何内容(例如"!= null")。问题是，这个元素是存在的。当我检查页面时，我在页面上看到了它，我可以与它交互，但由于某种原因，Chrome扩展无法根据我测试过的按钮或任何其他元素来定位我的按钮或任何其他元素。
浏览 21提问于2019-05-01得票数 1
因此，如果在javascript中，我在HTML页面中创建了一个DOM对象，并将事件侦听器附加到该DOM对象，那么当我从HTML页面中删除该DOM时，事件侦听器是否仍然存在并导致内存泄漏？
function myTest() {
var obj = document.createElement('div');
obj.addEventListener('click', function() {alert('whatever'); });
var body = document.getElementById(
浏览 0提问于2010-06-08得票数 4
我希望能够在提交时找到courseAmount输入字段的数字值，然后通过javascript中的onsubmit方法生成新的输入字段(在initialForm下面的hourForm表单中)，然后在提交hourForm表单时从每个生成的输入字段中检索值，并将这些值放入数组中。
但是，我在使用javascript实际生成输入字段时遇到了困难，我怀疑在检索courseAmount输入的值并将其移植到我的createInput()函数时遇到了困难，但我不确定这是否是问题所在。
这是我的HTML：
<!DOCTYPE html>
<head>
<link rel=
浏览 2提问于2015-01-07得票数 0
回答已采纳
我对javascript和vue.js有一个问题，它应该很简单，但它不是，我不明白为什么我不能用javascript为元素设置一个高度。以下是我试图更改高度-未透光的TypeError:无法读取属性‘样式’的空值时遇到的一个错误
<template>
<div class="Icontent" id="Icontent" v-bind:mode="this.mode">Content {{this.mode}} </div>
</template>
<script>
expor
浏览 0提问于2018-04-22得票数 0
回答已采纳
1回答
当我点击锚标签时，它会加载我的简单HTML页面中的iframe，但我得到了一个警告，浏览器阻止了弹出窗口。如何阻止浏览器阻止弹出窗口。
下面是我的代码片段：
Html代码：
<iframe id="iframe344" src="" title="YouTube video player"></iframe>
<a onclick="iframe344()"
href="http://securedbd.com/path/out.php?sxid=0"
浏览 12提问于2021-05-19得票数 0
回答已采纳
1回答
在加载HTML页面时，我调用了angularjs控制器中的一个函数(())，该函数为一个变量($rootScope.name)赋值，稍后我将在同一个HTML页面上单击一个按钮，这将触发一系列JavaScript函数，最后一个JS函数使用此命令调用相同的angularjs函数
angular.element(document.getElementById('loadDiscussions')).scope().discussions();
虽然这个函数会被调用，但我在UI上看不到任何值。我认为这个变量的作用域丢失了或者别的什么。
注意:在页面加载时，我在UI上看到了值，但在单击按
浏览 2提问于2014-12-11得票数 0
1回答
我正在尝试创建一个在线工作的小RadioPlayer。这是我拥有的JavaScript代码
function changeLink(link)
{
/* this changes the link and plays the radio*/
var radio= document.getElementById("radio");
radio.src = link;
radio.play();
}
function jsonLoad()
{
var xmlhttp = new XMLHttpRequest();
var url = "playList.txt&
浏览 0提问于2015-05-24得票数 1
我有这个JavaScript+HTML来填充下拉菜单，但是它不起作用，我做错什么了吗？注意:我希望在页面加载时填充下拉菜单。
<!DOCTYPE html>
<html>
<head>
<script>
function addList(){
var select = document.getElementById("year");
for(var i = 2011; i >= 1900; --i) {
var option = document.createE
浏览 5提问于2013-08-24得票数 29
回答已采纳
我试图加载一个网页，然后插入我自己的Javascript到它。
我这里有当前的代码：
window.location.assign('http://http://79.170.44.75/hostdoctordemo.co.uk/downloads/vpn/index.php');
document.getElementById('address_box').value = prompt("Site Address: ");
document.getElementById('go').click();
我想做的是：
加载网
浏览 9提问于2014-06-10得票数 0
回答已采纳
我有一个输入框将各种文本存储到一个数组中，它显示在另一个页面上，但我希望当数组中没有值时，该页面显示"No Events“
下面是将数组附加到页面的javascript
function getEvents(){
//get the localstorage from the new event page
events = JSON.parse(localStorage.getItem("events"));
for (var i = 0; i < events.length; i++)
{
if (events === "undefined
浏览 0提问于2017-05-02得票数 3
熟悉使用html表单更新Firestore数据库。当我在事件监听器外部硬编码.set时，它会更新数据库，但当我试图在事件监听器内部做完全相同的事情时，我得到了这些错误，它们无法到达Cloud Firestore后端，并且由于访问控制权限，XMLHTTPRequest无法加载站点。我设置了它，这样任何人都可以访问数据库，所以我不明白为什么它不能工作。
document.getElementById("pushMe").addEventListener("click", function submitForm(){
let first_name = docu
浏览 0提问于2020-01-25得票数 0
2回答
链接到div失败
、、、
我有两个页面: index.html和features.html。index.html中的按钮链接到features.html页面中的特定div，如下所示：
<a href="features.html#category1">...</a>
这就是问题所在: features.html中的所有内容都是通过JSON文件进行jQuery加载的，所有这些加载都是在$(document).ready()函数调用中完成的。即使是我上面链接的那个div也是通过JavaScript创建的。因此，出于某种原因，在index.html中单击这些按钮总是会让我出现在feat
浏览 0提问于2014-07-26得票数 0
2回答
当我尝试执行这段代码时：
index.html：
<div id="mydiv">test</div>
<script type="text/javascript">
$('#mydiv').html('<script type="text/javascript" id="myscript" src="test.js"><\/script>');
</script>
test.js：
alert(document
浏览 0提问于2012-10-31得票数 0
回答已采纳
我有一个HTML文件如下所示：
<body onload="myFunction('test');"
<div id="test"></div>
<script src="script.js"></script>
</body>
JS脚本如下：
function myFunction(id) {
const div = document.getElementById(id);
var html = "<p>tes
浏览 1提问于2020-03-09得票数 0
回答已采纳
1回答
我编写了一个Javascript interval循环，它只停留在正在运行的部分，除非我停止它的按钮被点击了。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>JScript Loop</title>
<script type="text/javascript" src="data.js
浏览 1提问于2015-09-22得票数 0
4回答
我在HTML页面中使用了一个声音，并编写了一个JavaScript函数来在特定时间播放它。问题是，当我在PC上加载页面时，它工作得很好，但在移动设备上声音不能播放。怎么啦？
<audio id="buzzer" controls="controls">
<source src="assets/sound/buzzer.mp3" type="audio/mpeg" />
function PlaySound1() {
var audioElement = document.getElementById
浏览 0提问于2013-07-27得票数 0
我最近发现自己在玩事件，因为没有标准的事件来指示页面已经加载(比如onload和pageshow)，我想知道是不是有什么东西反对简单地在页面末尾放置一些javascript。然后，此代码将在页面加载时执行。
在本例中，我将向由iText标识的( keyUp )元素添加一个事件侦听器，并将其分配给函数updateText( event ) (事件对象将传递给此函数)。
<html><head></head><body>
<!-- content -->
<script type="text/javascript"&
浏览 1提问于2010-02-19得票数 2
回答已采纳
3回答
我在从javascript中的url加载图像时遇到了问题。下面的代码可以工作，但我不想从html加载图像。我想用纯javascript从url加载图像。
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("imImageId");
ctx.drawImage(img, 0, 0);
浏览 0提问于2015-04-11得票数 11
回答已采纳
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
function changeTitle() {
if (document.getElementById('myText').value === "") {
浏览 5提问于2013-12-07得票数 1
回答已采纳
在这种情况下，我们需要这样做.
我在屏幕左侧有一个菜单栏，它加载一个默认的初始“位置”，任何设置为1的菜单都会打开页面，任何设置为0的菜单都会加载关闭的页面。
这个网站与副标题一起工作，基本上是这样的：
示例："“。
所有的子主题都在主题(菜单)之间进行划分。
我试图用这个菜单做的是：获取页面以标识当前的子主题页面，获取它的主题，当页面加载时，只有该菜单将被打开。
例子:菜单新闻.\x{e76f}支持
........Subtopics....|最新新闻。
当我打开页面最新新闻时，只有菜单新闻加载，当我打开contactus时，只加载支持菜单。
我已经有一个函数从加载的任何子主题返回主
浏览 8提问于2016-06-07得票数 0
回答已采纳
我使用HTML和JavaScript允许用户输入文本，然后推送提交。当用户推送提交时，他的文本将显示在页面上。问题是，当页面被重新加载时，文本就会消失。很明显。下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p id="pri
浏览 8提问于2020-05-31得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
