Javascript中的错误-打开URL加上用户使用Javascript输入的文本
[英]ERROR in Javascript - Opening a URL PLUS the text input by the user using Javascript
问题描述
What's wrong with my javascript codes? 
我的JavaScript代码怎么了？
It's supposed to be an input box and a submit button. 它应该是一个输入框和一个提交按钮。 What ever the user will type in the input box will be added to the default web url, but it's not working. 用户将在输入框中键入的内容都将添加到默认的Web URL，但是它不起作用。
Actually the error I encounter is that nothing is happening after I click the submit button. 实际上，我遇到的错误是单击“提交”按钮后没有任何反应。
<!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>
here's the JSFiddle 这是JSFiddle
BTW, everything is working when i put those codes in JSFiddle. 顺便说一句，当我将这些代码放在JSFiddle中时，一切都正常。 The problem starts when I transfer those same exact codes in Dreamweaver. 当我在Dreamweaver中传输这些完全相同的代码时，问题就开始了。 Nothing is happening. 没事
6 个解决方案
解决方案1
2 已采纳 2014-07-05 07:26:46
Use it as follows : 如下使用它：
window.location = url;
This will redirect you to the url . 这会将您重定向到url 。
Update : 更新：
The problem in your code is that you are defining the click function in the head before btn is defined. 您的代码中的问题是，您在定义btn之前先在head中定义了click函数。 See the updated code below : 请参阅下面的更新代码：
<!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>
In this I have defined the click function after btn is created. 在此，我定义了创建btn之后的click函数。 I have tested the code and it works perfectly. 我已经测试了代码，它可以完美运行。
解决方案2
1 2014-07-05 07:17:27
Try 尝试
$(document).ready(function() {
$('#btn').click(function (){
var url = "http://www.mywebsite.com/print/" + $('#text').val();
window.location.href = url;
});
})
解决方案3
1 2014-07-07 22:16:44
There are several problems with your code: 您的代码有几个问题：
- You should not have a
<script>element with both asrcattribute and inline code.您不应同时具有src属性和内联代码的<script>元素。 Split it into two separate elements.将其拆分为两个单独的元素。 - The inline code to reference the
#btnelement doesn't work, because the element doesn't exist yet at this point in the markup.引用#btn元素的内联代码不起作用，因为该元素在标记中目前尚不存在。 Move it after the#btnelement, or use a$(document).ready()or similar to delay the execution.将其移动到#btn元素之后，或使用$(document).ready()或类似方法延迟执行。 - Also, you should strive to produce valid HTML . 另外，您应该努力产生有效的HTML 。 Structurally unsound HTML may cause surprising DOM trees and other unexpected behaviour. 结构上不健全的HTML可能会导致令人惊讶的DOM树和其他意外行为。
Perhaps something like this: 也许是这样的：
<!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>
解决方案4
1 2014-07-13 16:43:43
Dreamweaver possibly accesses HTML files by the file:// protocol. Dreamweaver 可能通过file：//协议访问HTML文件。 Try changing 尝试改变
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
to 至
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Also, I'd wrap your script up in a $(document).ready(function(){...});, as suggested by Nisse Engstrom. 而且，正如Nisse Engstrom所建议的那样，我会将您的脚本包装在$（document）.ready（function（）{...}）;中。
解决方案5
1 2014-07-13 20:16:02
You've to register the click event when the document is ready. 准备好文档后，您必须注册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>
This thing will surely work, no issue at all. 这件事肯定会起作用，完全没有问题。 But http://www.hellothere.com/print/ website has a certain server code so that if it finds any url which is not valid then it redirects it to http://www.hellothere.com/print/ again so http://www.hellothere.com/print/test becomes http://www.hellothere.com/print/ . 但是http://www.hellothere.com/print/网站具有一定的服务器代码，因此，如果发现无效的网址，则会将其重定向到http://www.hellothere.com/print/ ，因此再次将http ：//www.hellothere.com/print/test变为http://www.hellothere.com/print/ 。 That is not a bug of the code. 那不是代码的错误。 Change the url to ERROR in Javascript - Opening a URL PLUS the text input by the user using Javascript and you'll see the code'll work. 在Javascript中将url更改为ERROR- 打开一个URL ，再加上用户使用Javascript输入的文本 ，您将看到该代码可以正常工作。
解决方案6
0 2014-07-14 19:21:08
Firstly, change your jQuery src from src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" to src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" . 首先，将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" 。
Secondly, your js containing "#btn" is executed before you have defined btn . 其次，在定义btn之前执行包含"#btn" js。 Move your script after you define "#btn" . 定义"#btn"后，移动脚本。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.