2016-01-22 55 views
-4

开始之前我想说这是一个荷兰语网站,因此您可能会在代码中遇到荷兰语单词。所以,我得到这个代码的脚本,它计算的选择书籍的总价格:Javascript价格计算器不能在网站上工作

<script> 
function bereken() { 
var total = 0; 
if (document.forms[0].boek1.checked) { 
total += 27.74; 
} 
if (document.forms[0].boek2.checked) { 
total += 26.13; 
} 
if (document.forms[0].boek3.checked) { 
total += 35.57; 
} 
if (document.forms[0].boek4.checked) { 
total += 16.06; 
} 
totalP = "€" + total 
document.forms[0].total.value = totalP; 
} 
</script> 

</head> 

<body> 
<form> 
<input type="checkbox" name="boek1">Boek 1<br> 
<input type="checkbox" name="boek2">Boek 2<br> 
<input type="checkbox" name="boek3">Boek 3<br> 
<input type="checkbox" name="boek4">Boek 4<br> 
<div><input type="button" value="Totaal" onclick="bereken()"><br><br> 
<input type="text" value="€" name="total" size="5"> 
</form> 
</body> 
</html> 

它的工作的伟大,但是,当我把它放到我的网站将不再工作。

<!DOCTYPE html> 

<html> 

<head> 

<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<meta charset="UTF-8"> 
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/> 
<link id="pagefont" href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css"> 
<title>Rijn IJssel - de beste mbo-opleidingen</title> 

<script language="javascript"> 
function bereken() { 
var total = 0; 
if (document.forms[0].boek1.checked) { 
total += 27.74; 
} 
if (document.forms[0].boek2.checked) { 
total += 26.13; 
} 
if (document.forms[0].boek3.checked) { 
total += 35.57; 
} 
if (document.forms[0].boek4.checked) { 
total += 16.06; 
} 
totalP = "€" + total 
document.forms[0].total.value = totalP; 
} 

</script> 

</head> 

<body> 

<div id="content"> 
<h1>Welkom bij Rijn IJssel</h1> 

<div> 
    <p>Onderstaande boeken dien je buiten je laptop om nodig te hebben, deze zullen nodig zijn voor de basisvakken die je zult krijgen. Nog geen boeken? Je kan eenvoudig je boeken <a id="link" href="https://www.vandijk.nl/webshop/" target="_blank">hier</a> bestellen.</p> 
</div> 

<div id="boekentabel"> 
<table> 
    <tr> 
     <th>Code</th> 
     <th>Boek</th> 
     <th>Prijs</th> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="boek1">8359499</td> 
     <td>20/20 english ict niveau 3-4 werkboek b1</td> 
     <td>€27,74</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="boek2">8247686</td> 
     <td>Startrekenen 3f leerwerkboek deel a+b</td> 
     <td>€26,13</td> 
    </tr> 
</table> 
</div> 

<div> 
<p>Let op: onderstaande artikelen dien je pas te bestellen na overleg met je docent:</p> 
</div> 

<div> 
<table id="boekentabel"> 
    <tr> 
     <th>Code</th> 
     <th>Boek</th> 
     <th>Prijs</th> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="boek3">8829764</td> 
     <td>(ECK) NU Nederlands online 2-jaarslicentie student</td> 
     <td>€35,57</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="boek4">8183584</td> 
     <td>Startrekenen online + examencoach rekenen (ER), lic 12 mnd</td> 
     <td>€16,06</td> 
    </tr> 
</table> 
</div> 

<input id=totaalbutton type="button" value="Kosten berekenen"  onclick="bereken()"> 
<input type="text" value="€" name="total" size="5"> 

</div> 

</body> 

</html> 

我在涂料中做了一个图片来澄清问题,也许它会帮助解决问题?有谁知道如何解决这个问题?

click for image

+1

你有两个相同的ID'boekentabel'。这是无效的。 – Xufox

+2

您的html中没有定义任何表单,对吗? – Alfabravo

+0

[请包含显示此问题发生的MCVE(强调**最小**)](http://stackoverflow.com/help/mcve)。堆栈片段和jsfiddle都是不错的选择。 – zzzzBov

回答

2

你没有表单元素所以document.forms不会找到任何。