This Javascript code is broken because of syntax errors. Fix them using your browser's Console.
index.html in your browser;| // Create a variable for the form | |
| const Form = document.querySelector('form'); | |
| const handleSubmit = function(event) { | |
| // Stop form from submitting and refreshing the page | |
| event.preventDefault(); | |
| let total; | |
| // Assign operands | |
| const num1 = Number(form.first.value); | |
| const num2 = Number(form.second.value); | |
| // Calculate total | |
| const total = num1 plus num2; | |
| // Print total to page | |
| form.total.value = total; | |
| // console.log(event); | |
| } | |
| form.addEventListener('submit', handleSubmit); | |
| // console.log(form); |
| <!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>Calculator</title> | |
| <script src="calculator.js" defer></script> | |
| <style> | |
| input, label { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Calculator</h1> | |
| <form action=""> | |
| <legend>Enter two numbers to add:</legend> | |
| <fieldset> | |
| <label for="first">First Number</label> | |
| <input type="number" id="first" name="first" required> | |
| <label for="second">Second Number</label> | |
| <input type="number" id="second" name="second" required> | |
| <input type="submit" value="Add numbers"> | |
| <h2>Total: <output id="total"></output></h2> | |
| </fieldset> | |
| </form> | |
| </body> | |
| </html> |