CODEWITHSUNDEEP
javascripthtml
F0l0w
F0l0w

Reputation: 261

javascript - display the result of a function as HTML

so I have this code:

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;

Basically, it counts the number of checkboxes in my document.

I would like to have the result (total) displayed in the header of my HTML.

I tried this so far, but didn't work:

<span id='totalInput'>default</span>

Upvotes: 1

Views: 1111

Answers (5)

Sundance.101
Sundance.101

Reputation: 424

I haven't looked at Joel's answer too deeply, so don't know if that also solves this. I think Tyr was definitely onto something, though, and I also wonder if you actually want to know if the checkboxes are checked?

This was a quick n dirty shot at it.

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

Upvotes: 0

Benny Powers
Benny Powers

Reputation: 5846

Try just build up an array from the NodeList that you get by querying for all checkboxes:

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

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

updateHeader();

If you wanted to count only the checked checkboxes, you should use Array.from

const isChecked = input =>
  input.checked

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

Upvotes: 1

Julian Suggate
Julian Suggate

Reputation: 687

Your example looks like it should work, other than that in your code, you never return anything from the function. You also need to invoke the function to make it run the calculation.

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();

Note the return statement at the end of check_total(). This enables you to assign the result of that calculation to anything you want (in this case the innerHTML property of another element).

As others have suggested, you could also move the total variable out of your function and into what's called global scope, but that's not recommended for a whole lot of reasons (see https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals).

Upvotes: 1

Daniel Beck
Daniel Beck

Reputation: 21514

The line where you were trying to draw the results of the function into the DOM, wasn't inside the function. Put that line inside check_total() (and remember to call the function as well.)

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>

Upvotes: 1

Joel Lord
Joel Lord

Reputation: 2173

There is a few things you are missing in your code snippet.

First of all, you will need to move your "total" variable outside of the function. By becoming a global variable, you will be able to use it later in your code.

Secondly, you need to actually trigger this function so that it executes and updates the total variable. You can do this with 

check_total();

right before the document.getElementById... line

Finally, you could simplify this by using document.querySelectorAll() function. This will return you an array of all matching elements and you can simply use this as part of your .innerHTML . By using this, you can replace all of your code by:

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

Finally, on a side note, you should probably use .innerText instead of .innerHTML. Using innerHTML is always dangerous as someone could inject some javascript here. In this case, since you don't want to display actual HTML, just use .innerText which does the same thing but with text instead of HTML.

Here is a working example: https://jsbin.com/puhimip/edit?html,js,output

Upvotes: 2

Related Questions