I'm rather new to javascript and i'm trying to make a calculator that instantly calculates a total price of selected products.
The calculator works fine but right now the checkbox gets calculated alongside the rest of the products even when unchecked.
I'm trying to make it so that when it is unchecked the value is 0 and when it is checked it is 0.50.
This is what I have so far:
<head>
<style type="text/css">
.right{
margin-top: 10px;
width: 150px;
height: 45px;
background-color: #66CCFF;
}
p{
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
<!--
function calculate() {
var A1 = document.getElementById('Amount1').value
var A2 = document.getElementById('Amount2').value
var A3 = document.getElementById('Amount3').value
var PStart = 0;
var P1 = A1*1.50;
var P2 = A2*1.00;
var P3 = A3*1.00;
var PTotal = P1+P2+P3;
var Insert = document.getElementById("TotalPrice");
TotalPrice.innerHTML= PTotal;
}
-->
</script>
</head>
<body onload="calculate()">
<form>
<fieldset>
<legend>Price</legend>
<div class="FormRow">
<label for="Amount2">Console $1,50</label>
<input type="text" min=0 id="Amount1" name="Amount1" oninput="calculate()" />
</div>
<div class="FormRow">
<label for="Amount2">Controller $1,00</label>
<input type="text" min=0 id="Amount2" name="Amount2" oninput="calculate()" />
</div>
<div class="FormRow">
<label for="Amount3">Batteries? $0,50</label>
<input type="checkbox" value="0.50" id="Amount3" name="Amount3" onchange="calculate()"/>
</div>
<div class="right" >
<p><b>Total price:</b></p>
<p id="TotalPrice">
</p>
</div>
</fieldset>
</form>
</body>
Try this:
var A1 = document.getElementById('Amount1').value
var A2 = document.getElementById('Amount2').value
var A3 = document.getElementById('Amount3').checked ?
document.getElementById('Amount3').value : 0;
Demo
You can use document.getElementById('Amount1').checked to verify if the checkbox is checked. So your code would look like
var A1 = document.getElementById('Amount1').checked ?
parseFloat(document.getElementById('Amount1').value) :
0;
var A2 = document.getElementById('Amount1').checked ?
parseFloat(document.getElementById('Amount1').value) :
0;
var Total = A1 + A2;
Related
I'm trying to make a calculator I wanted to take the number and the operation from the input and onclick to display the result in another input field. Just to test if the button work console.log(num1+num2) but I see no result in the console log. and i also what to know how i can pass my operation from the input
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var oper = document.getElementById("oper").value;
var cal = document.getElementById("cal").value;
var res = document.getElementById("num1").value;
var calculatorBtn = document.getElementById("calculator");
const form = document.querySelector("formCal");
function calculate() {
console.log(num1 + num2);
}
<div class="root">
<h1>Calculator</h1>
<form action="" id="formCal">
<div class="calculator">
<div class="box">
<label for="num1">Number 1</label>
<input type="number" placeholder="num1" id="num1">
</div>
<div class="box">
<label for="num2">Number 2</label>
<input type="number" placeholder="num2" id="num2">
</div>
<div class="box">
<label for="oper">operation</label>
<input type="text" placeholder="oper" id="oper">
</div>
<div class="box">
<label for="res">Result</label>
<input type="number" placeholder="res" id="res">
</div>
<div class="box">
<input type="button" id="cal" value="calculator" placeholder="calculate" onclick="calculate()" />
</div>
</div>
</form>
</div>
You have to check for the value inside your function. Otherwise this won't get triggered again.
function calculate(){
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
console.log(num1+num2);
}
<!DOCTYPE html>
<html lang="en">
<body>
<div class="root">
<h1>Calculator</h1>
<form action="" id="formCal">
<div class="calculator">
<div class="box">
<label for="num1">Number 1</label>
<input type="number" placeholder="num1" id="num1">
</div>
<div class="box">
<label for="num2">Number 2</label>
<input type="number" placeholder="num2" id="num2">
</div>
<div class="box">
<label for="oper">operation</label>
<input type="text" placeholder="oper" id="oper">
</div>
<div class="box">
<label for="res">Result</label>
<input type="number" placeholder="res" id="res">
</div>
<div class="box">
<input type="button" id="cal" value="calculator" placeholder="calculate" onclick="calculate()"/>
</div>
</div>
</form>
</div>
</body>
</html>
I believe it's because the code doesn't update the variables, so it's just set to the value and the value is null at that time its set,I fixed it:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="root">
<h1>Calculator</h1>
<form action="" id="formCal">
<div class="calculator">
<div class="box">
<label for="num1">Number 1</label>
<input type="number" placeholder="num1" id="num1">
</div>
<div class="box">
<label for="num2">Number 2</label>
<input type="number" placeholder="num2" id="num2">
</div>
<div class="box">
<label for="oper">operation</label>
<input type="text" placeholder="oper" id="oper">
</div>
<div class="box">
<label for="res">Result</label>
<input type="number" placeholder="res" id="res">
</div>
<div class="box">
<input type="button" id="cal" value="calculator" placeholder="calculate" onclick="calculate()"/>
</div>
</div>
</form>
</div>
<headers>
<script >
var num1 =document.getElementById("num1").value;
var num2= document.getElementById("num2").value ;
var oper=document.getElementById("oper").value ;
var cal=document.getElementById("cal") ;
var res=document.getElementById("num1").value ;
var calculatorBtn =document.getElementById("calculator");
const form = document.querySelector("formCal");
function calculate(){
var num1 = new Number(document.getElementById("num1").value);
var num2 = new Number(document.getElementById("num2").value) ;
var res = document.getElementById("res")
switch(document.getElementById("oper").value)
{
case "+":
res.value = num1 + num2;
break;
case "-":
res.value = num1 - num2;
break;
case "*":
res.value = num1 * num2;
break;
case "/":
res.value = num1/num2;
break;
}
}
</script>
</headers>
</body>
</html>
All the JS codes outside the function will get executed immediately once the page starts to load. In your case, you will enter values in text box only after the page gets loaded.
The num1 and num2 variables will not get assigned at the time you hit on the calculate button as these codes are outside the function.
Secondly, you should use ParseInt as javascript will consider your values as strings and gives you concatenated result.
Replace your script as below,
/*var oper=document.getElementById("oper").value ;
var cal=document.getElementById("cal").value ;
var res=document.getElementById("num1").value ;
var calculatorBtn =document.getElementById("calculator");
const form = document.querySelector("formCal");*/
function calculate(){
var num1 =document.getElementById("num1").value ;
var num2= document.getElementById("num2").value ;
console.log(parseInt(num1)+parseInt(num2));
}
<!-- Create a simple Program to build the Calculator in JavaScript using with HTML and CSS web languages. -->
<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript Calculator </title>
<style>
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: red;
}
.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}
input
{
width: 20px;
background-color: green;
color: white;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}
#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<h1> Calculator Program in JavaScript </h1>
<div class= "formstyle">
<form name = "form1">
<!-- This input box shows the button pressed by the user in calculator. -->
<input id = "calc" type ="text" name = "answer"> <br> <br>
<!-- Display the calculator button on the screen. -->
<!-- onclick() function display the number prsses by the user. -->
<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">
<input type = "button" value = "2" onclick = "form1.answer.value += '2' ">
<input type = "button" value = "3" onclick = "form1.answer.value += '3' ">
<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">
<br> <br>
<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">
<input type = "button" value = "5" onclick = "form1.answer.value += '5' ">
<input type = "button" value = "6" onclick = "form1.answer.value += '6' ">
<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">
<br> <br>
<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">
<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">
<input type = "button" value = "9" onclick = "form1.answer.value += '9' ">
<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">
<br> <br>
<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">
<input type = "button" value = "0" onclick = "form1.answer.value += '0' ">
<input type = "button" value = "." onclick = "form1.answer.value += '.' ">
<!-- When we click on the '=' button, the onclick() shows the sum results on the calculator screen. -->
<input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) ">
<br>
<!-- Display the Cancel button and erase all data entered by the user. -->
<input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" >
<br>
</form>
</div>
</body>
</html>
Once you have a string for the calculation, you can run the eval() function to execute the calculation as JavaScript code.
Since you are generating a string, you might not need the parseInt at all.
Using eval() poses a potential security risk, if you publish a site using it. Use it only for your learning experiments.
function calculate(){
const num1 = document.getElementById("num1").value;
const num2 = document.getElementById("num2").value;
const oper = document.getElementById("oper").value;
document.getElementById('res').value = eval(num1 + oper + num2);
}
I have an HTML Form that a user needs to fill out. It is information about a Student (Name, Email, Grade, Math, English, Social Studies). What I am trying to do is when the user fills out the Form and clicks the Submit button. It creates a JavaScript Object and adds it into another JS Object. I want the information input in the Form to display at the bottom of the webpage. I am purposely not using a database. I just want the information to exist while the page is up.
This is the HTML Form:
<!DOCTYPE html>
<html lang="en">
<head>
<!--Required Meta Tag-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
.center {
text-align: center;
border: 3px solid green;
}
body {
font-family: Arial;
margin: 0;
}
/* Header/Logo Title */
.header {
padding: 10px;
text-align: center;
background: #1abc9c;
color: white;
font-size: 20px;
}
</style>
<title>Student Report Card</title>
</head>
<body>
<div class="header">
<br>
<h2>Student & Grade Input Form</h2>
<br>
</div>
<br>
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<input type="text" placeholder="Enter name" name="name" id="name" required><br>
<br>
<input type="email" placeholder="Enter Email" name="email" id="email" required><br>
<br>
<input type="number" placeholder="Enter Math Grade" name="math" id="math" required><br>
<br>
<input type="number" placeholder="Enter English Grade" name="eng" id="eng" required><br>
<br>
<input type="number" placeholder="Enter Math Grade" name="math" id="math" required><br>
<br>
<input type="number" placeholder="Enter Social Studies Grade" name="sstd" id="sstd" required><br>
<br>
<button type="submit" id="btn1">Submit</button>
<ul id="myList">
</ul>
</div>
<script src="scripts.js"></script>
</body>
</html>
This is the Javascript Code:
document.getElementById("btn1").addEventListener("click", inputFunc)
var studentList = new Object()
function inputFunc(){
var fname = document.getElementById("name").value
var email = document.getElementById("email").value
var math = document.getElementById("math").value
var eng = document.getElementById("eng").value
var sstd = document.getElementById("sstd").value
var x = Math.floor((Math.random() * 100) + 1);
var y = x.toString();
studentID = "student".concat(y)
var studentID = new Object();
studentID.name = fname
studentID.email = email
studentID.math = math
studentID.eng = eng
studentID.sstd = sstd
studentList[studentID] = studentID
console.log(studentList)
var obj = JSON.parse(JSON.stringify(studentList))
var information = document.getElementById("demo").innerHTML = obj.fname + ", " + obj.email + ", " + obj.math;
var node = document.createElement("LI");
var textnode = document.createTextNode(information);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
I am using the Random() method in JavaScript to create a random number that I am concatenating to the the "student" so it give it a unique ID. This is working correctly. I just can't display the information at the bottom of the page.
The Goal is after the user inputs information in the form it will display the content of the object below like so:
- Name, Email, Grade, English, Math, Social Studies
- Name, Email, Grade, English, Math, Social Studies
- Name, Email, Grade, English, Math, Social Studies
I have been able to solve this. I was able to create an html table and dynamically fill it as a user inputs information. The javascript will add the information dynamically to the first row and continue to do so as more information is added.
Updated HTML below:
<!DOCTYPE html>
<html lang="en">
<head>
<!--Required Meta Tag-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
.center {
text-align: center;
border: 3px solid green;
}
body {
font-family: Arial;
margin: 0;
}
/* Header/Logo Title */
.header {
padding: 10px;
text-align: center;
background: #1abc9c;
color: white;
font-size: 20px;
}
table, td {
border: 1px solid black;
padding: 8px;
}
</style>
<title>Student Report Card</title>
</head>
<body>
<div class="header">
<br>
<h2>Student & Grade Input Form</h2>
<br>
</div>
<br>
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<input type="text" placeholder="Enter name" name="name" id="name" required><br>
<br>
<input type="email" placeholder="Enter Email" name="email" id="email" required><br>
<br>
<input type="number" placeholder="Enter Math Grade" name="math" id="math" required><br>
<br>
<input type="number" placeholder="Enter English Grade" name="eng" id="eng" required><br>
<br>
<input type="number" placeholder="Enter Social Studies Grade" name="sstd" id="sstd" required><br>
<br>
<button type="submit" id="btn1">Submit</button>
<br><br>
<table id="myTable">
<tr>
<td>Name</td>
<td>Email</td>
<td>Math Grade</td>
<td>English Grade</td>
<td>Social Studies Grade</td>
</tr>
</table>
</div>
<script src="scripts.js"></script>
</body>
</html>
Updated Javascript below:
var studentList = new Object()
function inputFunc(){
var fname = document.getElementById("name").value
var email = document.getElementById("email").value
var math = document.getElementById("math").value
var eng = document.getElementById("eng").value
var sstd = document.getElementById("sstd").value
var x = Math.floor((Math.random() * 100) + 1);
var y = x.toString();
studentID = "student".concat(y)
studentNumber = "student".concat(y)
var studentID = new Object();
studentID.name = fname
studentID.email = email
studentID.math = math
studentID.eng = eng
studentID.sstd = sstd
studentList[studentNumber] = studentID
// variable of javascript object, place each element in a variable with stringfy
var studentInformation = studentList[studentNumber]
console.log(typeof studentInformation)
var obj = String(studentInformation.name)
var obj1 = String(studentInformation.email)
var obj2 = String(studentInformation.math)
var obj3 = String(studentInformation.eng)
var obj4 = String(studentInformation.sstd)
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0)
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = obj;
cell2.innerHTML = obj1;
cell3.innerHTML = obj2;
cell4.innerHTML = obj3;
cell5.innerHTML = obj4;
}
I think this is just an issue of adding items to objects. Here is an example
let studentInfo;
studentInfo.push({ name: "John", email: "john#gmail.com" });
This answer in incorrect.
I have a Google sheet with custom HTML form.
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form id="myform">
<div class="form-group" >
<label for="target_row">Row</label>
<input type="text" class="form-control" name="target_row" id="target_row" value="<?= target_row?>">
</div>
<div class="form-group" style="display: flex; margin: 10px;">
<div>
<label for="amount_input">Сумма (руб.)</label>
<input type="number" class="form-control" name="amount_input" id="amount_input" placeholder="00000" value="<?= amount_input?>" required>
</div>
<div id="operation_name" style="margin: 10px;">
<input type="radio" id="revenue" name="revenue" value="Доход">
<label for="revenue">Доход</label><br>
<input type="radio" id="cost" name="cost" value="Расход">
<label for="cost">Расход</label><br>
</div>
</div>
<div class="block">
<button type="submit" class="action">Подтвердить</button>
</div>
</form>
<script>
document.querySelector("#myform").addEventListener("submit",
function(e)
{
e.preventDefault();
console.log(this)
google.script.run.withSuccessHandler(()=> google.script.host.close()).editItem(this);
}
);
</script>
</body>
</html>
I update template with values from the sheet and run form with .showModalDialog
function editCell(){
let ss = SpreadsheetApp.getActiveSpreadsheet();
let sh = ss.getSheetByName('SHEET_NAME')
let ui = SpreadsheetApp.getUi();
let editRange = sh.getActiveRange()
let row = editRange.getRow(); // ---> target_row
let amount = sh.getRange(row, 5).getValue(); //---> amount_input
let operation = sh.getRange(row, 6).getValue() //---> operation_name
let html = HtmlService.createTemplateFromFile('inputform');
html.target_row = row;
html.amount_input = amount;
html.operation_name = operation;
let output = HtmlService.createHtmlOutput(html.evaluate()).setHeight(400).setWidth(300);
ui.showModalDialog(output, 'NEW')
}
Then submit form with new values and trying to it set new values into the sheet
function editItem(form_data){
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getSheetByName('SHEET_NAME');
let targetRow = form_data.target_row;
let amount = form_data.amount_input;
let operation = form_data.operation_name;
let targetRange = sheet.getRange(targetRow, 2, 1, 2);
targetRange.setValues([[ amount, operation]]);
}
I'm getting correct value in amount and nothing in operation.
Where I'm wrong and how to fix it?
In the HTML file, operation_name and amount_input are in different Classes. The easiest solution is to set the id operation_name as a Class too:
<div class="operation_name" style="margin: 10px;">
<input type="radio" id="revenue" name="revenue" value="Доход">
<label for="revenue">Доход</label><br>
<input type="radio" id="cost" name="cost" value="Расход">
<label for="cost">Расход</label><br>
</div>
Then form_data returns an object:
{ amount_input: '3',
cost: 'Расход',
target_row: '1',
revenue: 'Доход' }
So the code at code.gs needs to be:
let amount = form_data.amount_input;
let cost = form_data.cost;
let revenue = form_data.revenue
Hope this helps
i m trying to make a simple calculator by javascript ,and i didnt get anything in textbox result.
<html>
<head>
<script type="text/javascript">
function sum()
{
var x1 = document.getElementById("text1");
var x2 = document.getElementById("text2");
var y = document.getElementById("text3");
var sum = parseFloat(x1) + parseFloat(x2);
y.value = "the result is, " + sum;
}
</script>
</head>
<body>
<form>
<fieldset style="width : 100px ;text-align: center; margin-left: auto;margin-right: auto;">
<legend> sum +++ +++ calculator</legend>
<input type="text" placeholder="tap first number" id="text1"><br>
<input type="text" placeholder="tap second number" id="text2"><br>
<input type="button" value="=" onclick="sum()"><br>
<input type="text" placeholder="result" id="text3"><br>
</fieldset>
</form>
</body>
</html>
Your x1 and x2 refer to the input box rather than to the value. Change to:
var x1 = document.getElementById("text1").value;
var x2 = document.getElementById("text2").value;
The reason is because you are never getting values from text field.
Check below:
function sum() {
var x1 = document.getElementById("text1");
var x2 = document.getElementById("text2");
var y = document.getElementById("text3");
var sum = parseFloat(x1.value) + parseFloat(x2.value);
y.value = "the result is, " + sum;
}
<form>
<fieldset style="width : 100px ;text-align: center; margin-left: auto;margin-right: auto;">
<legend> sum +++ +++ calculator</legend>
<input type="text" placeholder="tap first number" id="text1">
<br>
<input type="text" placeholder="tap second number" id="text2">
<br>
<input type="button" value="=" onclick="sum()">
<br>
<input type="text" placeholder="result" id="text3">
<br>
</fieldset>
</form>
Hope it helps you.
Thanks!
<html>
<head>
<script type="text/javascript">
function sum()
{
var x1 = document.getElementById("text1");
var x2 = document.getElementById("text2");
var y = document.getElementById("text3");
var sum = parseFloat(x1.value) + parseFloat(x2.value);
y.value = "the result is, " + sum;
}
</script>
</head>
<body>
<form>
<fieldset style="width : 100px ;text-align: center; margin-left: auto;margin-right: auto;">
<legend> sum +++ +++ calculator</legend>
<input type="text" placeholder="tap first number" id="text1"><br>
<input type="text" placeholder="tap second number" id="text2"><br>
<input type="button" value="=" onclick="sum()"><br>
<input type="text" placeholder="result" id="text3"><br>
</fieldset>
</form>
</body>
</html>
I'm working on a homework assignment where we have to make a simple calculator in JavaScript. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Calculator</title>
<style>
div{
display: inline-block;
}
#first{
float: left;
position: relative;
top: 65px;
}
#fieldset{
width: 70px;
{
#second{
}
#compute{
position: relative;
{
</style>
<script>
window.onload = function(){
alert('Welcome to the JavaScript Calculator!');
};
function compute() {
var firstValue = document.getElementById("first").value;
var secondValue = document.getElementById("second").value;
var output;
if (document.getElementById("plus").checked === true)
{
output = firstValue + secondValue;
}
else if (document.getElementById("minus").checked === true)
{
output = firstValue - secondValue;
}
else if (document.getElementById("times").checked === true)
{
output = firstValue*secondValue;
}
else if (document.getElementById("divide").checked === true)
{
output = firstValue/secondValue;
}
return output;
}
</script>
</head>
<body>
<header>
<h1>Simple Calculator</h1>
</header>
<form>
<div id="first">
First value: <input type="text" name="FirstValue" />
</div>
<div id="fieldset">
<fieldset id=radio>
<label for="plus">+</label>
<input type="radio" id="plus" name="type" value="plus" checked/><br>
<label for="minus">-</label>
<input type="radio" id="minus" name="type" value="minus"/><br>
<label for="times">x</label>
<input type="radio" id="times" name="type" value="times"/><br>
<label for="divide">÷</label>
<input type="radio" id="divide" name="type" value="divide"/>
</fieldset>
</div>
<div id="second">
Second value: <input type="text" name="SecondValue" />
</div>
<div id="compute">
<button type="button" onclick = "compute();">Compute</button>
</div>
Result:
</form>
</body>
</html>
The calculator won't run, and I think that has something to do with how I've set it up to return. Does returning output print it to the screen? If not, how do I get this to happen? Please help! Thanks.
There was a few things you needed to do.
You needed to get the value inserted into the textbox, not the value of the div.
You also needed to convert the input from a string to a number using parseInt.
Returning the output won't show it on the screen. Instead of returning the output, you needed to add it to the page as an answer by using innerHTML.
Run the code snippet below to see it in action.
<html>
<head>
<meta charset="utf-8" />
<title>Calculator</title>
<style>
div{
display: inline-block;
}
#first{
float: left;
position: relative;
top: 65px;
}
#fieldset{
width: 70px;
{
#second{
}
#compute{
position: relative;
}
</style>
<script>
window.onload = function(){
alert('Welcome to the JavaScript Calculator!');
};
function compute() {
var firstValue = parseInt(document.getElementById("firstValue").value);
var secondValue = parseInt(document.getElementById("secondValue").value);
var output;
if (document.getElementById("plus").checked === true)
{
output = firstValue + secondValue;
}
else if (document.getElementById("minus").checked === true)
{
output = firstValue - secondValue;
}
else if (document.getElementById("times").checked === true)
{
output = firstValue*secondValue;
}
else if (document.getElementById("divide").checked === true)
{
output = firstValue/secondValue;
}
document.getElementById("result").innerHTML = "Result: " + output;
return output;
}
</script>
</head>
<body>
<header>
<h1>Simple Calculator</h1>
</header>
<form>
<div id="first">
First value: <input id="firstValue" type="text" name="FirstValue" />
</div>
<div id="fieldset">
<fieldset id=radio>
<label for="plus">+</label>
<input type="radio" id="plus" name="type" value="plus" checked/><br>
<label for="minus">-</label>
<input type="radio" id="minus" name="type" value="minus"/><br>
<label for="times">x</label>
<input type="radio" id="times" name="type" value="times"/><br>
<label for="divide">÷</label>
<input type="radio" id="divide" name="type" value="divide"/>
</fieldset>
</div>
<div id="second">
Second value: <input id="secondValue" type="text" name="SecondValue" />
</div>
<div id="compute">
<button type="button" onclick="compute();">Compute</button>
</div>
<div id="result">
Result:
</div>
</form>
</body>
</html>