Question

我正在制作一些按钮，希望具有一些整数值。我希望它们在单击按钮时在其下方的文本框中显示值。当我单击第二个按钮时，它的值应该被添加到第一个按钮中，并显示在文本框中。所有按钮均应如此。因此，基本上，这是一种计算器，但是我不想单击一个单独的+号，而是只单击按钮并添加了它们的值并显示在文本框中。

这是我尝试使用的javascript。

var m1;
var m2;
var m3;
var m4;
var m5;
var m6;


function f1(){

 m1=1;
 }
function f2(){

m2=5; 
}
function f3(){


 m3=10;
}
function f4(){

 m4=20
}
function f5(){

  m5=50;
}
function f6(){ 
m6=100;
}

function ff(){
document.getElementById("total").value=m1+m2+m3+m4+m5+m6;}

我将所有这些功能放到关联的按钮上（1,5,10,20,50是我想关联到我的按钮的值）。按钮和文本字段如下：

<input type="button" id="1" onclick="f1(); ff();">
<input type="button" id="2" onclick="f2(); ff();">
<input type="button" id="3" onclick="f3(); ff();">
<input type="button" id="4" onclick="f4(); ff();">
<input type="button" id="5" onclick="f5(); ff();">
<input type="button" id="6" onclick="f6(); ff();">

<input type="text" id="total"">

Answer 1

将单击按钮的值作为参数传递，并将其添加到总和中。

如果您想重置总和，我将添加重置按钮。

var sum = 0;

function f(val){
  sum += val;
  document.getElementById("total").value = sum;
}
function reset(){
  sum = 0;
  document.getElementById("total").value = sum;
}

<input type="button" value = "1" id="1" onclick="f(1);;">
<input type="button" value = "5" id="2" onclick="f(5); ">
<input type="button" value = "10" id="3" onclick="f(10);">
<input type="button" value = "20" id="4" onclick="f(20); ">
<input type="button" value = "50" id="5" onclick="f(50);">
<input type="button" value = "100" id="6" onclick="f(100);">

<input type="text" id="total"">
<button onclick="reset()" >Reset</button>

Answer 2

您不应该将dom与js结合使用，应该做类似的事情。

var m1 = 0,m2 = 0,m3 = 0,m4 = 0,m5 = 0,m6 = 0;
var result = 0;

function f1(){

 m1=1;
 }
function f2(){

m2=5; 
}
function f3(){


 m3=10;
}
function f4(){

 m4=20
}
function f5(){

  m5=50;
}
function f6(){ 
m6=100;
}

function ff(){
  result = m1+m2+m3+m4+m5+m6;
  document.getElementById("total").value= result;
}
document.getElementById("1").addEventListener("click", function (){f1(); ff();});
document.getElementById("2").addEventListener("click", function (){f2(); ff();});
document.getElementById("3").addEventListener("click", function (){f3(); ff();});
document.getElementById("4").addEventListener("click", function (){f4(); ff();});
document.getElementById("5").addEventListener("click", function (){f5(); ff();});
document.getElementById("6").addEventListener("click", function (){f6(); ff();});

<input type="button" id="1">
<input type="button" id="2">
<input type="button" id="3">
<input type="button" id="4">
<input type="button" id="5">
<input type="button" id="6">

<input type="text" id="total"">

Answer 3

您可能希望将功能修改为：

function f1(){
    m1=1;
    document.getElementById('total').value =  
    document.getElementById('total').value + m1
}

我认为您不需要功能ff（）。

通过这种方式，文本框中的值始终根据您单击的按钮而更新。

分别单击按钮时如何增加按钮的值？

3 个答案: