javascript - 将函数的结果显示为HTML

问题描述 投票：1回答：5

所以我有这个代码：

function check_total()
  {
   var inputElems = document.getElementsByTagName("input"),
    total = 0;

    for (var i=0; i<inputElems.length; i++) {       
       if (inputElems[i].type == "checkbox"){
          total++;
       }
    }
}   

document.getElementById('totalInput').innerHTML = total;

基本上，它会计算文档中复选框的数量。

我想在HTML的标题中显示结果（总计）。

到目前为止我试过这个，但是没有用：

<span id='totalInput'>default</span>
javascript html
5个回答
2
投票

您的代码段中缺少一些内容。

首先，您需要将“total”变量移出函数之外。通过成为全局变量，您将能够在以后的代码中使用它。

其次，您需要实际触发此函数，以便它执行并更新total变量。你可以这样做

check_total();

就在document.getElementById ...行之前

最后，您可以使用document.querySelectorAll（）函数来简化此操作。这将返回一个包含所有匹配元素的数组，您可以将其作为.innerHTML的一部分使用。通过使用它，您可以通过以下方式替换所有代码：

document.getElementById('totalInput').innerText = document.querySelectorAll("input[type=checkbox]").length;

最后，在旁注中，您应该使用.innerText而不是.innerHTML。使用innerHTML总是很危险，因为有人可以在这里注入一些javascript。在这种情况下，由于您不想显示实际的HTML，只需使用.innerText，它使用文本而不是HTML来执行相同的操作。

这是一个有效的例子：https://jsbin.com/puhimip/edit?html,js,output

1
投票

您尝试将函数的结果绘制到DOM中的行不在函数内部。将该行放在check_total（）中（并记得也调用该函数。）

function check_total() {
  var inputElems = document.getElementsByTagName("input"),
    total = 0;

  for (var i = 0; i < inputElems.length; i++) {
    if (inputElems[i].type == "checkbox") {
      total++;
    }
  }
  document.getElementById('totalInput').innerHTML = total; // this line was outside the function
}

check_total(); // call the function
<div><!-- for demo -->
<input type="checkbox">
<input type="radio">
<input type="checkbox">
<input type="text">
</div>

<span id='totalInput'>default</span>
1
投票

您的示例看起来应该可以工作，除了代码中的示例之外，您永远不会从函数中返回任何内容。您还需要调用该函数以使其运行计算。

function check_total() {
    var inputElems = document.getElementsByTagName("input"),
    total = 0;

    for (var i=0; i<inputElems.length; i++) {       
       if (inputElems[i].type == "checkbox"){
           total++;
       }
    }
    return total;
}   

document.getElementById('totalInput').innerHTML = check_total();

请注意return末尾的check_total()声明。这使您可以将计算结果分配给您想要的任何内容（在本例中为另一个元素的innerHTML属性）。

正如其他人所建议的那样，你也可以将整个变量从你的函数中移出到所谓的全局范围内，但是出于很多原因不建议这样做（参见https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals）。

1
投票

尝试通过查询所有复选框从NodeList构建一个数组：

const countCheckboxes = () =>
  document.querySelectorAll('input[type=checkbox]')

const updateHeader = () =>
  document.getElementById('totalInput').textContent = countCheckboxes();

updateHeader();

如果您只想计算选中的复选框，则应使用Array.from

const isChecked = input =>
  input.checked

const checkedCheckboxes = () 
  Array.from(document.querySelectorAll('input[type=checkbox]'))
    .filter(isChecked)
    .length
0
投票

我没有太深入地看过乔尔的答案，所以不知道这是否也能解决这个问题。我认为Tyr肯定是在做某些事情，我也想知道你是否真的想知道复选框是否被选中了？

这是一个快速的肮脏的镜头。

    <!DOCTYPE html>
    <html>

    <head>
        <script>
            document.addEventListener('DOMContentLoaded', function() {

                document.getElementById('doit').addEventListener('click', function() {
                    check_total();
                });

            });

            function check_total()
              {
               var inputElems = document.getElementsByTagName("input"),
                total = 0;

                for (var i=0; i<inputElems.length; i++) {       
                   if (inputElems[i].type == "checkbox"){
                      // do you want to check the the checkbox is checked, because it doesn't at the moment?
                      total++;
                   }
                }
                document.getElementById('totalInput').innerHTML = total;
            }   


        </script>
    </head>

    <body>
        <button id="doit">Do it</button><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <div id="totalInput"></div>

    </body>

    </html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.