JS: document.write (calling CSS)

Question

I'm dealing with the calling classes with document write. I defined two classes in CSS. First is "sahovnica" (chessboard) and second are "svetlo" (light) and "temno"(dark). With both classes I defined style for my table. And then I wanted to built a table with: document.write( document.write('<td class="' + svetlo + '"></td>'););

Tried many different ways, but my code don't works. If I comment document.write(), page show up.

 <!DOCTYPE html>
    <html>
        <head>
            <title>Šahovska partija 2014</title>
            <meta charset="UTF-8">
            <style>
                h1 {
                    color:blue;
                    font-family:verdana;
                    font-size:125%;
                    }
                .sahovnica { border-spacing: 0; border-collapse: collapse; }
                .sahovnica th { padding: .5em; }
                .sahovnica td { border: 1px solid; width: 2em; height: 2em; }
                .sahovnica .svetlo { background: #eee; }
                .sahovnica .temno { background: #000; }
            </style>
        </head>
        <body>

        <table class="sahovnica">



        <script>

        var vrstica = parseInt(prompt("Vnesite številko vrstice", ""));
        var stolpec = parseInt(prompt("Vnesite zaporedno številko stolpca", ""));

        stolpec = stolpec -1

        var value = vrstica + stolpec
        value = value%2

        if (value == 0) {
           document.write( document.write('<td class="' + svetlo + '"></td>'););
            }
        else {
           document.write( document.write('<td class="' + temno + '"></td>'););
        }



        </script>
        </table>
        </body>





    </html>

well you have syntax errors there - you can't have a semicolon within a function call - `foo(bar(););` is invalid. Instead you need `foo(bar());` — yuvi, Nov 11 '14 at 13:15

Casey Rule · Answer 1 · 2014-11-11T13:25:29.177

2

You have a few sytax errors on your lines with the document.write calls. First of all, you had extra misplaced semicolons at the ends of the lines. Second, you were using svetlo and temno as variables without defining them as such. Here is what the offending lines look like with those errors removed:

if (value == 0) {
    document.write( document.write('<td class="svetlo"></td>'));
} else {
    document.write( document.write('<td class="temno"></td>'));
}

Alternatively, you can define your css classes through variables if you define them, in case those classes may need to change.

var s = 'svetlo';
var t = 'temno';
if (value == 0) {
    document.write( document.write('<td class="'+s+'"></td>'));
} else {
    document.write( document.write('<td class="'+t+'"></td>'));
}

You'll be able to see these sorts of errors yourself in the future by using a javascript debugger, which are built into most modern browsers. For instance, on Chrome, if you go to View > Developer > Javascript Console, you should be able to see these errors as your run the javascript.

edited Nov 11 '14 at 13:25

answered Nov 11 '14 at 13:17

Casey Rule

2,085
2
18
28

2

While this answer is correct, it would probably be a good idea to explain to OP what happened (why you put the semicolon outside, why the page hadn't loaded before and how to catch errors next time using the console) – yuvi Nov 11 '14 at 13:18
Fair point. I will keep that in mind in the future. Thanks! – Casey Rule Nov 11 '14 at 13:20
2

@CaseyRule Why do you keep that in mind **in the future**? There is an edit button available. – GuyT Nov 11 '14 at 13:24
I'm editing my original post as well, but I'll try to be more descriptive the first time through in the future. – Casey Rule Nov 11 '14 at 13:26

score 0 · Answer 2 · edited May 23 '17 at 12:27

That's because document.write() will delete all page contents, if called after page rendering, as you can see in this other SO answer

You should use element.innerHTML()

<table id="myTable">
</table>

<script type="text/javascript">
    function write(content){
      document.getElementById('myTable').innerHTML += content;
    }

    var vrstica = parseInt(prompt("Vnesite številko vrstice", ""));
    var stolpec = parseInt(prompt("Vnesite zaporedno številko stolpca", ""));

    stolpec = stolpec -1;

    var value = vrstica + stolpec;
    value = value % 2;

    write (value == 0 ? svetlo : temlo);
</script>

score 0 · Accepted Answer · answered Nov 11 '14 at 13:39

This is Working

<!DOCTYPE html>
<html>

<head>
    <title>Šahovska partija 2014</title>
    <meta charset="UTF-8">
    <style>
    h1 {
        color: blue;
        font-family: verdana;
        font-size: 125%;
    }
    .sahovnica {
        border-spacing: 0;
        border-collapse: collapse;
    }
    .sahovnica th {
        padding: .5em;
    }
    .sahovnica td {
        border: 1px solid;
        width: 2em;
        height: 2em;
    }
    .sahovnica .svetlo {
        background: #eee;
    }
    .sahovnica .temno {
        background: #000;
    }
    </style>
</head>

<body>

    <table class="sahovnica" id="my_table">    
        <script>
        var vrstica = parseInt(prompt("Vnesite številko vrstice", ""));
        var stolpec = parseInt(prompt("Vnesite zaporedno številko stolpca", ""));

        stolpec = stolpec - 1

        var value = vrstica + stolpec
        value = value % 2;
        var classType =value? 'temno':'svetlo';
        document.getElementById("my_table").innerHTML += '<td class="' + classType + '"></td>';
        </script>
    </table>
</body>

</html>

JS: document.write (calling CSS)

3 Answers3