Fatal编程技术网
  • jquery/
  • HTML和JQuery文件不通信

HTML和JQuery文件不通信

jquery html

HTML和JQuery文件不通信,jquery,html,Jquery,Html,我刚刚开始尝试教自己一些基本的jQuery和HTML。我参加了一些课程，我自己也在尝试一些东西。我有一个.html文件，它设置了5个输入变量、一个按钮和一个表。我试图在输入中输入值，然后单击按钮，用新值替换表中的现有值。当我在本地打开html文件时，它似乎可以正常加载。我输入了值，但脚本似乎没有调用.js文件代码，因为什么都没有发生 Website.html代码 <!DOCType html> <html> <head> <tit

我刚刚开始尝试教自己一些基本的jQuery和HTML。我参加了一些课程，我自己也在尝试一些东西。我有一个.html文件，它设置了5个输入变量、一个按钮和一个表。我试图在输入中输入值，然后单击按钮，用新值替换表中的现有值。当我在本地打开html文件时，它似乎可以正常加载。我输入了值，但脚本似乎没有调用.js文件代码，因为什么都没有发生

Website.html代码

<!DOCType html>
<html>
    <head>
        <title>Enter Values</title>
        <script type='text/javascript' src='jquery.js'></script>
    </head> 
    <form>
    BusID: <input type="text" name="busId" value="Enter BusID">
    xCord: <input type="text" name="xCord" value="Enter xCords">
    yCord: <input type="text" name="yCord" value="Enter yCords">
    timeStamp: <input type="text" name="timeStamp" value="Enter Time Stamp">
    eventType: <input type="text" name="eventType" value="Enter Event Type">
    </form>
    <button>Click Me!</button><br/>
    <body>
        <table id="tableClassName">
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        </table>
    </body>
    <div>
    </div>
</html>


输入值
巴士：
xCord：
yCord：
时间戳：
事件类型：
点击我

12345
----jquery.js文件代码

$(document).ready(function() {
    $('button').click(function() {
        var busId = $("input[name=busId]").val();
        var xCord = $("input[name=xCord]").val();
        var yCord = $("input[name=yCord]")val();
        var timeStamp = $("input[name=timeStamp]").val();
        var eventType = $("input[name=eventType]").val();
        $('#tableClassName').html("<tr>""<td>"+busId+"</td>""<td>"+xCord+"</td>""<td>"+yCord+"</td>""<td>"+timeStamp+"</td>""<td>"+eventType+"</td>""</tr>");
    })
})

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var busId=$（“输入[name=busId]”）.val（）；
var xCord=$（“输入[name=xCord]”）。val（）；
var yCord=$（“输入[name=yCord]”）val（）；
var timeStamp=$（“输入[name=timeStamp]”）。val（）；
var eventType=$（“输入[name=eventType]”）val（）；
$（'#tableClassName'）.html（“+busId+”+xCord+“+yCord+”+“+timeStamp+”“+eventType+”）；
})
})
我猜您错过了jQuery核心JavaScript文件

包括：

<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.0.min.js'></script>
您缺少jquery源文件。下面是html页面的外观

<!DOCType html>
    <html>
        <head>
        <title>Enter Values</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type='text/javascript' src='jquery.js'></script>
    </head> 
    <form>
    BusID: <input type="text" name="busId" value="Enter BusID">
    xCord: <input type="text" name="xCord" value="Enter xCords">
    yCord: <input type="text" name="yCord" value="Enter yCords">
    timeStamp: <input type="text" name="timeStamp" value="Enter Time Stamp">
    eventType: <input type="text" name="eventType" value="Enter Event Type">
    </form>
    <button>Click Me!</button><br/>
    <body>
        <table id="tableClassName">
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        </table>
    </body>
    <div>
    </div>
</html>


输入值
巴士：
xCord：
yCord：
时间戳：
事件类型：
点击我

12345
您需要包括jQuery库。将此添加到您的头脑中，以使用谷歌的托管版本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
或者下载您自己的版本并链接到它。jQuery不是javascript固有的一部分，必须包含在内。

您使用的是哪种浏览器？您是否碰巧收到有关被阻止内容的任何警告？请转到浏览器的开发人员工具，查看控制台显示的错误（如果有）。这将为你指明正确的方向。还有，为什么你的
标签外面有一个表单和按钮呢。首先，表单和按钮位于body标签的外部（需要位于其中）。第二，在调试JavaScript时，使用浏览器的开发工具（按F12键）和控制台。仅供参考：您似乎遗漏了一点<代码>var yCord=$（“输入[name=yCord]”）val（）还有一件事，不要忘记通过验证器运行代码以帮助查找错误。这是一个很好的选择。为什么所有的人都投了反对票？OP显然缺少jQuery文件！我自己也不确定。也许是因为你没有包括怎么做？@nevermind:它的来源显示在OP。。。显然不是jQuery core js。是的，顺便说一句，我没有否决你的答案（通常我也不会这么做）。我不知道如何回应这个群体。。。似乎我只能回应个人的回复？无论如何，谢谢大家的帮助。在IE中运行调试器后，我收到以下错误消息：SCRIPT5009:“$”是未定义的jquery.js，第1行字符1@user3298335你在我的回答中加上密码了吗？它是未定义的，因为您没有包括jQuery库。是的，我已经添加了它，但实际上我只是发现了问题，因为我反复检查，没有复制/粘贴错误或其他东西。我不得不将“http:”添加到您的src中，现在它可以工作了。谢谢@user3298335好的，我将更改我的答案，将其包括在内。