CSS does not work with Javascript function

Question

So I have a problem here. I have set some custom styles for a few divs to make them temporarily invisible. However these custom styles does not seem to trigger when I generate text from an outside .js file with the document write function:

CSS:

<style type="text/css">
        .section 
        {
            display: none;
        }
        .section#form1
        {
            display: block;
        }

JavaScript function to toggle visibility:

function toggleVisibility(newSection) 
        {
            $(".section").not("#" + newSection).hide();
            $("#" + newSection).show();
        }

Somewhere inside my recursive loop function that generates most of the content on this page I have this

...
if (step != 1)
                    {
                        document.write("</div>");
                    }
                    document.write("<div id='form"+step+"' class='section'>");
...

Do I need some sort of code to assign where JavaScript prints out all the elements of my form to a certain outer div? I can't seem to understand why all the divs are visible at the beginning, I did the same code earlier and it worked just fine then. Perhaps a good alternative to document.write might do the trick. Feels like document.write sorta overrides everything.

$(document).ready(function()
    {       
        $('#show-results').click(function() 
        {
            $.post('JSAAN.php', function(data) 
            {
                var pushedData = jQuery.parseJSON(data);

                // Uses the function from loop.js
                document.write("<form id='evalForm' onsubmit='return false;'>");
                var fieldsetActive = 0;
                loop(pushedData);
            })
        })
    });

And the loop function (who's in a separate file starts like this:

function loop(obj) {
    // Starts the form
        $.each(obj, function(key, val) {
            if($.isPlainObject(val) || $.isArray(val)) { // object, call recursively

You should just use a DOM inspector tool to look at the style rules being applied once your finished page loads in the browser. — Pointy
– Pointy, Commented Jul 17, 2012 at 14:02

Nick Beranek · Accepted Answer · 2012-07-17 14:11:33Z

3

Instead of using document.write to create your div, consider using document.createElement.

var elem = document.createElement('div'),
    formStep = 'form' + step;
elem.setAttribute('id', formStep);
elem.setAttribute('class', 'section');

This will insert the element into the DOM. document.write is not recommended for this type of usage.

If you need to use jQuery:

// using document.createElements('div') as the selector is the fastest way
var elem = $(document.createElement('div')),
    formStep = 'form' + step;
elem.attr('id', formStep).attr('class', 'section');

Let me know if you have any questions.

edited Jul 17, 2012 at 14:11

answered Jul 17, 2012 at 14:04

Nick Beranek

2,7611 gold badge20 silver badges14 bronze badges

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

2 Comments

gen_Eric Over a year ago

Couldn't you also do $('<div/>')?

Vlad Over a year ago

This works for input/label/fieldset etc too, couldnt get it to work immediately. Works wonders for the div though.

gen_Eric · Accepted Answer · 2012-07-17 14:11:54Z

2

You shouldn't be using document.write. If the page is fully loaded, it will erase the entire page (including the CSS).

You seem to be using jQuery already, so use its .append or .html methods instead.

answered Jul 17, 2012 at 14:11

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

5 Comments

Vlad Over a year ago

Seems like a perfect answer, just can't get it to work. I load my loop.js file in the header, and inside I am trying to create divs and all the other stuff like this. The main.html file has a div with id="poll". Should be correct no? $("#poll").append("<div name='form"+step+"' class='section'>");

gen_Eric Over a year ago

@Tom: That looks right..... Is your code in a $(function(){}) block ($(document).ready(function(){}))? You may be looking for $('#poll') before it exists.

Vlad Over a year ago

Added some snippets at the question, I think they should be right. A bit unsure about how included file loop.js behaves under these circumstances.

Vlad Over a year ago

I mean would it still count as if it is inside document.ready if it's being loaded as <script src="loop.js"> and called inside document.ready ?

gen_Eric Over a year ago

@Tom: If it's just a function, it doesn't need to be in document.ready. Only the call to it does (if it accesses DOM elements). Also, make sure the function is in scope when it's being called.

haynar · Accepted Answer · 2012-07-17 14:12:27Z

0

because when you use document.write it overwrites everything in the page including styles etc, I think you should consider using DOM functions instead of using document.write

answered Jul 17, 2012 at 14:12

haynar

6,0517 gold badges37 silver badges53 bronze badges

Collectives™ on Stack Overflow

CSS does not work with Javascript function

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related