Question

我正在处理带有文档写入的调用类。我在CSS中定义了两个类。首先是＆＃34; sahovnica＆＃34; （棋盘），第二个是＆＃34; svetlo＆＃34; （光）和＆＃34; temno＆＃34;（黑暗）。我用这两个类为我的表定义了样式。然后我想用以下内容构建一个表： document.write( document.write('<td class="' + svetlo + '"></td>'););

尝试了很多不同的方法，但我的代码不起作用。如果我评论document.write（），页面就会出现。

 <!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>

Answer 1

你在使用document.write调用的行上有一些sytax错误。首先，你在行尾有额外错误的分号。其次，您使用svetlo和temno作为变量，而不是这样定义它们。以下是删除了这些错误的违规行：

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

或者，如果您定义了css类，可以通过变量定义它们，以防这些类可能需要更改。

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>'));
}

通过使用内置于大多数现代浏览器中的javascript调试器，您将来可以自己看到这些类型的错误。例如，在Chrome上，如果您转到View＆gt;开发人员＆gt; Javascript控制台，您应该能够在运行javascript时看到这些错误。

Answer 2

那是因为document.write（）将删除所有页面内容（如果在页面呈现后调用），正如您在此other SO answer

中看到的那样

您应该使用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>

Answer 3

这是工作

<!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（调用CSS）

3 个答案: