Add class to button inside a js function

Question

I want to create buttons and add classes to those button after creation I am working on below code !1 Please Help me out :)

Will this work?

$("#"+element.id).addClass(".btn");

Thank you in advance !!

for (var i = 0; i < 9; i++) {
  add(i);
}

function add(i) {

  var element = document.createElement("input");

  element.type = "button";
  element.value = i;
  element.name = i + 1;
  element.id = "btn" + i;
  element.onclick = function() {
    window.move(i);
  };

  var append = document.getElementById("append");

  append.appendChild(element);
  alert(element.id);
  $("#" + element.id).addClass(".btn");
}

Possible duplicate of How do I add a class to a given element? — Sean
– Sean, Commented Nov 22, 2017 at 8:35
when using .addClass() you can omit the . in front of the classname — empiric
– empiric, Commented Nov 22, 2017 at 8:35

Roland Ruul · Accepted Answer · 2017-11-22 08:34:16Z

4

You can add classes in javascript like that:

element.className += 'className';

If you are using jQuery then what you did is correct, except the dot you put into addClass function. So instead of:

$(element).addClass('.className');

You do:

$(element).addClass('className');

answered Nov 22, 2017 at 8:34

Roland Ruul

1,2529 silver badges15 bronze badges

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

1 Comment

Vaisakh MA Over a year ago

Thank you so much, It Worked :)

Anmol Mittal · Accepted Answer · 2017-11-22 08:35:20Z

2

You can add class directly by accessing "className" property.

var element = document.createElement("input");

element.type = "button";
element.className = "clr-red";

Refer here for more

answered Nov 22, 2017 at 8:35

Anmol Mittal

8535 silver badges12 bronze badges

Comments

Alexandr Kudryashov · Accepted Answer · 2017-11-22 08:36:00Z

2

I think you should use without dot.

$("#"+element.id).addClass("btn");

answered Nov 22, 2017 at 8:36

Alexandr Kudryashov

6313 silver badges16 bronze badges

Comments

MartinWebb · Accepted Answer · 2017-11-22 08:37:21Z

2

You can just use the classList.add method on the element you create.

   for (var i = 0; i < 9; i++)
    {
        add(i);
    }
    function add(i) {

        var element = document.createElement("input");

        element.type = "button";
        element.value = i; 
        element.name = i + 1;
        element.id="btn"+i;
        element.classList.add("btn");
        element.onclick = function () { 
            window.move(i);




        };


        var append =document.getElementById("append");
        append.appendChild(element);

    }

answered Nov 22, 2017 at 8:37

MartinWebb

2,0081 gold badge14 silver badges16 bronze badges

Comments

lee · Accepted Answer · 2017-11-22 08:36:59Z

1

you just type the class name only

addClass("btn"); instead of addClass(".btn");

answered Nov 22, 2017 at 8:36

lee

192 bronze badges

Collectives™ on Stack Overflow

Add class to button inside a js function

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related