I am working on calculating price based on the userinput. When user enters the number of pages it will be multiplied by 2 and result will get displayed in #result box. Now when user clicks the checkbox, the total (#result) value will get multiplied by 3 and displays in #result textbox. when user unclicks it, the old result should get displayed in the text box.
Example,
Total number of pages: 2 ---> total: 4
checkbox clicked ----> total: 12
checkbox unchecked ---> total: 4
When the click the checkbox the value 12 is displayed, but when i uncheck the checkbox the value is still 12, instead of displaying 4...
can anyone help me out with the solution
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Calculating</title>
<script>
function calculate()
{
var myBox1 = document.getElementById('pages').value;
if(isNaN(myBox1))
{
alert('Enter only numbers');
}
else
{
const myBox2=2;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2;
result.value = myResult;
}
}
function checkbox1()
{
var result1 = document.getElementById('result').value;
const bresult=result1;
if(document.getElementById('ckbox').checked === true)
{
const checks=3;
var myResult1=result1 * checks;
result.value = myResult1;
}
if(document.getElementById('ckbox').checked === false)
{
result.value=bresult;
}
}
</script>
</head>
<body>
<table>
<tr>
<td>Number of Pages</td>
<td>Check Boxes</td>
<td>Total</td>
</tr>
<tr>
<td><input id="pages" type="text" oninput="calculate()" /></td>
<td><input type="checkbox" id="ckbox" onclick="checkbox1()">Assistance</td>
<td><input id="result" /></td>
</tr>
</table>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire