Please see my code below:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, div, span, h1, h2, h3, h4, h5, h6, p, pre, em, img, small, strong, ol, ul, li, fieldset, form, label, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
.wrapper {
margin: 0 auto;
min-width: 980px;
max-width: 990px;
width: 100%;
}
input[type="number"] {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin:5px 0px;
width:200px;
}
label[for] {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin:5px 0px;
width:100px;
}
input[type="button"] {
border:1px solid #B6B6B6;
margin:2px 0px;
padding:3px 5px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".subtract").click(function() {
var x = ((Math.random() *100)+1);
document.getElementById("first").value = x.toFixed(2);
var y = ((Math.random() *10)+1);
document.getElementById("second").value = y.toFixed(2);
document.getElementById("result").value = +(x - y);
});
});
</script>
</head>
<body>
<section>
<div class="wrapper">
<label for="first_number">Generate first number: </label>
<input type="number" class="first" id="first" /><br />
<label for="second_number">Generate second number: </label>
<input type="number" class="second" id="second" /><br />
<input type="button" value="Subtract" class="subtract" /><br />
<label for="result">Result:</label>
<input type="number" class="result" id="result" />
</div>
</section>
</body>
</html>
When I click on result button, values from second input box is subtracted from first input box. If I am only generating numbers up to two fraction points, why I am getting result as several fractions?
This one glitch I had tried in my university college 3 years back, but now, I forgot. Can anyone explain it to me please?
