无法使 JavaScript 工作，是 ID 问题吗？

发布于 2025-01-03 20:13:30 字数 1695 浏览 0 评论 0原文

我试图在用户单击“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';
    };

原文

I'm trying to get a message to appear when a user clicks the image that's in a the "lifeCalculatorButton" ID, but I can't figure out how to make it work. I know that the html doc is referencing the js doc fine, so that's not the issue. Any ideas?

    <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>

And here's the JavaScript:

    var foo = document.getElementById('lifeCalculatorButton');
    foo.onClick = function (){
    document.getElementById('content').innerHTML = 'foo';
    };

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心凉 2025-01-10 20:13:30

尝试将 onclick 事件更改为全部小写。

var foo = document.getElementById('lifeCalculatorButton');
foo.onclick = function (){
    document.getElementById('content').innerHTML = 'foo';
};

编辑

下面的代码适用于 Firefox 和 IE。我已将事件从 foo.onClick 更改为 foo.onclick。确保您的 javascript 块位于页面末尾，否则对 getElementById 的调用将返回 null。另外，您应该关闭未关闭的标签，并从底部附近倒数第二个关闭的中删除 style="clear: Both"您的页面。

<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';
  }; 
};

Try changing the onclick event to all lowercase.

var foo = document.getElementById('lifeCalculatorButton');
foo.onclick = function (){
    document.getElementById('content').innerHTML = 'foo';
};

EDIT

The below code works in both Firefox and IE. I've changed the event from foo.onClick to foo.onclick. Make sure your javascript block is at the end of the page or the call to getElementById will return null. Also, you should close the unclosed <img> tag and remove the style="clear: both" from the second to last closing </div> near the bottom of your page.

<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>

EDIT

If you are using an external javascript file you must use the window.onload event handler to register your handler to ensure the page has completely loaded.

window.onload = function () {
   var foo = document.getElementById('lifeCalculatorButton')
  foo.onclick = function (){
  document.getElementById('content').innerHTML = 'foo';
  }; 
};

回复收藏 0 原文

于我来说 2025-01-10 20:13:30

首先，您似乎在这里有一个拼写错误：

<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>

标签未正确关闭。

您还必须移动文档底部的

window.onload = function () {
    var foo = document.getElementById("lifeCalculatorButton");
    // ...
};

First, you seem to have a typo here:

<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>

The <img> tag is not closed properly.

You also have to either move the <script> include at the bottom of your document or attach to the window load event to make sure that your script is executed after the elements in question appear in the DOM:

window.onload = function () {
    var foo = document.getElementById("lifeCalculatorButton");
    // ...
};

回复收藏 0 原文

浅浅淡淡 2025-01-10 20:13:30

这可能有点过头了，但这可能是一个很好的借口来向您介绍 jQuery 或类似框架。这使得此类工作的实施变得微不足道。请参阅此小提琴，了解使用 jQuery 的工作示例。

如果你不想使用 jQuery，你的 javascript 看起来没问题因为这个小提琴可以工作。

正如其他人所说，请确保在 DOM 加载之后才分配事件处理程序。这是使用下面的代码在上面的纯 javascript 小提琴中完成的

<script type='text/javascript'>//<![CDATA[ 
    window.onload=function(){
    var foo = document.getElementById('Clickable');
    foo.onclick = function (){
    alert("See It Works");    
  }; 
}//]]>

在上面注释之后的旁注中，光标在悬停时不会改变，因为浏览器仍然将元素解释为它是什么，在本例中是一个表格单元格。唯一的区别是它现在分配了一个事件。要改变光标，您需要使用 CSS 来完成此操作。

It may be overkill but this could be a good excuse to introduce yourself to jQuery or similar framework. It makes this kind of work trivial to implement. See this fiddle for a working examlpe using jQuery.

If you don't want to use jQuery your javascript looks ok as this fiddle works.

As others have said make sure you are not assigning the event handler until after the DOM is loaded. This is done in the pure javascript fiddle above using the following code

<script type='text/javascript'>//<![CDATA[ 
    window.onload=function(){
    var foo = document.getElementById('Clickable');
    foo.onclick = function (){
    alert("See It Works");    
  }; 
}//]]>

On a side note following a comment above, the cursor will not change on hover as the browser is still interpreting the element as what ever it is, in this case, a table cell. The only difference is that it now has an event assigned to it. To have the cursor change you will need to do this using CSS.

回复收藏 0 原文