原型javascript不引人注目的点击事件添加到按钮_Javascript_Click_Prototypejs

原型javascript不引人注目的点击事件添加到按钮

javascript

原型javascript不引人注目的点击事件添加到按钮,javascript,click,prototypejs,Javascript,Click,Prototypejs,我想使用带有原型的javascript向按钮添加一个不引人注目的事件处理程序。下面我编写了一个非常简单的HTML示例，其中有两个按钮。第一个按钮在HTML中添加了onclick。第二个按钮的id是googleButton，在我的javascript中应该有一个附加到它的事件处理程序。我尝试了许多不同形式的附加事件处理程序，它们都会抛出错误。我可以在jQuery中很容易地实现这种功能，也许我缺少了一些关于原型语法的东西以下是HTML： <!DOCTYPE html> <html

我想使用带有原型的javascript向按钮添加一个不引人注目的事件处理程序。下面我编写了一个非常简单的HTML示例，其中有两个按钮。第一个按钮在HTML中添加了onclick。第二个按钮的id是googleButton，在我的javascript中应该有一个附加到它的事件处理程序。我尝试了许多不同形式的附加事件处理程序，它们都会抛出错误。我可以在jQuery中很容易地实现这种功能，也许我缺少了一些关于原型语法的东西

以下是HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Assignment 10 - Part 1</title>
        <script src="./js/prototype.js" type="text/javascript"></script>
        <script src="./js/scriptaculous/scriptaculous.js?load=effects,controls" type="text/javascript"></script>
        <script src="./js/assignment10p1.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <fieldset>
            <legend>City Search</legend>
            <label for="cityName1">Enter a city name: </label>
            <input type="text" id="cityName1">
            <input type="button" value="Google City" onclick='googleSearch("cityName1")'>
            <input id="googleButton" type="button" value="Google City">
            <div id="cityAutoComplete" class="autocomplete"></div>
        </fieldset>   
    </body>
</html>

以下是firebug给出的错误：

TypeError: $(...) is null
$('googleButton').observe('click', googleSearch('cityName1'));

抱歉，这是一个重新发布，我删除了之前的问题，以为我已经发现了问题，但它仍然存在。其他人评论说我需要这样做：

$('#googleButton').observe('click', googleSearch('cityName1'));

但这是jQuery语法，不是原型。另一个人说它应该能工作，这就是我所听到的。除了上面加载的库之外，这是一个完整的示例。

有两个问题：

首先，你把处理程序接错了。此代码：

$('googleButton').observe('click', googleSearch('cityName1'));

立即调用googleSearch，传入'cityName1'，并将返回值传递到observe，就像foobar调用bar并将其返回值传递到foo一样。这应该是：

$('googleButton').observe('click', function() {
    googleSearch('cityName1');
});

…或

…基本上就是这样，但是使用Prototype的函数Curry

使用这两个函数中的任何一个，我们将函数传递给observe，当调用该函数时，它将调用googleSearch并传入“cityName1”

第二，在HTML中遇到脚本时，脚本会立即运行，除非您使用defer或async属性来修改行为。由于脚本位于HTML中元素的标记之上，因此当您试图访问该元素时，该元素还不存在

如果将该代码移动到它上面的dom:loaded回调中，它应该可以工作

或者，您可以将脚本移动到HTML的末尾，就在结束标记之前。然后您可以删除dom:loaded；脚本运行时，脚本上方标记定义的所有元素都已存在。

有两个问题：

首先，你把处理程序接错了。此代码：

$('googleButton').observe('click', googleSearch('cityName1'));

立即调用googleSearch，传入'cityName1'，并将返回值传递到observe，就像foobar调用bar并将其返回值传递到foo一样。这应该是：

$('googleButton').observe('click', function() {
    googleSearch('cityName1');
});

…或

…基本上就是这样，但是使用Prototype的函数Curry

使用这两个函数中的任何一个，我们将函数传递给observe，当调用该函数时，它将调用googleSearch并传入“cityName1”

如果将该代码移动到它上面的dom:loaded回调中，它应该可以工作

或者，您可以将脚本移动到HTML的末尾，就在结束标记之前。然后您可以删除dom:loaded；脚本运行时，脚本上方的标记定义的所有元素都已存在。

我怀疑这也是问题所在，并尝试过。将其添加到dom:loaded函数会导致它在页面加载后立即启动googleSearch，而不是等待单击事件。虽然我知道将其添加到末尾会起作用，但我正在尝试学习如何以原型式的方式进行此操作，因为在jQuery中进行此操作非常简单。@sage88:还有第二个问题，我已将其添加到答案的开头。这些都不是jQuery和Prototype之间的区别。如果你有$'googleButton'。点击，谷歌搜索'cityName1'；e、例如，在同一个地方使用jQuery，立即触发搜索的症状可能会有所不同，但这两个问题都存在。最好的，谢谢你，这完全解决了这个问题。我刚刚意识到原型和jQuery是多么相似。。。如果我一直使用jQuery，我会完成上面的工作。不幸的是，我当时正试图编写原型api文档，他们只是做了我上面所做的事情，我错误地认为原型只是做了不同的事情，这是非功能性的。谢谢你的咖喱例子，这是一个很好的用法。@sage88：不客气。您认为您在原型文档中看到了什么？我以前对它非常熟悉，而且他们最近并没有更新过，我不记得看到过这样的错误。这与其说是一个错误，不如说是一个在dom:loaded中实际希望如何操作的遗漏，而这个遗漏隐藏了这样一个事实，即按照他们的方式将其提供给dom:loaded将立即触发它。我怀疑这也是问题所在，并尝试过这样做。将其添加到dom:loaded函数会导致它在页面加载后立即启动googleSearch，而不是等待单击事件。虽然

我知道将它添加到末尾会起作用，我正在尝试学习如何以原型式的方式执行此操作，因为在jQuery中执行此操作非常简单。@sage88:还有第二个问题，我已将其添加到答案的开头。这些都不是jQuery和Prototype之间的区别。如果你有$'googleButton'。点击，谷歌搜索'cityName1'；e、例如，在同一个地方使用jQuery，立即触发搜索的症状可能会有所不同，但这两个问题都存在。最好的，谢谢你，这完全解决了这个问题。我刚刚意识到原型和jQuery是多么相似。。。如果我一直使用jQuery，我会完成上面的工作。不幸的是，我当时正试图编写原型api文档，他们只是做了我上面所做的事情，我错误地认为原型只是做了不同的事情，这是非功能性的。谢谢你的咖喱例子，这是一个很好的用法。@sage88：不客气。您认为您在原型文档中看到了什么？我以前对它非常熟悉，而且他们最近并没有更新过，我不记得看到过这样的错误。这与其说是一个错误，不如说是忽略了在dom:loaded中实际需要如何操作，而这一遗漏隐藏了这样一个事实，即按照dom:loaded的方式将其提供给dom:loaded将立即触发它。