Generate HTML with JavaScript not working?

Question

I'm quite new to JavaScript so I don't understand what's not working. The Code:

var postCount = 0;

function generatePost(title, time, text) {
    var div = document.createElement("div");
    div.className = "content";
    div.id = "post_" + postCount;
    document.getElementById("postcontainer").appendChild(div);

    var h3 = document.createElement("h3");
    div.id = "post_h3_" + postCount;
    h3.innerHTML = title;
    document.getElementById("post_" + postCount).appendChild(div);

    var span = document.createElement("span");
    document.getElementById("post_h3_" + postCount).appendChild(div);
    span.innerHTML = time;

    var paragraphs[] = text.split("||");
    for (var p : paragraphs[] {
        var paragraphCount = 0;
        var h3 = document.createElement("h3");
        document.getElementById("post_p_" + postCount + "_" + paragraphCount).appendChild(div);
        paragraphCount++;
    }
    postCount++;
}

function loadPosts() {
    generatePost("Testing Title", "I don't know", "This is || a paragraph");
}

I included it with:

<body onload="loadPosts()">

In the end, nothing shows up. Not even in the Inspector in my Browser. Is my Code even run? Did I forget an essential doStuffNow()?

Second: If I add a class to a div with JavaScript, do the CSS-Rules in the style.css append to it?

If you format your code it appears that you have an extra or misplaced closing brace: jsfiddle.net/isherwood/m5j4sjsk — isherwood
– isherwood, Commented Nov 18, 2015 at 20:19
Instead of adding the function on the onload of your body you should wrap your code into something that in called when the DOM is loaded like this. document.addEventListener('DOMContentLoaded', function() {// YOUR_CODE_HERE}) And then simply call the function generatePost, no need for the loadPosts function. — Raphael Parent
– Raphael Parent, Commented Nov 18, 2015 at 20:25
postcontainer is a div with the id postcontainer, It is where it's meant to be. — TheLexoPlexx
– TheLexoPlexx, Commented Nov 18, 2015 at 20:46

Sauhard Gupta · Accepted Answer · 2015-11-18 20:16:36Z

1

To answer the second part of your question, yes, the CSS styling that applies to a class will be added to an object that you add the same class to.

answered Nov 18, 2015 at 20:16

Sauhard Gupta

2193 silver badges10 bronze badges

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

Comments

Yuri · Accepted Answer · 2015-11-18 20:30:34Z

0

You have errors in your code. What editor do you use? You can also use browser console to check for errors in your page. Check here:

var paragraphs = text.split("||");
for (var p in paragraphs) {
    /*
    *
    * Where do you use your var p?
    *
    */
    var paragraphCount = 0;
    var h3 = document.createElement("h3");
    document.getElementById("post_p_" + postCount + "_" + paragraphCount).appendChild(div);
    paragraphCount++;
}

Why don't you try with jQuery?

edited Nov 18, 2015 at 20:30

answered Nov 18, 2015 at 20:24

Yuri

3,3043 gold badges30 silver badges48 bronze badges

6 Comments

TheLexoPlexx Over a year ago

I'm using Brackets from Adobe which is not good for PHP and/or JavaScript yet. I didn't use jQuery because it's an API, another file, website = slower.

Yuri Over a year ago

Use CDN. The minified version is less than 50kb, which is downloaded pretty fast with nowadays connections :)

Yuri Over a year ago

Try PhpStorm, SublimeText, Netbeans for programming

TheLexoPlexx Over a year ago

Brackets has a Live-Preview, so if you edit something it is immediately edited on your preview. It's quite awesome for editing HTML and CSS.

Yuri Over a year ago

Use inspect elements in your browser, or FireBug addon. But if Brackets doesn't show you your errors, you should get another one

|

Collectives™ on Stack Overflow

Generate HTML with JavaScript not working?

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related