JS: document.write (calling CSS)

Question

JS: document.write (calling CSS)

3.1k views Asked by user2928585 At 14 September 2024 at 21:01

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>

Original Q&A

There are 3 answers

Casey Rule On 11 November 2014 at 13:17

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.

Davide Orazio Montersino On 11 November 2014 at 13:19

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>

**monojit biswas** · Accepted Answer · 2014-11-11 13:39:24

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>

TechQA.

JS: document.write (calling CSS)

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in DOCUMENT.WRITE

Popular Questions

Popular Tags

Trending Questions