How do I use a double click event in javascript simplified in a JS external file
Question
I can't seem to figure out how to clear the textbox rate in my JS code from an external file and would love some help to figure out how to do it.
Can someone help me with the code and the why and how it works so that I can learn it and understand it so that I can code it effectively and efficiently.
I have included all of the original code down below.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Future Value Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="future_value.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<script src="future_value.js"></script>
</head>
<body>
<section>
<h1 id="heading">Future Value Calculator</h1>
<label for="investment">Investment Amount:</label>
<input type="text" id="investment">
<span id="investment_error"> </span><br>
<label for="rate">Annual Interest Rate:</label>
<input type="text" id="rate">
<span id="rate_error"> </span><br>
<label for="years">Number of Years:</label>
<input type="text" id="years">
<span id="years_error"> </span><br>
<label for="future_value">Future Value:</label>
<input type="text" id="future_value" disabled="disabled"><br>
<label> </label>
<input type="button" id="calculate" value="Calculate"><br>
</section>
</body>
</html>
JavaScript
var $ = function (id) {
return document.getElementById(id);
}
var calculateClick = function () {
var investment = parseFloat( $("investment").value );
var annualRate = parseFloat( $("rate").value );
var years = parseInt( $("years").value );
if (isNaN(investment) || investment < 100 || investment > 100000) {
alert("Investment must be an integer from 100 - 100,000.");
}
else if(isNaN(annualRate) || annualRate < .1 || annualRate > 12) {
alert("Annual rate must be a value from .1 - 12.");
}
else if(isNaN(years) || years < 1 || years > 50) {
alert("Years must be an integer from 1 - 50.");
}
// if all entries are valid, calulate future value
else {
futureValue = investment;
for ( i = 1; i <= years; i++ ) {
futureValue += futureValue * annualRate / 100;
}
$("future_value").value = futureValue.toFixed();
}
}
window.onload = function () {
$("calculate").onclick = calculateClick;
$("investment").focus();
}
rate = document.getElementById("rate");
rate.dblclick = "";
1 answers
solution1
0 2017-01-29 19:09:32
To add an "ondblclick" attribute to your "rate" element in JS, it world look like this:
$('rate').ondblclick = clearRate();
And then add that "clearRate()" function:
function clearRate() {
$('rate').value = ''
}
This means that when the "rate" element is double-clicked, it will trigger the function "clearRate()", which sets the value of "rate" to an empty string.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.