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;

这是一个演示

＆＃13;

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

＆＃13;

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

＆＃13;

    <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>

＆＃13;

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小提琴：http://jsfiddle.net/mb1sd8c7/

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

3 个答案: