我创建了一个简单的网站，您可以在其中选择一个选项。我用<select>做到了。选择一个选项并且用户单击该按钮时，应显示一个表。但是当我多次按下按钮时，每次单击按钮时都会出现一个附加表格。
var prijsi = 19.99;
var kwartaal = prijsi * 3;
var jaar = prijsi * 12;
var contract = prijsi * 24;
var prijst = 30.99;
var prijskw = prijst * 3;
var prijsjaar = prijst * 12;
var prijscontract = prijst * 24;
var prijsa = 50.99;
var prijsakw = prijsa * 3;
var prijsajaar = prijsa * 12;
var prijsacontract = prijsa * 24;
var extratela = prijsa + 1;
var extratelkw = (3*1) + prijsakw;
var extrateljaar = (12*1) + prijsajaar;
var extratelcontract = (24*1) + prijsacontract;
var extratelt = prijst + 1;
var extrateltj = (1*12) + prijsjaar;
var extratkw = (3*1) + prijskw;
var extratc = (24*1) + prijscontract;
function kostenBerekenen(){
pakket = document.getElementById('pakket').value;
if(pakket == ""){
document.getElementById('resultaat').innerHTML+=("Kies een pakket!");
}
else if(pakket == 'internet')
{
document.getElementById('resultaat').innerHTML+=("<table border='0' id='kosten'><thead colspan='2'><th>Kosten</th></thead><tr><td>Kosten per maand: €" + prijsi +
'</td></tr><tr><td>Kosten per kwartaal: ' +' €' + kwartaal +
'</td></tr><tr><td>Kosten per jaar: ' + '€' + jaar + '</td></tr><tr><td>Kosten per contract (24 maanden): €' + contract + '</td></tr></table>');
}
else if(pakket == 'telefonie'){
document.getElementById('resultaat').innerHTML+=("<table border='0' id='kosten'><thead colspan='2'><th>Kosten</th></thead><tr><td>Kosten per maand: €" + prijst +
'</td></tr><tr><td>Kosten per kwartaal: ' +' €' + prijskw +
'</td></tr><tr><td>Kosten per jaar: ' + '€' + prijsjaar + '</td></tr><tr><td>Kosten per contract (24 maanden): €' + prijscontract +
'</td></tr><tr><td>Kosten p/maand met <strong>extra telefoon:</strong> €' + extratelt + '</td></tr><tr><td>Kosten per kwartaal met <strong>extra telefoon:</strong> €' + extratkw +
'</td></tr><tr><td>Kosten per jaar met <strong>extra telefoon:</strong> €' + extrateltj.toFixed(2) + '</td></tr><tr><td>Kosten per standaard contract(24maanden) met <strong>extra telefoon:</strong> €' +
extratc + '</table>');
}
else{
document.getElementById('resultaat').innerHTML+=("<table border='0' id='kosten'><thead colspan='2'><th>Kosten</th></thead><tr><td>Kosten per maand: €" + prijsa +
'</td></tr><tr><td>Kosten per kwartaal: ' +' €' + prijsakw +
'</td></tr><tr><td>Kosten per jaar: ' + '€' + prijsajaar + '</td></tr><tr><td>Kosten per contract (24 maanden): €' + prijsacontract + '</td></tr>' +
'<tr><td>Kosten p/maand met <Strong>extra telefoon:</strong> €' + extratela + '</td></tr><tr><td>Kosten per kwartaal met <strong>extra telefoon:</strong> €' + extratelkw +
'</td></tr><tr><td>Kosten per jaar met <strong>extra telefoon:</strong> €' + extrateljaar + '</td></tr><tr><td>Kosten per standaard contract(24maanden) met <strong>extra telefoon:</strong> €' + extratelcontract + '</table>');
}
}; <!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta content="helpdeskafdeling" name="description">
<meta content="problemen, internet, internet problemen, helpen, helpdesk"
name="keywords">
<meta content="Tayfun Kayahan" name="author">
<title>Wat kost het | IDC Solutions</title>
<link href="css/styles.css" rel="stylesheet">
<link rel='shortcut icon' type='image/x-icon' href='images/favicon.ico' />
<!--<script src='javascripts/kosten.js'></script>-->
</head>
<body>
<div id="content">
<header>
<hgroup>
<h1><img alt="logo" id="solution" src="images/solution.png">
IDC Solutions</h1>
</hgroup>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="helpdeskafdeling.html">Klantenservice</a>
</li>
<li>
<a href="bundels.html">Bundels</a>
</li>
<li>
<a href="about.html">Over ons</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</header>
</div>
<div id="info">
<h2>Bereken hier al uw kosten</h2><img id=
"telefoon" src="images/telefoon.png"> <img id="internet" src=
"images/internet.png">
<br/>
<Br/>
<td><Strong>Kies uw bundel : </Strong></td>
<select id="pakket">
<option value="">Kies uw bundel</option>
<option value="internet">Internet</option>
<option value="telefonie">Telefonie</option>
<option value="allin">All-in-1</option>
</select>
<button id="bereken" value="bereken" onclick='kostenBerekenen();'>Bereken uw Kosten!</button>
<div id="resultaat"></div>
</div>
<footer>
<small>©Tayfun Kayahan | IDC Solutions | 1e Jaars student te ID
College Zoetermeer | Online Helpdesk | 1011176 |</small>
</footer>
</body>
</html>
答案 0 :(得分：1)
每次用户点击时，您都会附加表格。使用此：
document.getElementById('resultaat').innerHTML= ...
而不是：
document.getElementById('resultaat').innerHTML+= ...
答案 1 :(得分：0)
你可以试试这个..
function kostenBerekenen(){
document.getElementById('resultaat').innerHTML = ''; //insert this statement
pakket = document.getElementById('pakket').value;
/* other...*/
}