Question

我有这个代码，并且正在运行。但我想在textfield或hiddenfield中显示这个总数。

<script>
    function calculate_total(className, div){
        var elements = document.getElementsByClassName(className);
        var total = 0;
        for(var i = 0; i < elements.length; ++i){
            total += parseInt(elements[i].value);
        }
        document.getElementById(div).innerHTML = "Total: " + total;
    }
</script>

Html

<input type="text" name="box1" id="box1" class="addition_textbox" value="4" /><br />
<input type="text" name="box2" id="box2" class="addition_textbox" value="4" /><br />
<input type="text" name="box3" id="box3" class="addition_textbox" value="4" /><br />
<input type="text" name="box4" id="box4" class="addition_textbox" value="4" /><br />
<input type="text" name="box5" id="bo5" class="addition_textbox" value="4" /><br />
<input type="submit" name="calculate" id="calculate" value="Calculate Total" onclick="calculate_total('addition_textbox', 'total_text')" /><br />
<div id="total_text"></div>

我只想在这里显示总价值<input type="text" id="here">

Answer 1

应该是这样的：

document.getElementById(textArea).value = "Total: " + total;

对于divs，您使用.innerHTML，对于文本字段使用.value，并在调用函数calculate_total('addition_textbox', 'here')"时将文本字段的ID作为第二个说法！

Demo

Answer 2

只需在代码中添加一行：

function calculate_total(className, div){
  var elements = document.getElementsByClassName(className);
  var total = 0;
  for(var i = 0; i < elements.length; ++i){
    total += parseInt(elements[i].value);
  }
  document.getElementById(div).innerHTML = "Total: " + total;
  document.getElementById('here').value = total; //add this line
  return false; //add this to prevent the form to submit
}

Answer 3

我会选择：

 var reduce=Function.prototype.call.bind([].reduce);
 document.querySelector("input[type=button]").addEventListener("click", function(){
     var result=reduce(document.querySelectorAll("input[class=addition_textbox]"), function(o,n ){return o+n.value*1}, 0);
     document.querySelector("#total_text").textContent=result;
 });

1）将 reduce -Function绑定到reduce。

2）将click-Event绑定到我们的求和

3）检索所有相关的文本框并减少结果。

4）在DIV

中显示结果

这是小提琴Fiddle

查看MDN条目是否存在兼容性问题。

编辑：我刚看到»我只是想在这里显示总价值«

所以，你必须调整步骤（4），这应该是一个简单的;）

Answer 4

将行document.getElementById(div).innerHTML = "Total: " + total;更改为document.getElementById(div).value = "Total: " + total;可以解决您的问题..

您可以在this教程中找到.value的用法。

Answer 5

嘿，我用你的代码创建了一个jsfiddle，请仔细阅读...

function calculate_total(className, div){
  var elements = document.getElementsByClassName(className);
  var total = 0;
  for(var i = 0; i < elements.length; ++i){
    total += parseInt(elements[i].value);
  }
  document.getElementById(div).innerHTML = "Total: " + total;
  //here i am setting the total to the input tag
  document.getElementById("here").value =total;
}

在此处查看工作示例： - http://jsfiddle.net/6YSXC/26/

获取文本域javascript的价值

5 个答案:

Demo