Question

我正在尝试将用JavaScript制作的<img>元素附加到<td>。会发生什么情况是图像意图略微扩展的区域，但图像不会出现。控制台没有给我任何错误，我真的很困惑。这是我的所有代码（因为我不知道导致问题的原因）。我也在本地使用normalize css文件和jquery。

的Javascript

window.onload = function(){
    var turn = 1;
    document.title = "First Player";
    var coolDown = 'False';
    var makeScreen = function(){
        var height = $(window).height();
        var width = $(window).width();
        $('#screen').height(height);
        $('#screen').width(height);
        var extraSpace = width - height;
        var halfOfExtraSpace = extraSpace / 2;
        $('#screen').css("left", halfOfExtraSpace);
    };
    var handleClickOne = function(){
        drawImage('one');
    };
    var handleClickTwo = function(){
        drawImage('two');
    };
    var drawImage = function(section){
        if (turn == 1){
            if (coolDown == 'False'){
                drawCircle(section);
                turn = 2;
                document.title = "Second Player";
                coolDown = 'True';
            };
        };
        if (turn == 2){
            if (coolDown == 'False'){
                drawCross(section);
                turn = 1;
                document.title = "First Player";
                coolDown = 'True';
            };
        };
        coolDown = 'False';
    };
    var drawCircle = function(section){
        alert('circle')
        var circle = document.createElement("img");
        circle.innerHTML = "src='Circle.png'"
        $("#one").append(circle);
    };
    var drawCross = function(section){
        alert('cross')
    };
    makeScreen();
    var one = document.getElementById('one');
    one.addEventListener('click', handleClickOne);
    var two = document.getElementById('two');
    two.addEventListener('click', handleClickTwo);

};

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="normalize.css">
        <link rel="stylesheet" href="main.css">
        <script src="jquery.js"></script>
        <script src="main.js"></script>
        <title>JavaScript Interaction Test.</title>
    </head>
    <body>
        <table id="screen">
            <tr>
                <td id="one"></td>
                <td id="two"></td>
                <td id="three"></td>
            </tr>
            <tr>
                <td id="four"></td>
                <td id="five"></td>
                <td id="six"></td>
            </tr>
            <tr>
                <td id="seven"></td>
                <td id="eight"></td>
                <td id="nine"></td>
            </tr>
        </table>

    </body>
</html>

CSS

body{
    background-color: rgb(50, 50, 50)
}

td{
    width: 0;
    height: 0;
    background-color: rgb(200, 200, 200);
    border-style: solid;
    border-width: 3px;
    border-color: black;
}
#screen{
    position: absolute;
    left:0cm;
    top:0cm;
}

在回复或投票之前，请考虑到我仍然是JavaScript的某些方面的部分菜鸟，请考虑到我不知道你做的所有事情，即使是基本的事情，所以不要向我投票，因为这是一个简单的问题

此外，我已经浏览了互联网和stackoverflow，并发现没有更多的东西可以帮助我解决我现在的情况。

感谢您的时间。

Answer 1

   var circle = document.createElement("img");
        circle.innerHTML = "src='Circle.png'"

应该是：

   var circle = document.createElement("img");
        circle.src = 'Circle.png';

圆圈是一个图像，所以它没有任何名为innerHTML的属性。然而，它使用'src'属性。

使用javascript附加图像时无法渲染图像

1 个答案: