无法显示形状

I am currently creating a project in Javascript that is intended to be a sort of a "reaction game". After pressing a "begin" button, a shape will pop up on screen per the color, size, location (margins), and shape (either a box or a circle) decided by some helper methods. Goal is to click the shape asap and the page will then print the time taken. A new shape will then display and the cycle repeats.

我目前正在用Javascript创建一个项目，旨在成为一种“反应游戏”。按下“开始”按钮后，屏幕上会根据某些辅助方法确定的颜色，大小，位置（边距）和形状（方框或圆形）弹出一个形状。目标是尽快点击形状，然后页面将打印所用的时间。然后将显示新形状并重复循环。

However, once i press the "begin" button, nothing appears on screen. The shape is nowhere to be seen.

但是，一旦按下“开始”按钮，屏幕上就不会显示任何内容。形状无处可见。

Can anyone please help make the shape appear? I think it has something to do with the style sheet or something, but i'm not too sure.

任何人都可以帮助使形状出现？我认为这与样式表或其他东西有关，但我不太确定。

<html>

<head>

    <title>Reaction Tester</title>

</head>

<body>

    <h1>Test Your Reactions!</h1>

    <p>Click on the boxes and circles as quickly as you can!</p>

    <h2 id="recorded-time"></h2>

    <button id="start-button">Begin!</button>

    <div id="current-shape"></div>

    <script type="text/javascript">

        var beginTime = 0.0; //default value

        document.getElementById("start-button").onclick = function() {
            document.getElementById("start-button").style.display = "none";
            newShape();     
        }

        function decideShape() { //chooses between a circle or box(square)
            var x = Math.random();
            if(x < 0.5) {
                return("circle");
            } else {
                return("box");
            }
        }

        function decideColor() { //chooses between a list of 8 colors
            var x = Math.random();
            if(x < 0.125) {
                return("red");
            } else if(x < 0.25) {
                return("blue");
            } else if(x < 0.375) {
                return("yellow");
            } else if(x < 0.5) {
                return("green");
            } else if(x < 0.625) {
                return("purple");
            } else if(x < 0.75) {
                return("black");
            } else if(x < 0.875) {
                return("gray");
            } else {
                return("#00FFFF"); //cyan
            }
        }

        function decideSize() { //self explanatory
            var value; //circle - radius, box - half of side length

            value = Math.floor(Math.random() * 75) + 25; //diameter/side length set to be between 50 and 199

            return value;
        }

        function decideMargin(size) { //depends on size of shape
            var value;
            value = Math.floor(Math.random()*(400 - size)) + size;
            return value;
        }

        document.getElementById("current-shape").onclick = function() {
            newShape();
        }

        function beginTimer() {
            var bT = new Date();
            beginTime = bT;
        }

        function stopTimer() {
            var endTime = new Date();
            var elapsedTime = endTime - beginTime;
            document.getElementById("recorded-time").innerHTML = "Your time: " + (elapsedTime/1000.0) + " seconds";
        }

        function newShape() {
            if(beginTime != 0.0) {
                stopTimer();
            }

            var nextShape = decideShape();
            var nextColor = decideColor();
            var nextSize = decideSize();
            var nextLeftMargin = decideMargin(nextSize);
            var nextTopMargin = decideMargin(nextSize);

            document.getElementById("current-shape").style.backgroundColor = nextColor;
            document.getElementById("current-shape").style.marginLeft = nextLeftMargin;
            document.getElementById("current-shape").style.marginTop = nextTopMargin;

            if(nextShape = "circle") {
                document.getElementById("current-shape").style.borderRadius = 50;
            } else { //nextShape = "box"
                document.getElementById("current-shape").style.borderRadius = 0;
            }

            beginTimer();

        }

    </script>

</body>

</html>

1 个解决方案

#1

You need to add width and height to the "current-shape" div.

您需要为“current-shape”div添加宽度和高度。

 <div id="current-shape" style="width:100px;height:100px"></div>

You also need to add quotes to nextShape and nextColor in function newShape :

您还需要在函数newShape中为nextShape和nextColor添加引号：

  var nextShape = "circle";
  var nextColor = "red";

#1