制作一个按钮来创建框

Question

每当用户单击按钮时，我都必须在div内创建框（这里的div是box ）。 到目前为止，我已完成以下操作，但未创建任何框。

代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
      .myDiv {
        height: 50px;
        width: 50px;
        border-color: blue;
          }
      #box {
        width: 700px;
        height: 700px;
        border: solid black;
      }
    </style>
    </head>
    <body>
        <h1>The onclick Event</h1>
        <button id ="theBoxes" >Creating boxes</button>
        <div id = "box"></div>
        <script>
        var x = document.getElementById("theBoxes");
        x.addEventListener("click", myFunction)
          function myFunction() {
            var box = document.createElement('div');
            box.classList.add('myDiv');
            document.body.appendChild(box); 
          }
          </script>
    </body>
</html>

Answer 1

 var x = document.getElementById("theBoxes"); x.addEventListener("click", myFunction) function myFunction() { var box = document.createElement('div'); box.classList.add('myDiv'); document.body.appendChild(box); }

 .myDiv { height: 50px; width: 50px; border: 1px solid blue; } #box { width: 700px; height: 700px; border: solid black; position: absolute; }

 <!DOCTYPE html> <html> <head> </head> <body> <h1>The onclick Event</h1> <button id ="theBoxes" >Creating boxes</button> <div id = "box"></div> </body> </html>

您的代码正在运行，不幸的是， myDiv中的border-color: blue不起作用，并且该框也添加到了 div #box之外。

因此，我通过在#box添加position: absolute和在.myDiv添加border: 1px solid blue来修改您的代码。

制作一个按钮来创建框

问题描述

1 个解决方案

解决方案1
0 2018-10-14 02:04:56

制作一个按钮来创建框

问题描述

1 个解决方案

解决方案1 0 2018-10-14 02:04:56

解决方案1
0 2018-10-14 02:04:56