JSFiddle没有执行我的代码

时间:2016-12-06 01:54:28

标签: javascript html css jsfiddle

我是一名学生并且正在学习编码。我从互联网上下载了这个简单的HTML Javascript代码。它通过按4箭头键在屏幕上移动图像。这在浏览器上工作正常,但在JSFiddle上不起作用。我是初学者。这个问题已在论坛上提出。我查看了答案,但没有解决我的问题。

我从论坛得到的答案是:

  • 做一个Javascript“没有包裹头” - 对我不起作用
  • 更改“功能”语法 - 对我不起作用

任何帮助表示感谢和赞赏:

的jsfiddle: https://jsfiddle.net/ThatBoyCoder/s85wtqL3/

< ------ Code ------->

<html>
    <head>
            <title>Test Move Object</title>
        <script type="text/javascript">

                function leftArrowPressed() {
                var element = document.getElementById("image1");
                element.style.left = parseInt(element.style.left) - 25 + 'px';
                }

                function rightArrowPressed() {
                var element = document.getElementById("image1");
                element.style.left = parseInt(element.style.left) + 25 + 'px';
                }

                function upArrowPressed() {
                var element = document.getElementById("image1");
                element.style.top = parseInt(element.style.top) - 25 + 'px';
                }

                function downArrowPressed() {
                var element = document.getElementById("image1");
                element.style.top = parseInt(element.style.top) + 25 + 'px';
                }

                function moveSelection(evt) {
                    switch (evt.keyCode) {

                case 37:
                            leftArrowPressed();
                            break;

                case 39:
                            rightArrowPressed();
                            break;

                case 38:
                            upArrowPressed();
                            break;

                case 40:
                            downArrowPressed();
                            break;
                        }
                    };

            function domReady()
                {
                        window.addEventListener('keydown', moveSelection);
                }

    </script>
    </head>

    <body onload="domReady()" onkeydown="" onkeyup="" bgcolor='yellow'>
        Test
    <img id="image1" src="http://placekitten.com/69/69" style="position:absolute;left:0; top:0;" height="50" width="50">
    </body>
        end html
        </html>

0 个答案:

没有答案