2

所以我正在尝试学习javascript。我浏览了一些教程和指南，但它们通常不会教你如何编写 javascript 来处理网页。

我想学习如何做的是与我最近制作的网站提供一些基本的交互性。虽然它们包含动态内容，但我仍然想要一些 javascript 的交互性。然而，我所有的尝试都是徒劳的，因为没有任何效果。我的最终目标是让我的网站感觉更专业，也许还可以让 node.js 服务器启动并运行一些 ajax 或 websockets 可能会用画布构建一个 2d 游戏，但这要晚得多。

以下代码是我根据阅读的一些 HTML DOM 教程编写的一些基本内容。问题是它根本不起作用。所以谁能告诉我这里发生了什么，为什么它根本不起作用。是的，我的浏览器中确实打开了 javascript。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>
    <p>SomeText</p>
    <script type="text/javascript">
        var ptag = document.getElementById('p');

        function alertclick() {
            alert(this);
        }

        for (i = 0; i < ptag.length; i++){
            var attach = ptag[i];
            attach.addEventListener("click", alertclick, false);
        }


    </script>
</body>
</html>
4

3 回答 3

6

那是因为您正在使用getElementById并且 is 没有带有 id 的元素p。而是用于getElementsByTagName获取所有p元素。 

var ptags = document.getElementsByTagName('p');

for (var i = 0; i < ptags.length; i++){
     var element = ptags[i];
     element.addEventListener("click", alertclick, false);
}
于 2012-04-28T01:38:42.247 回答
3

作为初学者，有几件事会让你脱颖而出。

  1. JavaScript 在页面加载之前运行时。

  2. 在页面中包含 JavaScript 文件的顺序很重要。

  3. 您可以做某事的方式的数量。

纯 JavaScript：

在您的代码中，我假设您正在尝试访问所有<p>标签，您可以使用getElemenysByTagName('p').

如果您想访问单个元素，我建议为它分配一个 ID <p id="me">SomeText</p>，然后使用getElementsById('me').

如果你不想访问一组元素，但不是某个类型的所有元素，你应该应用一个类<p class="group">SomeText</p>……你可以使用getElementsByClassName('group')，但它只在更现代的浏览器中受支持。

对于元素的选择，我强烈推荐使用 jQuery，它使过程更容易和更灵活。http://jquery.com/

jQuery：

使用 jQuery 后，您可以像这样访问元素：

$('#me'); //Individual Element by ID
$('.group'); //Group of elements by Class
$('<p>'); //All P elements

jQuery 在创建事件处理程序时也非常出色，因为它简单且跨浏览器兼容性。对于您的 onClick：

http://api.jquery.com/click/

于 2012-04-28T01:40:13.050 回答
3

有一点信心！你快到了。这是我理解您想要的行为：单击段落以提醒其内容。

我们喜欢在问题和答案中展示一个工作演示：http: //jsfiddle.net/bxvny/

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>
    <p>SomeText</p>
    <p>SomeText2</p>
    <p>SomeText3</p>
    <script type="text/javascript">
        var ptag = document.getElementsByTagName('p');

        function alertclick() {
            alert(this.innerHTML);
        }

        for (i = 0; i < ptag.length; i++){
            var attach = ptag[i];
            attach.addEventListener("click", alertclick, false);
        }


    </script>
</body>
</html>
于 2012-04-28T01:42:28.140 回答