Dynamically creating buttons in javascript using for loop, and assigning properties.

javascript html setattribute createelement
mjr_river picture mjr_river · Feb 2, 2017 · Viewed 11.4k times · Source

I am trying to use the below code to add buttons into the body of my page, the buttons appear, but none of the attributes display, it is a default button with no increase in size with font size, no text displayed, and no color.

When looking at the buttons using the console I can see the attributes are there, as shown below:

    <button id="btnA" innerhtml="A" value="A" text="A" font-size="14px"        background-color="#4CAF50"></button>

Not sure where I am going wrong here, any ideas?

-Thanks

Answer

kawadhiya21 picture kawadhiya21 · Feb 2, 2017

Everything is not an attribute, specially innerHTML.

btn.setAttribute("style","font-size:14px;background-color: #4CAF50");
btn.innerHTML = "A"

Related questions

JavaScript Adding an ID attribute to another created Element

I have some code here that will do the following. The code creates an element "p" then I append it to a "div" in the HTML. I would like that "p" I just created have an unique identifier (ID) and …

Read More
JS - Cannot read property 'setAttribute' of null

I am pretty new to javascript and want to code a header of an html site. JS: when the window width is smaller than 1215px --> left part goes 100% width; right part of the header to 0 I always get …

Read More
Change value attribute by class via JavaScript

I have the following HTML: <input class="vertical-tabs-active-tab" type="hidden" value="account" name="tabs__active_tab"> I need JavaScript that will change the value of "account" to "yolo". I thought I could do this: document.getElementsByClassName('vertical-tabs-active-tab').setAttribute("…

Read More