HTML和JQuery文件不通信

我剛開始嘗試自學一些基本的jQuery和HTML。我參加了一些codecademy課程，並且自己嘗試了一些東西。我有一個.html文件，它設置了5個輸入變量，一個按鈕和一個表格。我正在嘗試在輸入中輸入值，並在按鈕單擊時用新值替換表中現有的值。當我在本地打開html文件時，它似乎加載正常。我輸入了值，但腳本似乎沒有調用.js文件代碼，因爲沒有任何反應。HTML和JQuery文件不通信

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>

----的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>"); 
    }) 
})

來源

2014-02-28 Trevor

您正在使用哪種瀏覽器？你碰巧得到關於被封鎖內容的任何警告嗎？ –

轉到瀏覽器的開發人員工具，查看控制檯顯示的錯誤（如果有）。這應該指向正確的方向。還有，爲什麼你的'body'標籤之外有一個表單和按鈕？ – Goose

兩件事。首先，您的表單和按鈕不在身體標記之內（需要位於其中）。二，在調試JavaScript時，使用瀏覽器的開發工具（按F12）和控制檯。 – j08691

你需要包括jQuery庫。添加到您的腦袋使用谷歌託管版本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

或下載您自己的版本並鏈接到它。 jQuery不是JavaScript的固有部分，必須包含它。

來源

2014-02-28 21:59:44

+1：成爲第一個，完整的源！ –

我不確定如何回覆該羣組...似乎我只能回覆個人回覆？無論如何，謝謝大家的幫助。在IE中運行調試器之後，我收到以下錯誤消息： SCRIPT5009：'$'未定義 jquery.js，第1行字符1 – Trevor

@ user3298335您是否在我的答案中添加了代碼？它沒有定義，因爲你沒有包含jQuery庫。 –

-1

我猜你錯過了jQuery核心JavaScript文件。

包含此：

<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.0.min.js'></script>

來源

2014-02-28 21:58:20

爲什麼所有的downvotes？ OP顯然缺少jQuery文件！ –

我不確定我自己。也許是因爲你沒有包括如何？ –

Ups，你是對的。 :) – sinisake

你缺少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>

來源

2014-02-28 21:59:33

HTML和JQuery文件不通信

回答

相關問題