本地添加javascript到xampp做數學/公式

我想製作一個表格，用戶可以在其中填充某些單元格的值，然後單擊「提交」以顯示計算結果。我的目錄中有jquery-2.0.3.min.js和script.js。這是我的HTML代碼：本地添加javascript到xampp做數學/公式

<!DOCTYPE html> 
<html> 
<head> 
<title>Inteligence Decision Support System</title> 
<script src='localhost/idss/jquery-2.0.3.min.js'></script> 
<script type="text/javascript" src='localhost/idss/script.js' charset="utf-8"></script> 
</head> 

<body> 
<table border="1"> 

<tr> 
<th>Name</th> 
<th>Cost</th> 
<th>x20</th> 
<th>x25</th> 
</tr> 

<tr> 
<td>someName</td> 
<td><input name="Cost" type="text" value="0"></td> 
<td><input name="a20" type="text" value=""></td> 
<td><input name="a25" type="text" value=""></td> 
</tr> 

</table> 
<input type="button" onclick="Zcount()" value="Submit" > 
</body> 
</html>

而這裏的script.js文件

<script type="text/javascript"> 
function Zcount(){ 
    var cost, a20, a25; 

    a20 = document.getElementById("a20").value; 
    a25 = document.getElementById("a25").value; 

    cost = (2*parseInt(a20))+(3*parseInt(a25)); 
    document.getElementById("Cost").value=cost; 
} 
</script>

但是當我充滿A20和A25，並點擊提交按鈕，什麼都沒有發生。結果保持爲零。我哪裏做錯了？

來源

2013-12-12 user3096079

這是什麼都與XAMPP辦？ – veelen

我想弄清楚我調用腳本文件的方式是否是錯誤的，或者我應該把它放在xampp文件夾中的其他地方。無論如何，我只是試圖把腳本放在我的html代碼中，但那也不管用。 – user3096079

您必須檢查外部javascripts是否實際加載。您可以通過在瀏覽器中點擊鼠標右鍵點擊Chrome或Firefox中的「檢查元素」。如果您在這些檢查員中點擊「控制檯」，您可以檢查它們是否已加載。如果它們不是，則必須在HTML腳本元素中調整src屬性。

此外，您必須使用輸入的id屬性，因爲您使用的是getElementById，並且正式輸入必須被表單元素包圍。因此，在body標籤中，您的HTML將如下所示：

<form id="form" action="#" method="post"> 
<table border="1"> 

<tr> 
<th>Name</th> 
<th>Cost</th> 
<th>x20</th> 
<th>x25</th> 
</tr> 

<tr> 
<td>someName</td> 
<td><input name="Cost" id="Cost" type="text" value="0"></td> 
<td><input name="a20" id="a20" type="text" value=""></td> 
<td><input name="a25" id="a25" type="text" value=""></td> 
</tr> 

</table> 
<input type="submit" value="Submit" > 
    </form>

在script.js中，您不必使用HTML腳本標記。

爲什麼你包括jQuery的，如果你不使用它？

但是，因爲你這樣做，你可以使用這個腳本：

$('form').submit(function(){ 

    var cost, a20, a25; 

    a20 = $("#a20").val(); 
    a25 = $("#a25").val(); 

    cost = (2*parseInt(a20))+(3*parseInt(a25)); 
    $("#Cost").val(cost); 
    return false; 
});

工作的jsfiddle：http://jsfiddle.net/jwvanveelen/ch2wR/

來源

2013-12-12 18:14:02 veelen

非常感謝您的回覆！我是新手，只花了四個小時調整它。我檢查了控制檯，它是空的，所以這意味着它沒有加載？如果我把Zcount函數放在html代碼中怎麼辦？我只是試着把我的Zcount函數放在body html中。使用但計算仍然不起作用。 – user3096079

如果您的控制檯在重新加載頁面時沒有顯示任何內容，這意味着一切都很好。所以，你不必改變標籤之間的任何東西。如果您複製我在標記中提供的html，並複製您在script.js中提供的JavaScript，它應該可以工作。 – veelen

啊，我明白了。它現在被加載。但數學依然不起作用，成本仍然是0.我嘗試將公式改爲a20和a25之間的簡單加法，它仍然是0. – user3096079

本地添加javascript到xampp做數學/公式

回答

相關問題