How to give output of a java script variable in a button

Question

I have a javascript variable "len" and I want its value in my button ,here is my button code :

<button type="button" class="btn btn-primary">
   Pending Task
   <span class="badge badge-light"></span>
   <span class="sr-only"></span> 
</button>

Welcome to Stack Overflow! Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output using the stack snippet. — SMAKSS
– SMAKSS, Commented May 31, 2020 at 7:14
I want its value in my button, what does this mean? What is Pending Task? should that len value appear in span elements? — SMAKSS
– SMAKSS, Commented May 31, 2020 at 7:16

Sirko · Accepted Answer · 2020-05-31 09:45:13Z

1

In your case I suggest to add another <span> to make the text of your button addressable without changing the icons. So your button becomes

<button type="button" class="btn btn-primary">
   <span class="content">Pending Task</span>
   <span class="badge badge-light"></span>
   <span class="sr-only"></span> 
</button>

Then in your JavaScript, you need a selector to address this new <span>. Currently you button has no ID, so the following selector might also select other buttons. As you're already using bootstrap, you'll have jQuery available. That makes the code for setting the text rather short:

 $( 'nav button .content' ).text( len );

As you're just using vanilla JS right now, the above line could also be rewritten like this

 document.querySelector( 'nav button .content' ).textContent = len;

edited May 31, 2020 at 9:45

answered May 31, 2020 at 7:16

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Hardik Choudhary Over a year ago

Hey!, its not working can you please help me I am new in devolping .

Sirko Over a year ago

Can you define "not working" in a little more detail?

elahe karami Over a year ago

I think you have not added jquery to your code and that's why it's not working for you.

Sirko Over a year ago

@elahekarami Bootstrap has jQuery included, so this should not be the issue here.

Hardik Choudhary Over a year ago

I have include your code in my app.js file but not getting its value in button however if I do console.log of variable (just for confirming the variable value), it has a value

|

Collectives™ on Stack Overflow

How to give output of a java script variable in a button

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related