基本形式-Javascript代码不起作用

Basic Form - Javascript Code Not working

本文关键字：不起作用 代码 -Javascript 基本形      更新时间：2023-09-26

我很难让这些代码正常工作。我正试图从表单中的任何文本创建一个URL。例如，如果你在文本字段中提交"Hello"，它将导致"http://www.Hello.com."任何关于为什么这不起作用的指标都将不胜感激

代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<form name="search" action="jsTest.html" onsubmit="return URL()" method="post">
Query: <input type="text" id="query" name="query"/><br>
Submit: <input type="submit" value="Submit"/>
</form>
<script type="text/javascript">
function URL()
{
var x = document.search.query.val();
document.write("http://www.");
document.write(x);
document.write(".com/");
return false;
}
</script>
</body>
</html>

答案：

<form>
Query: <input type="text" id="query" name="query"/><br>
Submit: <input type="submit" value="Submit" onclick="getURL()"/>
</form>
<script type="text/javascript">
   function getURL()
    {
    var x = document.getElementById("query").value;
    alert(x); //Debug statement
    }
</script>

Righteo。不知道这里发生了什么，所以我从头开始重写。这是有效的，我测试了它，至少使用alert框。

可能发生了什么：

我认为javascript函数可能需要以小写字母开头。

来自w3schools:

JavaScript区分大小写。函数关键字必须写入小写字母，并且必须使用相同的函数名称中使用的大写字母。

我从表单中删除了action，因为它很可能试图找到该文件并激活该文件中的javascript代码。我删除了post，因为它在我的计算机上搞砸了，可能是因为它在离线浏览器模式下运行（即，实际上没有使用POST想要的HTTP请求）

onclick都是小写字母，而不是camelcase，这可能也导致了一些问题。我总是使用onclick而不是form onsubmit，因为通常情况下，您的表单会希望链接到.PHP文件，而使用按钮的onclick可以提供额外的灵活性。

您设置了x变量，但引用了未定义的query变量。保持你的名字一致。

您可以修改您的javascript。我建议您使用jQuery。

function modify_url(){
        var q = $('input[name="query"]');
        q.val('http://www.' + q.val() + '.com');
        return true;
    }

使用.value而不是val()，即jQuery。

请参阅：http://jsfiddle.net/wCS9d/

相关文章：