How to make a result from a calculator, e.g .: Result: (result of adding)

Question

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>

I know that it works, but I am asking how to make the result window appear without this window, field, I cannot translate — popo, Mar 29 '22 at 21:30

score 0 · Answer 1 · answered Mar 29 '22 at 22:49

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>

How to make a result from a calculator, e.g .: Result: (result of adding)

1 Answers1