我不明白如何很好地操作 DOM。我在其他地方用过
document.getElementById('someid').innerHTML = "HI";
，效果很好。但是，当我向网页添加计时器时，我无法使用上面的内容来更改某些文本（计时器）。所以...我很困惑。你们都帮助我解决了我遇到的其他问题......在打扰你们之前我做了很多研究，但我被难住了&沮丧的。
在signupForm.php - SNIPPIT
<title>Perry Computer Services - Signup</title>
<script src="js/commonUtils.js" type="text/javascript"></script>
<script src="js/validation.js" type="text/javascript"></script>
<script src="js/timers.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">window.onload = CreateTimer(30);</script>
在timers.js
function CreateTimer(Time)
{
alert("Timer created:" + Time);
document.getElementById('debug1').innerHTML = "WORKS";
alert("We never get here.");
}
在signupForm.php - SNIPPIT
<form name="form1" method="post" action="signupForm.php?calling_page=validateform" accept-charset="utf-8">
<table border="0" align="center">
<tr class="table_top">
<td class="tbl_col1"><div align="right" id="debug1"></div></td>
<td class="tbl_col2"><div align="left" id="debug2"></div></td>
这就是我感到困惑的地方。我有另一个名为validation.js 的.js 文件，我在其中使用与上面完全相同的document.getElementById，并且它有效！我不明白！
在validation.js中我修改了很多DOM并且效果很好！它是否有效，因为当我通过切换到下一个字段来更改字段这是范围问题吗？如果有人不知道我做错了什么，我会尝试将我的validation.js 切碎并将其粘贴在这里，但它太大了。为什么 1 个函数可以工作，而不同文件中的另一个函数却不能工作？
I don't understand how to manipulate the DOM very well. I have used
document.getElementById('someid').innerHTML = "HI";
in other places and it works fine. But when I went to add a timer to my webpage I can't use the above to change some text (the timer). So... I'm very confused. You have all helped me in other problems I have had... I research lots before bugging you all but I'm stumped & frustrated.
in signupForm.php - SNIPPIT
<title>Perry Computer Services - Signup</title>
<script src="js/commonUtils.js" type="text/javascript"></script>
<script src="js/validation.js" type="text/javascript"></script>
<script src="js/timers.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">window.onload = CreateTimer(30);</script>
in timers.js
function CreateTimer(Time)
{
alert("Timer created:" + Time);
document.getElementById('debug1').innerHTML = "WORKS";
alert("We never get here.");
}
in signupForm.php - SNIPPIT
<form name="form1" method="post" action="signupForm.php?calling_page=validateform" accept-charset="utf-8">
<table border="0" align="center">
<tr class="table_top">
<td class="tbl_col1"><div align="right" id="debug1"></div></td>
<td class="tbl_col2"><div align="left" id="debug2"></div></td>
Here's what I'm confused about. I have another .js file called validation.js and I use the exact same document.getElementById as above in there and it works!!! I don't get it!
In validation.js I modify the DOM a lot and it works great! Is it working because when I change a field by tabbing to the next field is this a SCOPE problem? If someone doesn't know what I'm doing wrong I'll try to chop up my validation.js and stick it in here but it's huge. Why would 1 function work and another one in a different file not work?
发布评论
评论（2）
您立即调用
CreateTimer并将其返回值(undefined)分配给onload。当您调用它时，具有指定 ID 的元素不存在，并且该行会出错并停止脚本进一步运行。
为 onload 分配一个函数。
You call
CreateTimerimmediately and assign its return value (undefined) toonload.At the time you call it, the element with the specified ID does not exist, and that line errors and stops the script from running any further.
Assign a function to onload.
这是一个时间问题。请注意，出现警报时该页面是空白的，并且还要注意，如果您随后从控制台运行命令，则一切正常。您正在尝试修改尚未加载的元素。原因是 onload 没有正确设置 - 您在正确的时间之前调用了 CreateTimer。
当您遇到此类问题时，尝试找出问题所在是大生产线的哪一部分会有所帮助。例如：
此外，使用
console.log()而不是alert()也会让您省去一些挫败感。It is a timing issue. Notice that the page is blank at the time of the alert, and also notice that if you run your command from the console afterwards everything works okay. You are trying to modify the element that is not loaded yet. The reason for that is the fact that onload is not set up properly - you're calling CreateTimer before the proper time.
When you have these kinds of problems, trying to isolate which part of the huge line is the issue would help. For instance:
Also, using
console.log()instead ofalert()will also save you some frustration.