Display javascript variable in html won't work

Question

I have a script, where I am trying to access a variable and then have a text field, where I am able to input numbers and then when the "submit" button is clicked, I want the "input" to be added to the variable, the only problem is my code for displaying the variable won't work.

my code(html):

    <form id="form" onsubmit="return false;">
    <input style="width:100px;" type="text" id="Input" />
    <input style="width: 100px;" type="submit" id="submitBut" onclick="getInput();" />
</form>

<a href="#">current amount is: <span id="amountSoFar"></span></a>

my code(javascript):

     var amountSoFar : int = 1;

function getInput() {
    var input = document.getElementById("Input").value;
    amountSoFar = amountSoFar + input;
    alert(input);
}

my code(css):

 #Input{
    position: absolute;
    top: 100px;
    margin-left: -100px;
    left: 50%;
}

#submitBut{ 
    position: absolute;
    top: 120px;
    margin-left: -100px;
    left: 50%;    
}

what's this ?!!! var amountSoFar : int = 1;

ZEE
– ZEE

2015-03-17 18:38:35 +00:00
Commented Mar 17, 2015 at 18:38 — ZEE
– ZEE, Commented Mar 17, 2015 at 18:38

Larry Turtis · Accepted Answer · 2015-03-17 18:43:16Z

2

This line is puzzling:

 var amountSoFar : int = 1;

If you are trying to declare a type, it's not necessary. Javascript will infer that it's a number based on the assigned value. You could just do:

var amountSoFar = 1;

answered Mar 17, 2015 at 18:43

Larry Turtis

1,91614 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matthew Darnell · Accepted Answer · 2015-03-17 18:51:43Z

0

var amountSoFar = 1;

$('#form').submit(function (event) {
    event.preventDefault();
    var input = $('#Input').val();
    amountSoFar = parseInt(amountSoFar) + parseInt(input);
    $('#amountSoFar').text(amountSoFar);
});

#Input {
    position: absolute;
    top: 100px;
    margin-left: -100px;
    left: 50%;
}
#submitBut {
    position: absolute;
    top: 120px;
    margin-left: -100px;
    left: 50%;
}

<form id="form" onsubmit="return false;">
    <input style="width:100px;" type="text" id="Input" />
    <input style="width: 100px;" type="submit" id="submitBut" />
</form>
<a href="#">current amount is: <span id="amountSoFar"></span></a>

CSS and JS is the same as your original example. The JS was changed to be triggered on $('#form').submit() so that it worked with the enter key as well. It was also updated to update the live value on the page.

Working JS Fiddle: http://jsfiddle.net/mb1sd8c7/

answered Mar 17, 2015 at 18:51

Matthew Darnell

4,5862 gold badges22 silver badges30 bronze badges

2 Comments

Sm00rf9000 Over a year ago

It works, but why does it only show the variable number when it's above 1, when nothing has been done to it, it doesn't show the number but then when you submit a number, it changes and you are able to see the number.

Matthew Darnell Over a year ago

You can put a starting number in there, or setup the javascript to initialize it if you wanted. There is no starting number in my example because there wasn't one in yours.

Gildas.Tambo · Accepted Answer · 2015-03-17 18:40:11Z

0

change

 var amountSoFar : int = 1;

to

 var amountSoFar , int = 1;

or

var amountSoFar;
var int = 1;

Here is a demo

var amountSoFar , int = 1;

function getInput() {
    var input = document.getElementById("Input").value;
    amountSoFar = amountSoFar + input;
    alert(input);
}

 #Input{
    position: absolute;
    top: 100px;
    margin-left: -100px;
    left: 50%;
}

#submitBut{ 
    position: absolute;
    top: 120px;
    margin-left: -100px;
    left: 50%;    
}

    <form id="form" onsubmit="return false;">
    <input style="width:100px;" type="text" id="Input" />
    <input style="width: 100px;" type="submit" id="submitBut" onclick="getInput();" />
</form>

<a href="#">current amount is: <span id="amountSoFar"></span></a>

answered Mar 17, 2015 at 18:40

Gildas.Tambo

22.7k7 gold badges53 silver badges79 bronze badges

2 Comments

bvaughn Over a year ago

I think ":int" is just an attempt to specify a type. I suspect he meant to say amountSoFar = 1 since "int" is not being used.

Gildas.Tambo Over a year ago

@brianvaughn but in javascript there is not such a type

Collectives™ on Stack Overflow

Display javascript variable in html won't work

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related