单击按钮上的Javascript将值添加到文本框

时间:2015-03-21 18:01:48

标签: javascript calculator

只是一个超级简单的JavaScript问题,但我无法找到它是如何工作的

需要将脚本输出发送到输入。

http://jsfiddle.net/mYuRK/

上的原始脚本

谢谢!



var theTotal = 0;
$('button').click(function(){
   theTotal = Number(theTotal) + Number($(this).val());
    $('.tussenstand').text("Total: "+theTotal);        
});

$('.tussenstand').text("Total: "+theTotal);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="tussenstand">

<button value="1">1</button>
<button value="2">2</button>
<button value="4">4</button>
<button value="6">6</button>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:5)

由于您为输入使用了ID,因此您需要为选择器使用#而不是.。对于input,您必须分配值。

而不是$('.tussenstand').text(使用$('#tussenstand').val(

&#13;
&#13;
var theTotal = 0;
$('button').click(function(){
   theTotal = Number(theTotal) + Number($(this).val());
    $('#tussenstand').val("Total: "+theTotal);        
});

$('#tussenstand').val("Total: "+theTotal);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="tussenstand">

<button value="1">1</button>
<button value="2">2</button>
<button value="4">4</button>
<button value="6">6</button>
&#13;
&#13;
&#13;

答案 1 :(得分:4)

将类选择器更改为JS中的id选择器,并使用val()代替text()

var theTotal = 0;
$('button').click(function(){
   theTotal = Number(theTotal) + Number($(this).val());
    $('#tussenstand').val("Total: "+theTotal);        
});

$('#tussenstand').val("Total: "+theTotal);

val()是jQuery用来编辑/检索文本框值的内容。

答案 2 :(得分:0)

使用此SCRIPT:

<script>
        function insertTextInInputValue(buttonValueIs){
            var inputElementIs = document.getElementById("tussenstand");
            inputElementIs.value = inputElementIs.value + buttonValueIs;
        }
    </script>

使用HTML:

<input id="tussenstand">
<button onclick="insertTextInInputValue(1);">1</button>
<button onclick="insertTextInInputValue(2);">2</button>
<button onclick="insertTextInInputValue(3);">3</button>
<button onclick="insertTextInInputValue(4);">4</button>
<button onclick="insertTextInInputValue(5);">5</button>
<button onclick="insertTextInInputValue(6);">6</button>