Javascript中的错误-打开URL加上用户使用Javascript输入的文本

Question

我的JavaScript代码怎么了？

它应该是一个输入框和一个提交按钮。 用户将在输入框中键入的内容都将添加到默认的Web URL，但是它不起作用。

实际上，我遇到的错误是单击“提交”按钮后没有任何反应。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


 <script type="text/javascript">
$("#btn").click( function() {
    var url = "http://www.hellothere.com/print/" + $("#text").val();
    window.open(url);
});
 </script>


</head>

<body>
 <p>
  <input type="text" id="text">
  <input type="button" id="btn" value="Submit">
</p>
</body>
</html>

这是JSFiddle

顺便说一句，当我将这些代码放在JSFiddle中时，一切都正常。 当我在Dreamweaver中传输这些完全相同的代码时，问题就开始了。 没事

Answer 1

如下使用它：

window.location = url;

这会将您重定向到url 。

更新：

您的代码中的问题是，您在定义btn之前先在head中定义了click函数。 请参阅下面的更新代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<p>
<input type="text" id="text">
<input type="button" id="btn" value="Submit">
<script type="text/javascript">
    $("#btn").click(function() {
    var url = "http://www.hellothere.com/print/"; + $("#text").val();
    window.open(url);
});
</script>
</p>
</body>
</html>

在此，我定义了创建btn之后的click函数。 我已经测试了代码，它可以完美运行。

Answer 2

尝试

   $(document).ready(function() {   

    $('#btn').click(function (){

    var url = "http://www.mywebsite.com/print/" + $('#text').val();
    window.location.href = url;

    });

  })

Answer 3

您的代码有几个问题：

您不应同时具有src属性和内联代码的<script>元素。 将其拆分为两个单独的元素。
引用#btn元素的内联代码不起作用，因为该元素在标记中目前尚不存在。 将其移动到#btn元素之后，或使用$(document).ready()或类似方法延迟执行。
另外，您应该努力产生有效的HTML 。 结构上不健全的HTML可能会导致令人惊讶的DOM树和其他意外行为。

也许是这样的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<head>    
 <title>JQuery click test</title>
 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>
 <p>
  <input type="text" id="text">
  <input type="button" id="btn" value="Submit">

 <script type="text/javascript">
 $("#btn").click( function() {
     var url = "?" + $("#text").val();
     window.location = url;
 });
 </script>

Answer 4

Dreamweaver 可能通过file：//协议访问HTML文件。 尝试改变

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

至

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

而且，正如Nisse Engstrom所建议的那样，我会将您的脚本包装在$（document）.ready（function（）{...}）;中。

Answer 5

准备好文档后，您必须注册click事件。

<head>
    <script src="jquery.js"></script>
</head>

<body>
    <script type="text/javascript">
        $(document).ready(function(){
            console.log('ready');

            $("#btn").click( function() {
                console.log('click')
                var url = "http://www.hellothere.com/print/" + $("#text").val();
                console.log(url);
                window.open(url);
            });
        });
    </script>
    <p>
        <input type="text" id="text">
        <input type="button" id="btn" value="Submit">
    </p>
</body>

这件事肯定会起作用，完全没有问题。 但是http://www.hellothere.com/print/网站具有一定的服务器代码，因此，如果发现无效的网址，则会将其重定向到http://www.hellothere.com/print/ ，因此再次将http ：//www.hellothere.com/print/test变为http://www.hellothere.com/print/ 。 那不是代码的错误。 在Javascript中将url更改为ERROR- 打开一个URL ，再加上用户使用Javascript输入的文本，您将看到该代码可以正常工作。

Answer 6

首先，将jQuery src从src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"更改为src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" 。

其次，在定义btn之前执行包含"#btn" js。 定义"#btn"后，移动脚本。

Javascript中的错误-打开URL加上用户使用Javascript输入的文本

问题描述

6 个解决方案

解决方案1
2 已采纳 2014-07-05 07:26:46

更新：

解决方案2
1 2014-07-05 07:17:27

解决方案3
1 2014-07-07 22:16:44

解决方案4
1 2014-07-13 16:43:43

解决方案5
1 2014-07-13 20:16:02

解决方案6
0 2014-07-14 19:21:08

Javascript中的错误-打开URL加上用户使用Javascript输入的文本

问题描述

6 个解决方案

解决方案1 2 已采纳 2014-07-05 07:26:46

更新：

解决方案2 1 2014-07-05 07:17:27

解决方案3 1 2014-07-07 22:16:44

解决方案4 1 2014-07-13 16:43:43

解决方案5 1 2014-07-13 20:16:02

解决方案6 0 2014-07-14 19:21:08

解决方案1
2 已采纳 2014-07-05 07:26:46

解决方案2
1 2014-07-05 07:17:27

解决方案3
1 2014-07-07 22:16:44

解决方案4
1 2014-07-13 16:43:43

解决方案5
1 2014-07-13 20:16:02

解决方案6
0 2014-07-14 19:21:08