我试图在用户单击“lifeCalculatorButton”ID 中的图像时显示一条消息，但我不知道如何使其工作。我知道 html 文档很好地引用了 js 文档，所以这不是问题。有什么想法吗？
<html>
<head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<script type="text/javascript" src="apps.js"></script>
<title>my apps</title>
</head>
<body>
<div id="breaks">
<a href="http://info" > <img src="homeicon.png" /> </a>
<br>
<br>
<br>
<br>
<br>
<div id="appTable" style="float: left">
<table border="0" id="appTable">
<tr>
<td>life calculator</td>
</tr>
<tr>
<td>punny!</td>
</tr>
<tr>
<td>drink roulette (on its way!)</td>
</tr>
</table>
</div>
<div id="arrowTable" style="float: left">
<table border="0">
<tr>
<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>
</tr>
<tr>
<td id="punnyButton"><img src="arrow1.png" width="45"/></td>
</tr>
<tr>
<td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td>
</tr>
</table>
</div style="clear: both">
<div id="content">
my apps :)
</div>
这是 JavaScript:
var foo = document.getElementById('lifeCalculatorButton');
foo.onClick = function (){
document.getElementById('content').innerHTML = 'foo';
};
最佳答案
尝试将 onclick 事件更改为全部小写。
var foo = document.getElementById('lifeCalculatorButton');
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
编辑
以下代码适用于 Firefox 和 IE。我已将事件从 foo.onClick 更改为 foo.onclick。确保您的 javascript block 位于页面末尾，否则对 getElementById 的调用将返回 null。另外，您应该关闭未关闭的 <img>标记并删除倒数第二个关闭中的 style="clear: Both"</div>靠近页面底部。
<html>
<head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<title>my apps</title>
</head>
<body>
<div id="breaks">
<a href="http://info"><img src="homeicon.png" /></a>
<br /><br /><br /><br /><br />
<div id="appTable" style="float: left">
<table border="1" id="appTable">
<tr><td>life calculator</td></tr>
<tr><td>punny!</td></tr>
<tr><td>drink roulette (on its way!)</td></tr>
</table>
</div>
<div id="arrowTable" style="float: left">
<table border="1">
<tr><td id="lifeCalculatorButton"><img src="arrow1.png" width="45"/></td></tr>
<tr><td id="punnyButton"><img src="arrow1.png" width="45"/></td></tr>
<tr><td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td></tr>
</table>
</div>
<div id="content">
my apps :)
</div>
</body>
</html>
<script type="text/javascript">
var foo = document.getElementById('lifeCalculatorButton')
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
</script>
编辑
如果您使用外部 JavaScript 文件，则必须使用 window.onload 事件处理程序来注册处理程序以确保页面已完全加载。
window.onload = function () {
var foo = document.getElementById('lifeCalculatorButton')
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
};
关于javascript - 无法使 JavaScript 工作，是 ID 问题吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9221848/