在 html 中显示 javascript 变量将不起作用

Question

我有一个脚本，我试图访问一个变量，然后有一个文本字段，我可以在其中输入数字，然后当 "submit" 按钮被点击时，我想要 "input" 要添加到变量中，唯一的问题是我的显示变量的代码不起作用。

我的代码(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>

我的代码(javascript):

     var amountSoFar : int = 1;

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

我的代码(css):

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

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

Answer 1

改变

 var amountSoFar : int = 1;

到

 var amountSoFar , int = 1;

或

var amountSoFar;
var int = 1;

这是一个演示

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>

Answer 2

这一行令人费解：

 var amountSoFar : int = 1;

如果您尝试声明类型，则没有必要。 Javascript 将根据分配的值推断它是一个数字。你可以这样做：

var amountSoFar = 1;

Answer 3

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 和 JS 和你原来的例子一样。 JS 已更改为在 $('#form').submit() 上触发，因此它也可以与回车键一起使用。它还更新了以更新页面上的实时值。

工作 JS Fiddle：http://jsfiddle.net/mb1sd8c7/

在 html 中显示 javascript 变量将不起作用

Display javascript variable in html won't work

javascript

html

css

variables

add