How to call a JS variable for an H1 HTML

Asked

Viewed 15,590 times

5

I got this little FIDDLE to exemplify my problem.

HTML 

  <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <h1>"I have " + count + " list items"</h1>

JAVASCRIPT

var count = 0;

$("li").each(function(){
      count++;      
    });

The variable count Javascript will have the number of li's of ul.

How do I show up at the h1 of HTML, the variable count ?

javascript jquery html

  • Do not prefer to print all text on h1? In fact, I think it’s the only solution

  • Appear all text like this? I wanted it to appear: "I have count list items"

3 answers

9


Or you fill in the <h1> whole, like this:

var count = 0;

$("li").each(function(){
    count++;      
});
$('h1').html("I have " + count + " list items");

Or create a span inside to keep only the count:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<h1>I have <span>0</span> list items</h1> 

var count = 0;

$("li").each(function(){
    count++;      
});
$('h1 span').html(count);

And as @Kaduamaral said, each to make this count, you can solve everything in a row, taking the size (length) of the collection of <li>s:

$('h1 span').html( $('li').length );

If you want to do it in pure Javascript instead of jQuery, it’s also very simple:

var lis = document.querySelectorAll('li');
var span = document.querySelector('h1 span');
span.innerHTML = lis.length;
  • 1

    An improvement would be neither using each, use only one $("li").length even, but I don’t know how the context of the author really is...

  • @Kaduamaral what will be the main difference if I use the length instead of the each?

  • 1

    @msm.oliveira, the length, is a variable that already contains the value ready, IE, you do not need to "waste time" going through all the items to know how many you have. http://jsfiddle.net/g0z1j3n7/

  • @msm.oliveira Kaduamaral is right, I edited the answer showing an example with the length.

  • @bfavaretto after seeing the comment of Kaduamaral I saw that the result was the same. I just wanted to realize the difference. but I got it. thank you both

  • @msm.oliveira I also added an alternative in pure JS, in case you want to give up jQuery.

Show 1 more comment

3

A possible solution is to send the code/text you want to your h1:

var count = 0;

$("li").each(function(){
      count++;      
    });

$('h1').empty().append("I have " + count + " list items");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<h1>"I have " + count + " list items"</h1>

0

You can do it this way:

var count = 0;
$("li").each(function(){
  count++;      
});
$( "#varh1").html("I have "+count+" list items");

In which varh1 is the ID of element H1

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.