CODEWITHSUNDEEP
javascripthtmlcss
David A
David A

Reputation: 88

How to change font size in multiple html textareas using Javascript

this is confusing me. I'm trying to get this javascript to change the font size of multiple textarea's with id=label. Problem is, on the first jsfiddle it is only changing the first textarea, and when i try it on a jsfiddle with more of my code included if fails to work at all!!!! Any advice would be great.

$("#fontsize").change(function() {
    $('#label').css('font-size', $(this).val() + 'px');
}).change();

Here is a simple jsfiddle that seems to work on the first textarea- https://jsfiddle.net/q7jz9034/2/

And here it is intergated with a bit more of my code and css, making it stop working all together!! - https://jsfiddle.net/m4pdjywx/

Upvotes: 2

Views: 356

Answers (2)

Vnuuk
Vnuuk

Reputation: 6527

Just another point. You shouldn't use id if you have several items you want to change. Instead you can use tag name. Please follow my example:

$("#fontsize").change(function() {
    $('textarea').css('font-size', $(this).val() + 'px');
}).change();

Upvotes: 0

Adrian
Adrian

Reputation: 903

You cannot have more elements with the same id - that's the purpose of ID. Your solution is to change id to class (for example, <textarea class='label'> ) and change your javascript to $('.label').

Edit: Here is your updated jsfiddle. You already had class on textarea elements, so I just updated that part. However, your code was not subscribing to change event, rather emiting it so I updated that part too: ("#fontsize").on('change', function() { ... }

You also didn't include jQuery in that fiddle and I also added wrapper to wait for jQuery to load: $(function(){ // ... }

As you can see, everything is working as expected now :)

Upvotes: 9

Related Questions