下面是一个简单的javascript/jquery百分比变化计算器的代码。用户以两种不同的形式输入他们的两个所需值，结果在下面的div 中返回。有两个按钮，计算（调用 pChange 函数）和清除 Div（调用清除函数）。该函数工作正常，直到用户使用 Clear 函数清除答案div。按下清除按钮后，函数不再将答案文本附加到答案文本div。
//Percent change Calculation
var pChange = function(){
var a = document.getElementById("number1").value;
var b = document.getElementById("number2").value;
var c = b-a;
var fOutPut = c / a;
fOutput=fOutPut*100;
var finalOut=fOutput.toFixed(2);
$('#answerText').append("<p><strong>" + "The percentage change is "+finalOut+ "%" + "</strong></p>");
};
//ClearPage Function
var Clear = function(){
$('#answer').html("");
};
//Submit via enter key press instead of button event.
$("#number2").keyup(function(event){
if(event.keyCode == 13){
$("#Calc").click();
}
});
此外，该 HTML
<html>
<head>
<script src="jquery-2.1.3.min.js"></script>
<script src="materialize/js/materialize.min.js"></script>
<script src="slidebars.min.js"></script>
<link type="text/css" rel="stylesheet" href="materialize/css/materialize.css" media="screen,projection"/>
<title>Percent Change Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Slidebars CSS -->
<link rel="stylesheet" href="slidebars.css">
<link rel="stylesheet" href="Percent.css"
</head>
<body>
<!--Main content-->
<div id="sb-site">
<div class="navbar-fixed">
<nav>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
<div class="nav-wrapper">
<div class="sb-toggle-left">
<a href="#" class="brand-logo"><img class="navicon" src="navicon-round.svg"></img></a>
</div>
<a href="#" class="brand-logo center">Percent Change Calculator</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a class="dropdown-button" href="#" data-activates="dropdown1">Math Tools<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
</ul>
</div>
</nav>
</div>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#">Percent Change</a></li>
<li class="divider"></li>
<li><a href="trianglecalculator.html">Triangle Calculator</a></li>
</ul>
<!--Alternate Menu Toggle-->
<!--<div id="ButtonContainer">
<div class="sb-toggle-left">
<div class="navicon-line"></div>
<div class="navicon-line"></div>
<div class="navicon-line"></div>
</div>-->
<div id="input-fields">
<div class="row">
<div class="input-field col s3">
<input value="Number #1" id="number1" type="number" class="validate">
<label class="active" for="number1">Number #1</label>
</div>
</div>
<div class="row">
<div class='input-field col s3'>
<input value="Number #1" id="number2" type="number" class="validate">
<label class="active" for="number2">Number #2</label>
</div>
</div>
<div id='answer'>
<div id='answerText'></div></div>
<table>
<tr>
<td>
<button id = "Calc" type = 'button' onclick = "pChange();">Click to Calculate Percent Change</button>
</td>
<td>
<button id = "Clear" type = 'button' onclick = "Clear();">Click to clear screen</button>
</td>
</tr>
</table>
</div>
</div>
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="140">
<!-- Your left Slidebar content. -->
<ul id="dropdown2" class="dropdown-content">
<li><a href="#">About Me</a></li>
<li class="divider"></li>
<li><a href="#">About This Site</a></li>
</ul>
<ul id="homedropdown" class="dropdown-content">
</li>
<li><a href="#!">two</a></li>
<li><a href="#!">three</a></li>
</ul>
<a class="btn dropdown-button" href="#!" data-activates="dropdown2">About<i class="mdi-navigation-arrow-drop-down right"></i></a>
<a class="btn dropdown-button" href="#!" data-activates="homedropdown">Tools<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="sb-slidebar sb-right">
</div>
</body>
</html>
您正在将答案添加到#answerText，但您正在清除包含#answerText元素的 ID #answer 的元素，因此您刚刚删除了获取答案的元素，请注意标记
<div id='answer'>
<div id='answerText'></div>
</div>
你应该清除#answerText
var Clear = function(){
$('#answerText').html("");
};