Question

我正在尝试将网页划分为两列，并使用onclick显示文本。我的HTML是：

 <!DOCTYPE html>
 <html>
    <head>
      <title>My first styled page</title>
      <link rel="stylesheet" href="mystyle.css">

     </head>

     <body>
      <div id="container">
      <div id="header">
      <h1>Main Title of Web Page</h1>
          Here I am trying to split the webpage into two columns and display text.
      </div>
          <div id="one">
      </div>
          <div id="two">
       <b>This is test one<br>
       <b>This is test two<br>
           </b>
      </div>
     </div>

     <script src="script.js"></script> 
   </body>

    </html>

我的script.js文件是：

 var wrapping_div = document.createElement('div');
    document.body.appendChild(wrapping_div);

    function shuffleArray() {
        var i, j, temp, span, div,
            c = wrapping_div.childNodes, 
            l = c.length,
         array = ['abc','xyz','mno'], 
        k = array.length;
    for (i=k-1; i>=0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }

    for (i=l-1; i>=0; i-- ) {
            c[i].firstChild.removeEventListener('click', shuffleArray);
            wrapping_div.removeChild(c[i]);
        }

    for (i=0; i<k; i++) {
            span = document.createElement('span');
            span.innerHTML = array[i];
            span.addEventListener('click', shuffleArray);
            div = document.createElement('div');
            div.appendChild(span);
            wrapping_div.appendChild(div);
        }
    }

    shuffleArray();

我的css文件是：

     #container {
     width:100%;
     height:200px;
     }

  #header {
    margin-bottom:0;
    background-color:red;
   }

 #one {
    width:40%;
    height:200px;
    float:left;
    background-color:yellow;
   }

#two {
   width:60%;
   height:200px;
   float:left;
   background-color:cyan;
   }

 #one > span {
   display:block;
   }

现在，我的问题是我无法在页面右侧显示数组元素，这意味着我想在div id one中显示它。另外，我想在每个onclick事件中新的数组元素应该替换以前的数组元素。如何在div id one？

中显示数组元素

目前，我的数组元素显示在div ID one下方，意味着低于yellow颜色。我希望它以yellow颜色显示。我的元素在每个onclick上都会更新，但我无法在div ID one上显示数组元素。

以下是jsfiddle：http://jsfiddle.net/rani89/X8YEG/

的链接

Answer 1

好的，这是你的幸运日，我又找到了你！见DEMO HERE

您正在使用错误的包装div，这是您的问题。

//var wrapping_div = document.createElement('div'); Remove this
var wrapping_div = document.getElementById('one'); Add this
//document.body.appendChild(wrapping_div); Remove this

当您使用正确的包装div时，您不需要创建额外的div

//div = document.createElement('div'); Remove this
        div.appendChild(span);
        //wrapping_div.appendChild(div); Remove this

文本未显示在onclick上的所需位置

1 个答案: