Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I've just started learning javascript and I'm having trouble with a homework problem. The problem gets user input via php (inputs are years to forecast, population, and growth rate). then the javascript should produce a table in the format of (years, population and change).
Example of output
<!doctype html>
<META HTTPEQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta httpequiv="expires" content="0" />
<html lang="en">
<head>
<title> hw8 </title>
<link rel="stylesheet" href="hw8.css">
<script src="hw8.js"></script>
</head>
<body>
<form name="inputform">
<div id="input">
<h2> Population Growth </h2>
Years to forecast: <input type="text" value="<? print $_POST['years']; ?>" name="years"> <br/> <br/>
Current Population: <input type="text" value="<? print $_POST['population']; ?>" name="population"> <br/> <br/>
Growth Rate: <input type="text" value="<? print $_POST['rate']; ?>" name="rate"> <br/> <br/>
<div id="button"> <input type="submit" value="Calculate" id="calc"> </div>
</div>
</form>
<div id="tables">
<table id="table">
<tr>
<th> Year </th> <th> Population </th> <th> Change </th>
<tr>
<td> 2017 </td> <td> . </td> <td> . </td>
</tr>
</table>
</div>
</body>
</html>
window.addEventListener("load", link_events, false);
function link_events() {
document.getElementById("calc").onclick = calculate;
}
function calculate() {
var form = document.forms["inputform"];
var year = 2017;
var i;
var years = document.getElementById('years');
for (i=0; i < years.length; i++){
year[i]++
}
var
var change = parseFloat(form)["population"] * (parseFloat(form)["rate"]/100)
I put together an example for you with the result you want.
JSFiddle: https://jsfiddle.net/0sfrrewc/
Code:
<!DOCTYPE html>
<html>
<head>
<title>hw08 demo</title>
<style type="text/css">
div#errorContainer {
max-width: 400px;
margin-top: 20px;
border: 1px solid #000;
background-color: red;
border-radius: 5px;
padding: 10px;
}
div#errorContainer > span {
color: white;
}
</style>
<script type="text/javascript">
window.onload = function () {
/* Calculate click */
document.getElementById('calculate').addEventListener('click', function() {
/* Get years */
var years = parseInt(document.getElementById('years').value);
if (isNaN(years) || years <= 0) {
alert('Invalid year'); return;
}
/* Get population */
var population = parseInt(document.getElementById('population').value);
if (isNaN(population) || population <= 0) {
alert('Invalid population'); return;
}
/* Get rate */
var rate = parseInt(document.getElementById('rate').value);
if (isNaN(rate) || rate <= 0) {
alert('Invalid rate'); return;
}
/* Create table */
var table = '' +
'<table>' +
'<thead>' +
'<th><strong>Year</strong></th>' +
'<th><strong>Population</strong></th>' +
'<th><strong>Change</strong></th>' +
'</thead>' +
'';
var currentYear = new Date().getFullYear();
table += '' +
'<tbody>' +
'';
for (var i = currentYear; i < (currentYear+years); i++) {
var change = (population*rate)/100;
population += change;
table += '' +
'<tr>' +
'<td>' + i + '</td>' +
'<td>' + population.toFixed() + '</td>' +
'<td>' + change.toFixed() + '</td>' +
'</tr>' +
'';
}
table += '' +
'</tbody>' +
'</table>' +
'';
/* Display table */
document.getElementById('result').innerHTML = table;
});
}
</script>
</head>
<body>
<h2>hw08 - Population Growth</h2>
<br>
<label for="years">Years to forecast:</label>
<input type="number" id="years" />
<br>
<label for="population">Current Population:</label>
<input type="number" id="population" />
<br>
<label for="rate">Growth Rate:</label>
<input type="number" id="rate" />
<br><br>
<input type="submit" id="calculate" value="Calculate!" />
<br><br>
<div id="result"></div>
</body>
</html>
Result:
Explanation:
We create a event listener, thats being fired upon clicking the button. Then we fetch the necessary data (year, population and rate), we validate the data then we create the table. We store the entire table in a variable until we are done generating the table, then we place it inside the div with the id result.
EDIT: Edited the code, it's now a html & pure javascript solution.
Related
The program I am trying to write is a pizza ordering program and the majority of it already works, but for my two selection options I want to have the value of one of the options print to the screen and then if the delivery option is selected to add 2 to the total.
Here is what I am using currently for the selection.
function getPizza(){
var price = 0;
var size = "";
var top = 0;
var total = 0;
var select_price = 0;
var select_option = "";
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var s3 = document.getElementById("s3");
var s4 = document.getElementById("s4");
if(s1.checked==true)
{
price = 8.00;
size = "Small";
}
else if(s2.checked==true)
{
price = 10.00;
size = "Medium";
}
else if(s3.checked==true)
{
price = 12.00;
size = "Large";
}
else if(s4.checked==true)
{
price = 14.00;
size = "X-Large";
}
else
alert("No size selected");
document.getElementById("p_result").innerHTML = "$" + price;
document.getElementById("s_result").innerHTML = size;
var t1 = document.forms["order"]["topping1"].checked;
var t2 = document.forms["order"]["topping2"].checked;
var t3 = document.forms["order"]["topping3"].checked;
var t4 = document.forms["order"]["topping4"].checked;
var t5 = document.forms["order"]["topping5"].checked;
document.getElementById("t_options").innerHTML = '';
if(t1 == true) {
top = top + 1.5;
document.getElementById("t_options").innerHTML += "Pepperoni" + "</br>";
}
if(t2 == true) {
top = top + 1.5;
document.getElementById("t_options").innerHTML += "Sausage" + "</br>";
}
if(t3 == true) {
top = top + 1.5;
document.getElementById("t_options").innerHTML += "Bacon" + "</br>";
}
if(t4 == true) {
top = top + 1.5;
document.getElementById("t_options").innerHTML += "Onions" + "</br>";
}
if(t5 == true) {
top = top + 1.5;
document.getElementById("t_options").innerHTML += "Spinach" + "</br>";
}
document.getElementById("t_result").innerHTML = "$ " + top;
//if structure I thought would work for adding to total.
if (select_option == true)
select_price = select_price + 2;
document.getElementById("sel_opt").innerHTML = select_option;
document.getElementById("sel_price").innerHTML = select_price;
total = total + price + top + select_price;
document.getElementById("total_result").innerHTML = "Your Current Total is $ " + total;
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h1>Pizza Program </h1>
<form id="order" name="order">
<label for="first_last"> Name:</label>
<input type="text" name="first_last" id="first_last" placeholder="First Last"> <br>
<p> Please choose your size of pizza:</p>
<input type="radio" name="size" id="s1" value="Small"> Small - $8</input><br>
<input type="radio" name="size" id="s2" value="Medium"> Medium - $10</input><br>
<input type="radio" name="size" id="s3" value="Large"> Large - $12</input><br>
<input type="radio" name="size" id="s4" value="X-Large"> Extra Large - $14</input><br>
<p>Please choose your topping ($1.50 each): </p>
<input type="checkbox" name="topping1" id="topping1" value="pepperoni"> Pepperoni </input><br>
<input type="checkbox" name="topping2" id="topping2" value="sausage"> Sausage </input><br>
<input type="checkbox" name="topping3" id="topping3" value="bacon"> Bacon </input><br>
<input type="checkbox" name="topping4" id="topping4" value="onions"> Onions </input><br>
<input type="checkbox" name="topping5" id="topping5" value="spinach"> Spinach </input><br> <br>
<select name="pick_deliv" id="select1">
<option id="pick_up" value="Pickup">Pick up</option>
<option id="deliv" value="Delivery">Delivery</option>
</select> <br> <br>
</form>
<button onclick="getPizza()" id="btn1"> Confirm Order</button>
<h1 id="name_result"> Your Order </h1> <br> <br>
<table style="width:50%">
<tr>
<th>Description</th>
<th>Option</th>
<th>Price</th>
</tr>
<tr>
<td> Size </td>
<td id="s_result"> </td>
<td id="p_result"> </td>
</tr>
<tr>
<td> Toppings </td>
<td id="t_options"> </td>
<td id="t_result"> </td>
</tr>
<tr>
<td> Pick-Up/Delivery</td>
<td id="sel_opt"> </td>
<td id="sel_price"> </td>
</tr>
</table>
<h4 id="total_result">Your Current Total is $ </h4>
<p id="demo"> </p>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I don't know what the problem is, I am trying to save variables, please help. I am trying to save and load but keep getting the error messages involving my save() function and the button calling it. Please help me with this issue, I have been trying to fix it for about 30 minutes and haven't had any luck.
var money = 50;
var printpower = 0;
var autoclickprice = 50;
var autoclick = 0;
var printpowerprice = 50;
var gems = 0;
var fakegems = 0;
var gemcost = 1000;
var gemgrowercost = 5;
var gemgrower = 0;
var gemsellprice = 1250;
function update() {
document.getElementById('TotalMoney').value = money;
document.getElementById('MoneyPerSecond').value = autoclick;
document.getElementById('MoneyPerClick').value = printpower;
document.getElementById('AutoClickCost').value = autoclickprice;
document.getElementById('PrintPowerCost').value = printpowerprice;
document.getElementById('GemAmount').value = gems;
document.getElementById('GemCost').value = gemcost;
document.getElementById('GemGrowerCost').value = gemgrowercost;
document.getElementById('GemsPerMinute').value = gemgrower;
document.getElementById('GemSellPrice').value = gemsellprice;
document.getElementById('FakeGemAmount').value = fakegems;
}
function add() {
money = money + printpower;
update();
}
function timer() {
money = money + autoclick;
update();
}
function buyautoclick() {
if (money >= autoclickprice) {
money = money - autoclickprice;
autoclickprice = autoclickprice * 2;
autoclick = autoclick + 1;
update();
}
}
function addprintpower() {
if (money >= printpowerprice) {
money = money - printpowerprice;
printpowerprice = printpowerprice * 3;
printpower = printpower + 1;
update();
}
}
function buygems() {
if (money >= 1000) {
money = money - 1000;
gems = gems + 1;
update();
}
}
function buygemgrower() {
if (gems >= gemgrowercost) {
gems = gems - gemgrowercost;
gemgrowercost = gemgrowercost * 2;
gemgrower = gemgrower + 1;
update();
}
}
function gemsperminute() {
fakegems = fakegems + gemgrower;
update();
}
function sellgems() {
if (fakegems >= 1) {
money = money + gemsellprice;
fakegems = fakegems - 1;
}
}
function save() {
localStoarge.setItem("money", "money");
}
function load() {
const data = localStorage.getItem("money");
}
setInterval(timer, 1000);
setInterval(gemsperminute, 60000);
#moneydiv {
width: 225px;
height: 925px;
padding: 10px;
float: left;
background-color: lime;
}
#gemdiv {
width: 225px;
height: 925px;
padding: 10px;
float: right;
background-color: aqua;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title>
Money Printer!
</title>
</head>
<body>
<script src="index.js">
//nice try little kid, try agian -_-//
</script>
<div id="container">
<div id="moneydiv" style="text-align: center">
<button onclick="add()">
Print Money
</button>
<button onclick="addprintpower()">
Improve MPC
</button>
<br> Improve Money Per Click Cost:
<br>
<input type="text" id="PrintPowerCost" style disabled>
<br> Money Per Click:
<br>
<input type="text" id="MoneyPerClick" style disabled>
<br>
<br>
<button onclick="buyautoclick()">
Buy Auto Clicker
</button>
<br> Auto Clicker Cost:
<br>
<input type="text" id="AutoClickCost" style disabled>
<br> Money Per Second:
<br>
<input type='text' id="MoneyPerSecond" style disabled>
<br>
<br> Total Cash:
<br>
<input type="text" id="TotalMoney" style disabled>
<br>
<br>
</div>
<div id="gemdiv" style="text-align: center">
<button onclick="buygems()">
Buy Gems!
</button>
<br> Gem Cost:
<br>
<input type="text" id="GemCost" style disabled>
<br>
<br>
<button onclick="buygemgrower()">
Buy Gem Grower
</button>
<br> Gem Grower Cost(In Gems):
<br>
<input type="text" id="GemGrowerCost" style disabled>
<br> Gems Per Minute:
<br>
<input type="text" id="GemsPerMinute" style disabled>
<br> Total Gems:
<br>
<input type="text" id="GemAmount" style disabled>
<br> Total Fake Gems:
<br>
<input type="text" id="FakeGemAmount" style disabled>
<br>
<br>
<button onclick="sellgems()">
Sell Fake Gems!
</button>
<br> Sell Price:
<br>
<input type="text" id="GemSellPrice" style disabled>
</div>
<div id="saveloaddiv" style="text-align: center;">
<button onclick="save()">
Save
</button>
<button onclick="load()">
Load
</button>
</div>
</div>
</body>
</html>
It's a typographical error, you wrote "stoarge" instead of "storage" while defining the save function
This is a problem for school. I need to make an array of records to store user input that loops the number of times the user specifies.
1 - The user will enter the number of volunteers (between 5-10). I have that part working.
2 - The input form is suppose to display the number of times as the number of volunteers. I'm not sure how to do that.
3 - The user's input is to be stored in an array of records.
4 - A message is to be displayed at the bottom with each volunteer's inputted information.
I'm stuck on number 2 and I'm positive I'll need help with 3 & 4 too.
Any assistance would be greatly appreciated.
You can see the code I've written below and I've included the JS code for both functions that I have working (validateForm() & getNumberOfVolunteers())
function getNumberOfVolunteers() {
var y = document.forms["numberOfVolunteersForm"]["numberOfVolunteers"].value;
if (y == "") {
alert("Number of volunteers must be filled out.");
return false;
}
document.getElementById("numberOfVolunteers1").innerHTML = y;
return false;
}
function validateForm() {
var a = document.forms["inviteForm"]["recipientName"].value;
if (a == "") {
alert("Name must be filled out.");
return false;
}
var b = document.forms["inviteForm"]["organizationName"].value;
if (b == "") {
alert("Organization name must be filled out.");
return false;
}
document.getElementById("recipientName1").textContent = a;
document.getElementById("organizationName1").textContent = b;
return false;
}
<!DOCTYPE html>
<html lang="en-US">
<!--
<head>
<script src="js/getNumberOfVolunteers.js"></script>
</head>
-->
<body>
<header>
</header>
<section id="numOfVolunteers">
<form name="numberOfVolunteersForm" onsubmit="return getNumberOfVolunteers()">
<label for="numberOfVolunteers">Number of volunteers:
</label>
<input type="number" min="5" max="10" value="5" name="numberOfVolunteers" id="numberOfVolunteers" placeholder="Enter the number of volunteers" />
<input type="submit" value="submit" id="submit1" />
</form>
</section>
<section id="pageForm">
<form action="#" name=inviteForm onsubmit="return getVolunteerInfoIntoArray()">
Number of Volunteers Entered: <strong><span id="numberOfVolunteers1"> </span></strong> <br/> <br/>
<label for="recipientName">Recipient name:
</label>
<input type="text" name="recipientName" id="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:
</label>
<input type="text" name="organizationName" id="organizationName" placeholder="Enter your Organization Name" />
<input type="submit" value="submit" id="submit2" onclick="validateForm" />
</form>
</section>
<article id="placeholderContent">
Hello <span id="recipientName1"></span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id="organizationName1"></span>
</article>
<script>
var volunteerArray = [];
function getVolunteerInfoIntoArray() {
var volCount;
for (volCount = 5; volCount < getNumberOfVolunteers1.length; volCount++);
document.getElementById('recipientName');
document.getElementById('organizationName');
volunteerArray.push([recipientName.value, organizationName.value]);
}
</script>
</body>
</html>
I need to display the input form and the article multiple times. And store all the input in an array.
Is this what you're trying to do? Hope this helps even it's not exactly what you want hahahah
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.numberofvolunteers,
.all-volunteers{
padding:10px;
}
input,button{
margin:3px;
}
span{
font-size:12px;
padding:10px 10px;
}
</style>
</head>
<body>
<div class="numberofvolunteers">
<input type="number" id="volunteers" placeholder="Enter No. of volunteers"><button onclick="createVolunteerForm()">Submit</button>
</div>
<div id="all-volunteers">
</div>
<span id="array"></span>
<script>
var volunteerArray = [];
function createVolunteerForm(){
volunteerArray = [];
var numberofvolunteers = document.getElementById("volunteers").value;
var content = "";
if(parseInt(numberofvolunteers) < 5 || parseInt(numberofvolunteers) > 10){
alert("No. of volunteer should be 5 to 10");
}
else{
for(var i = 0; i < parseInt(numberofvolunteers); i++){
content += createForm(i);
}
}
document.getElementById("all-volunteers").innerHTML = content;
}
function createForm(index){
var content = ' <div id="volunteer-div-'+index+'">'+
'<div id="volunteer-form-'+index+'">'+
'<input type="text" id=recipient-'+index+' placeholder="Enter recipient name">'+
'<input type="text" id=organization-'+index+' placeholder="Enter organization name">'+
'<button id="submit-'+index+'" onclick="displayMessage('+index+');addToArray('+index+');">submit</button>'+
'</div>'+
'<span id="message-'+index+'"></span>'+
'</div>';
return content;
}
function displayMessage(index){
var message = "Hello " + document.getElementById("recipient-"+index).value + " your organization is " + document.getElementById("organization-"+index).value;
document.getElementById("message-" + index).innerHTML = message;
}
function addToArray(index){
volunteerArray.push({recipient : document.getElementById("recipient-"+index).value , organization : document.getElementById("organization-"+index).value});
document.getElementById("array").innerHTML = JSON.stringify(volunteerArray);
}
</script>
</body>
</html>
I am new to Javascript and just getting into it for my web design class. I am working on a project with Javascript inside HTML. I have it all written, but the HTML doesn't seem to call the Javascript function. I've been searching for a solution but can't seem to get anything to work. The code is:
<html>
<head>
<script>
var calculateInterest = function(){
var rate;
var total;
var years = document.getElementById("years").value;
var principleAmount = document.getElementById("principal").value;
var interestRate = document.getElementById("intrest").value;
if ((interestRate >= 0) && (interestRate <= 15)) {
rate = interestRate / 100;
if ((principleAmount >= 0) && (principleAmount <= 10000)) {
total = principleAmount * (1 + rate * years);
document.getElementById("total_with_intrest").value = total;
}
else {
message-box ("Invalid data for principle amount.");
}
}
else {
message-box ("Invalid data for interest rate.");
}
}
</script>
<style>
form{ border: solid blue;
width:40em;
padding:0.5em;}
input{padding: 0.5em;}
</style>
</head>
<body>
<form>
Enter Principal Ammount : <input type="text" id ="principal" />
</br>
Enter Intrest Rate : <input type="text" id ="intrest" />
</br>
Enter Number of Years : <input type="text" id ="years" />
</br>
Grand Ammount : <input type="text" id ="total_with_intrest" disabled /></br>
</br>
<input type="button" id="click" value="Calculate" onclick=calculateInterest()/> </br>
</form>
</body>
</html>
The browser error is "SyntaxError: expected expression, got '}' " on line 2 but I just can't see what the issue is. Any help is greatly appreciated!
Side note, I am aware there are some weird spelling mistakes. My instructor is from India and not totally fluent in English. She made the HTML file for us to use and we just have to put in the Javascript.
There is no message-box function. Did you mean alert()? Your code currently works, with those changes:
var calculateInterest = function(){
var rate;
var total;
var years = document.getElementById("years").value;
var principleAmount = document.getElementById("principal").value;
var interestRate = document.getElementById("intrest").value;
if ((interestRate >= 0) && (interestRate <= 15)) {
rate = interestRate / 100;
if ((principleAmount >= 0) && (principleAmount <= 10000)) {
total = principleAmount * (1 + rate * years);
document.getElementById("total_with_intrest").value = total;
}
else {
alert("Invalid data for principle amount.");
}
}
else {
alert("Invalid data for interest rate.");
}
}
form{ border: solid blue;
width:40em;
padding:0.5em;}
input{padding: 0.5em;}
<form>
Enter Principal Amount : <input type="text" id ="principal" />
</br>
Enter Interest Rate : <input type="text" id ="intrest" />
</br>
Enter Number of Years : <input type="text" id ="years" />
</br>
Grand Amount : <input type="text" id ="total_with_intrest" disabled /></br>
</br>
<input type="button" id="click" value="Calculate" onclick="calculateInterest()" /> </br>
</form>
Small Nitpick: Fixed some small typos not related to code. Ammount => Amount. Intrest => Interest.
So I want to know if there is a possible way to add a box where it says my previous calculations. For example, if I put 4+4=8 then there would be a box where it says that... previous calculation was 4+4=8
Here is my code, but I don't know how to add the box to this code.
<!DOCTYPE html>
<html>
<head>
<title>Kalkulaator</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale1.0">
<script>
function calc()
{
var number1 = parseInt(document.getElementById('number1').value);
var number2 = parseInt(document.getElementById('number2').value);
var oper = document.getElementById('operaatorid').value;
if(oper === '+')
{
document.getElementById('tulemus').value = number1+number2;
}
}
</script>
</head>
<body>
<input type="text" id="number1"/><br/><br/>
<input type="text" id="number2"/><br/><br/>
<select id="operaatorid">
<option value="+">+</option>
</select>
<button onclick="calc();">=</button>
<input type="text" id="tulemus"/>
</body>
</html>
Try this. What I have done is I stored current values in variables and when next time '=' click I show that value in desire input box.
var prev1,prev2,prevOp;
function calc()
{
var number1 = parseInt(document.getElementById('number1').value);
var number2 = parseInt(document.getElementById('number2').value);
var oper = document.getElementById('operaatorid').value;
if(oper === '+')
{
document.getElementById('tulemus').value = number1+number2;
}
if(prev1 && prev2 && prevOp){
document.getElementById('5').innerHTML = document.getElementById('4').innerText;
document.getElementById('4').innerHTML = document.getElementById('3').innerText;
document.getElementById('3').innerHTML = document.getElementById('2').innerText;
document.getElementById('2').innerHTML = document.getElementById('1').innerText;
document.getElementById('1').innerHTML = prev1 + prevOp + prev2 + '=' +eval(prev1+prevOp+prev2);
}
prev1=number1;
prev2=number2;
prevOp=oper;
}
td {
border: 1px solid black;
width:300px;
height:20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Kalkulaator</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale1.0">
</head>
<body>
<input type="text" id="number1"/><br/><br/>
<input type="text" id="number2"/><br/><br/>
<select id="operaatorid">
<option value="+">+</option>
</select>
<button onclick="calc();">=</button>
<input type="text" id="tulemus"/><br/><br/>
<p>Previous</p>
<table>
<tr>
<td id="1"></td>
</tr>
<tr>
<td id="2"></td>
</tr>
<tr>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
</tr>
<tr>
<td id="5"></td>
</tr>
</table>
</body>
</html>
function calc() {
....
if(oper === '+') {
...
var calculation = String(number1) + oper + String(number2) + '=' + String(number1 + number2);
document.getElementById('previousCalculations').innerHTML += calculation + '</br>';
}
}
<body>
...
<div id='previousCalculations'></div>
</body>
You need to use this.
You can use an object to keep track and then just display when needed. Something like this:
//use this object to keep track of previous caluculation
var previousCalculation = {
number1: null,
number2: null,
oper: null,
value: null,
hasPreviousCalculation: false,
generateStr: function() {
return `${this.number1} ${this.oper} ${this.number2} = ${this.value}`;
}
};
function calc() {
if (previousCalculation.hasPreviousCalculation) {
document.getElementById('previousCalculation').value = previousCalculation.generateStr();
}
var number1 = parseInt(document.getElementById('number1').value);
var number2 = parseInt(document.getElementById('number2').value);
var oper = document.getElementById('operaatorid').value;
if (oper === '+') {
document.getElementById('tulemus').value = number1 + number2;
}
//store the data we need for later
previousCalculation.number1 = number1;
previousCalculation.number2 = number2;
previousCalculation.oper = oper;
previousCalculation.value = document.getElementById('tulemus').value
previousCalculation.hasPreviousCalculation = true;
}
<input type="text" id="number1" /><br/><br/>
<input type="text" id="number2" /><br/><br/>
<select id="operaatorid">
<option value="+">+</option>
</select>
<button onclick="calc();">=</button>
<input type="text" id="tulemus" />
<!--Where we'll display the previous calculation--><br/><br/> Previous Calculation<br/>
<input type="textfield" id="previousCalculation" value="None yet" />