Javascript onclick事件不会触发

时间:2012-10-02 10:58:02

标签: javascript html function events onclick

我在这里有一些代码:

<html>
<script type="text/javascript">
    document.getElementById('myElement').onclick = function () 
    {
        var searchterm = document.getElementById('bereich').value;
        document.href("http://www.google.com/serach?q=" + searchterm);
    }
</script>
<body>
<center>
    <img src="https://www.google.de/images/srpr/logo3w.png"><br>
    <input type="text" name="q"> &nbsp; <input type="button" value="Search" onclick="startSearch()">
</center>

哪个不起作用。我知道这根本就是一个菜鸟,但我不知道javascript。有人可以帮我吗?

增加:

我也尝试过:

<html>
<body>
<center>
<img src="https://www.google.de/images/srpr/logo3w.png"><br>
<input type="text" name="q"> &nbsp; <input type="button" value="Search" onclick="startSearch()">
</center>
<script type="text/javascript">
     window.onload = function(){
document.getElementById('myElement').onclick = function () 
{
    var searchterm = document.getElementById('bereich').value;
    document.href = "http://www.google.com/serach?q=" + searchterm;
}
     };

<html>
<body>
<center>
<img src="https://www.google.de/images/srpr/logo3w.png"><br>
<input type="text" name="q"> &nbsp; <input type="button" value="Search" name="searchButton" onclick="startSearch()">
</center>
<script type="text/javascript">
function triggerGoogleSearch() 
{
var searchterm = document.getElementById('bereich').value;
document.href("http://www.google.com/serach?q=" + searchterm);
}   

document.getElementById('searchButton').onclick = triggerGoogleSearch();
</script>
</body>
</html>

4 个答案:

答案 0 :(得分:3)

改变这个:

document.getElementById('myElement').onclick = function ()

到此:

function startSearch ()

并改变这一点:

document.href("http://www.google.com/serach?q=" + searchterm);

到此:

window.location.href = "http://www.google.com/serach?q=" + searchterm;

并将id="bereich"添加到<input type="text" name="q">,如下所示:

<input type="text" name="q" id="bereich">

如果你想通过getElementById找到它。

另外,更改网址:

http://www.google.com/serach

到此:

http://www.google.com/search

更新:

实际上,不要介意所有这些更正,忘记JavaScript!

只需制作一个简单的HTML表单:

<img src="https://www.google.de/images/srpr/logo3w.png"><br>
<form action="http://www.google.com/search" method="get">
<input type="text" name="q">
<input type="submit" value="Search">
</form>

请参阅THIS DEMO

我认为我们都在尝试修复您的代码并完全错过了一个更简单的解决方案。 :)

答案 1 :(得分:1)

此代码中存在许多错误。我列出了一些,但我可能错过了一些。

1)将你的脚本放在正文的末尾,它会起作用。现在它在元素存在之前执行。所以事件处理程序根本没有添加。

2)没有document.href功能。使用document.href =

3)你没有任何id为myElement或bereich

的元素

4)您需要对搜索词进行编码

5)它可能是“搜索”,而不是“搜索”

6)你的按钮什么都不做,它叫做不存在的功能

7)最好将它包含在onload回调中:

<html>
<body>
<center>
    <img src="https://www.google.de/images/srpr/logo3w.png"><br>
    <input type="text" name="q" id=bereich> &nbsp; <input type="button" value="Search" id=myElement">
</center>
<script type="text/javascript">
         window.onload = function(){
    document.getElementById('myElement').onclick = function () 
    {
        var searchterm = document.getElementById('bereich').value;
        document.href = "http://www.google.com/search?q=" + encodeURIComponent(searchterm);
    }
         };
</script>
</body>
</html>

答案 2 :(得分:0)

function triggerGoogleSearch() 
{
    var searchterm = document.getElementById('bereich').value;
    document.href("http://www.google.com/serach?q=" + searchterm);
}   

document.getElementById('myElement').onclick = triggerGoogleSearch();

你能试试吗?

答案 3 :(得分:0)

<html>
<body>
<center>
    <img src="https://www.google.de/images/srpr/logo3w.png"><br>
    <input type="text" name="q"> &nbsp; <input type="button" value="Search" onclick="startSearch()" id="myElement">
</center>
<script type="text/javascript">
         window.onload = function(){
    document.getElementById('myElement').onclick = function () 
    {
        var searchterm = document.getElementById('bereich').value;
        document.href("http://www.google.com/serach?q=" + searchterm);
    }
         };
</script>
</body>
</html>