在html中使用js創建動態矩形集合

-1

你好我所有的我都是html和js的初學者，我正在嘗試創建一個包含矩形集合的網頁，其中當創建一個新的矩形時，將放置在前一個矩形的旁邊。我創建了一個div元素，並嘗試添加新創建的div（矩形形狀，背景色根據條件而異），但我無法獲得所需的結果。在html中使用js創建動態矩形集合

<html> 
    <head> 
     <title>parkIn</title> 
     <meta charset="utf-8" /> 
    </head> 
    <style> 
    .ParkSlots { 
     border: solid 1px; 
     width: 60%; 
     height: 400px; 
     top: 50%; 
     left: 50%; 
     position: fixed; 
     transform: translate(-50%, -50%); 
     display: inline; 
    } 

    .row:before, 
    .row:after { 
     content: ""; 
     display: table; 
     clear: both; 
    } 

    .col-1 { 
     width: 15%; 
     margin-left: 10px; 
     height: 350px; 
     padding: 2px; 
    } 
    </style> 

    <body onload="viewCreate()"> 
     <div class="ParkSlots"> 
      <div class="row" id="content"> 
      </div> 
     </div> 
    </body> 
    <script language="javascript"> 
    function viewCreate() { 
     for (int i = 0; i < 5; i++) { 
      if (i % 2 == 0) { 
       createGreenBox(); 
      } else { 
       createRedBox(); 
      } 
     } 
    } 

    function createRedBox() { 
     var = document.createElement('div'); 
     div.className = 'col-1'; 
     div.style.backgroundColor = 'red'; 
     document.getElementById('content').appendChild(div); 
    } 

    function createGreenBox() { 
     var = document.createElement('div'); 
     div.className = 'col-1'; 
     div.style.backgroundColor = 'lightgreen'; 
     document.getElementById('content').appendChild(div); 
    } 
    </script> 
</html>

我想要的輸出，看起來是這樣的：

example

來源

2016-07-29 user6654733

您能告訴我們您目前看到的內容，包括任何控制檯錯誤嗎？ – Will

首先嚐試用'for（var i = 0; i <5; i ++）替換'for（int i = 0; i <5; i ++）'''int'不以那種方式在js中使用。同時給你的變量div創建名稱'div'。 – Shilly

感謝您的快速回復..它幫助我很多傢伙.. – user6654733

就在你的代碼一眼，我看到至少有兩個錯別字：

for (int i = 0; i < 5; i++) { - 在JS ，int不以這種方式使用。使用var i = 0...
var = document.createElement('div'); - 您在這兩行創建框函數中缺少此行的變量名稱。我假設，從你需要的其餘代碼var div = document.createElement('div');

其餘的將是CSS。在您的樣式表中，您將邊框應用於包含div的最外層，從您的示例中，您需要將其應用於.col-1類。您還需要在該類上使用display:inline-block，並設置寬度和邊距以與邊框尺寸很好地配合。我冒昧地爲您推薦我的建議變更jsfiddle。

來源

2016-07-29 15:33:21 Will

我還有一個問題，你能幫我，我怎麼有onClick =「功能名稱」每個矩形。 – user6654733

在創建div時，將一個調用添加到'div.addEventListener（'click'，functionName）'。 – Will

在html中使用js創建動態矩形集合

回答

相關問題