0
178
ViewsComo sacar un resultado de una calculadora, ej.: Result: (resultado de sumar)
Si ingresa 2 números en 2 campos, la suma y la multiplicación se mostrarán al mismo tiempo. Después de la ejecución, tiene que escribir, por ejemplo, Sumando: (resultado de la suma) Multiplicación (resultado de la multiplicación) con un botón. Cómo hacer a partir de este código:
<!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
Realmente no está siguiendo ninguna de las mejores prácticas, pero de cualquier manera, su código original está funcionando.
No estoy 100% seguro de lo que quiere decir con "hacer que la ventana de resultados aparezca sin esta ventana, campo", pero supongo que desea que el resultado aparezca fuera del formulario, en algún otro elemento o ventana. Puedes usar un modal.
El estilo no es bueno, pero esta solución transmite muy bien el punto:
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