Create elements using function parameters, Javascript

Question

First time question asker, go easy on me. I think I've thoroughly looked through Stack so as to not ask a repeated question.

I have a function.

function createDivs(num) {
    for(let inc = 0; inc < num; inc++) {
    let div = document.createElement('div'),
        tab_content = document.getElementsByClassName('tab-content');

        div.className = 'classname';
        div.id = `number-${inc}`;
        div.innerHTML = 'did it work?';
        tab_content.innerHTML = div;
    }
}

Where the HTML is just simply

<div class="tab-content">
    <script>
       createDivs(4);
    </script>
</div>

I've tried other methods like

let tab_content = document.getElementsByClassName('tab-content');

tab_content.innerHTML = '<div class="classname" id=`number-${inc}`>did it work?</div>';

as well as ton other variations with the '' "" and `` and that didn't work neither.

I have also tried tab_content.appendChild(div); and that didn't work either.

In reality this is a downgrade of what my actual code is because I'm creating tons of elements that need things in them, but I can't even get this bit to work. It doesn't even work if I remove the for loop. Also I did see this post, hence why I tried the appendChild, but again that also didn't work.

tab_content is an array there, not a single element; innerHTML takes a string, not an element; several variables are being declared in the global scope — Semicolon
– Semicolon, Commented Apr 14, 2017 at 20:12
getElementsByClassName returns a nodeList, which does not have an innerHTML property. You need to select a single node from that list, or iterate over each node and then set the innerHTML — mhodges
– mhodges, Commented Apr 14, 2017 at 20:13

Rafael Kennedy · Accepted Answer · 2017-04-14 20:15:54Z

0

It looks to me like you want not to set the innerHTML, but actually to append several child nodes. In addition to that, there were a couple of errors in your code (getElementsByClassName) returns an array-like object, not just one object, so you'll need to select one to add your divs to.

Also, you named your i variable in the loop inc not i, so it doesn't actually increment the loop. Take a look at the below rewritten code and see if that does what you're looking for.

function createDivs(num) {
    for(let inc = 0; inc < num; inc++) {
    let div = document.createElement('div'),
        tab_content = document.getElementsByClassName('tab-content');

        div.className = 'classname';
        div.id = `number-${inc}`;
        div.innerHTML = 'did it work?';
        tab_content[0].appendChild(div);
    }
}
(function(){createDivs(4)})()

<div class="tab-content">

</div>

answered Apr 14, 2017 at 20:15

Rafael Kennedy

1,0047 silver badges18 bronze badges

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

1 Comment

Raults Over a year ago

Yeah, the i++ was a typo, sorry about that ^__^" The actual code uses inc++ I fixed it. Haven't tried what you have suggested yet though so I'll will get back to you!

gforce301 · Accepted Answer · 2017-04-14 20:14:34Z

0

You had a few typos in your code. usin i++ instead of inc++ in your loop. Not accessing tab_content as an array and using innerHtml instead of appendChild. Fixed code is below.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function createDivs(num) {
            for(let inc = 0; inc < num; inc++) {
            let div = document.createElement('div'),
                tab_content = document.getElementsByClassName('tab-content')[0];

                div.className = 'classname';
                div.id = `number-${inc}`;
                div.innerHTML = 'did it work?';
                tab_content.appendChild(div);
            }
        }
    </script>
</head>
<body>
<div class="tab-content">
    <script>
       createDivs(4);
    </script>
</div>
</body>
</html>

answered Apr 14, 2017 at 20:14

gforce301

2,9841 gold badge22 silver badges24 bronze badges

1 Comment

Raults Over a year ago

Yeah, the i++ was a typo, sorry about that ^__^" The actual code uses inc++ I fixed it. Haven't tried what you have suggested yet though so I'll will get back to you!

PA. · Accepted Answer · 2017-04-14 20:17:46Z

0

your for loop does not increment its control variable. Change it to

   for(let inc = 0; inc < num; inc++) {

and getElementsByClassName returns an array like object, not a single element. So you need to change it to

   tab_content = document.getElementsByClassName('tab-content')[0];

answered Apr 14, 2017 at 20:17

PA.

29.5k10 gold badges77 silver badges102 bronze badges

Collectives™ on Stack Overflow

Create elements using function parameters, Javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related