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

Question

我有一个脚本，在这里我尝试访问变量，然后有一个文本字段，在这里我可以输入数字，然后单击“提交”按钮时，我希望将“输入”添加到变量中，唯一的问题是我用于显示变量的代码无法正常工作。

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

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

var amountSoFar = 1;

Answer 2

更改

 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 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()上触发，因此它也可以与enter键一起使用。 它还进行了更新，以更新页面上的实时价值。

工作的JS小提琴： http : //jsfiddle.net/mb1sd8c7/