纯JavaScript：

Question

所以我正在尝试学习javascript。我已经阅读了一些教程和指南，但是他们经常不会教你如何编写javascript来处理网页。

我想要学习的是提供与我最近制作的网站的一些基本互动。虽然它们包含动态内容，但我仍然想要一些javascript的交互性。然而，我的所有尝试都是徒劳的，因为没有任何作用。我的最终目标是让我的网站感觉更专业，也许还有一个node.js服务器启动并运行一些ajax或websockets可能会用canvas建立一个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>

Answer 1

那是因为您使用的是getElementById，而且不是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);
}

Answer 2

有一些事情可以让你成为初学者。

在页面加载之前运行JavaScript。
在页面中包含JavaScript文件的顺序非常重要。
您可以采取的方式。

纯JavaScript：

在您的代码中我假设您尝试访问所有代码，您可以使用getElemenysByTagName('p')。

如果您想访问单个元素，我建议您为SomeText分配ID，然后使用getElementsById('me')。

如果你不想访问一组元素，但不是所有类型的元素，你应该使用一个类SomeText ...你可以使用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/

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

甚至基本的javascript工作的问题[noob here]

3 个答案:

纯JavaScript：

的jQuery：