附加 javascript 时图像不渲染

Question

我正在尝试将在 JavaScript 中创建的 <img> 元素附加到 <td> 中。发生的情况是图像应该稍微扩展的区域，但图像没有出现。控制台没有给我任何错误，我真的很困惑。这是我的所有代码（因为我不知道是什么导致了问题）。我还在本地使用标准化 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 的某些方面仍然是个菜鸟，请考虑到我不知道你所做的一切，甚至连最基本的事情都不知道，所以不要给我投反对票因为这是一个简单的问题。

此外，我浏览了互联网和 Whosebug，没有发现任何与我现在所处情况相关的遮阳篷。

感谢您的宝贵时间。

Answer 1

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

应该是：

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

圆圈是一张图片，因此它没有任何属性称为 innerHTML。但是，它使用 'src' 属性。

附加 javascript 时图像不渲染

Image not rendering when appending it with javascript

html

javascript

css

jquery

image