0
176
ViewsHow to make a result from a calculator, e.g .: Result: (result of adding)
If you enter 2 numbers in 2 fields, addition and multiplication will be displayed at the same time. After execution, he has to write e.g. Adding: (result of addition) Multiplication (result of multiplication) with one button . How to make from this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="frmadd">
Number 1<input type ="text" name="txt1" ><br>
Number 2<input type ="text" name="txt2" ><br>
addition :<input type ="text" name="txt3" disabled><br>
multiplication :<input type ="text" name="txt4" disabled><br>
<input type="button" value="Add" name="but1" onClick="addNum()">
</form>
<script>
function addNum()
{
num1=parseInt(document.frmadd.txt1.value);
num2=parseInt(document.frmadd.txt2.value);
num3=num1+num2;
num4=num1*num2;
document.frmadd.txt3.value=num3;
document.frmadd.txt4.value=num4;
}
</script>
</body>
</html>
·
Juan Pablo Isaza
1 answers
Answer question0
You're really not following any best practices, but either way, your original code is working.
I'm not 100% sure what you mean with "make the result window appear without this window, field," but I assume you want the result to appear outside of the form, in some other element or window. You can use a modal.
The styling isn't good, but this solution gets the point across nicely:
const modal = document.querySelector('#modal');
const firstNum = document.frmadd.txt1;
const secondNum = document.frmadd.txt2;
const additionResult = document.querySelector('#add');
const multResult = document.querySelector('#multiply');
const addNum = () => {
const num1 = +firstNum.value;
const num2 = +secondNum.value;
if (!(num1 + num2)) return alert('Both inputs must be numbers!');
const added = num1 + num2;
const multiplied = num1 * num2;
additionResult.textContent = added;
multResult.textContent = multiplied;
modal.classList.remove('hidden');
setTimeout(hideModal, 3000);
};
const hideModal = () => {
modal.classList.add('hidden');
};form {
display: flex;
flex-direction: column;
max-width: 300px;
}
#modal {
display: flex;
flex-direction: column;
max-width: 300px;
background: gainsboro;
box-shadow: 0px 0px 15px black;
position: fixed;
left: 10%;
top: 10%;
}
#modal.hidden {
display: none;
}<form name="frmadd">
<label for="txt1">Num 1</label>
<input type="text" name="txt1" />
<label for="txt2">Num 2</label>
<input type="text" name="txt2" />
<input type="button" value="Add" name="but1" onClick="addNum()" />
</form>
<div id="modal" class="hidden">
<button onClick="hideModal()">X</button>
<h3>Addition Result:</h3>
<p id="add"></p>
<h3>Multiplication Result:</h3>
<p id="multiply"></p>
</div>
·
Juan Pablo Isaza
Report
Answer question