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

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

javascript html css arrays

Javascript 文本未显示在onclick上的所需位置,javascript,html,css,arrays,Javascript,Html,Css,Arrays,我试图将网页分成两列，并使用onclick显示文本。我的html是： <!DOCTYPE html> <html> <head> <title>My first styled page</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> <div

我试图将网页分成两列，并使用

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>

我的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

one

中显示它。另外，我希望在每个

onclick

事件中，新的数组元素应该替换以前的数组元素。如何显示

div

one

中的数组元素

当前，我的数组元素显示在

div

one

的下方，表示在

黄色的下方。我希望它以黄色
颜色显示。我的元素在每次单击onclick
时都会得到更新，但我无法在one
的div
id上显示数组元素
下面是链接到jsfiddle
：好的，今天是你的幸运日，我又找到你了！
看
您使用了错误的包装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

一个jsfiddle将是nice@TejasPatelfiddle addedJust注意到了同样的错误。@user2567857我上面的回答解决了你的问题吗？不，它向我显示了未捕获的类型错误：无法读取null的属性“removeEventListener”
。此错误未显示在fiddle
中，但我在服务器中收到该错误。它显示了c[i]行的js
文件中的错误。firstChild.removeEventListener（'click'，shufflearlay）
@user2567857真奇怪，你是尝试了上面的新演示还是上一个演示？因为它在我这方面工作得很完美吗？是的，在fiddle中它工作得很好，但在本地服务器中，我不得不删除removeEventListener行，只有这样它才能工作。将查看删除该行是否会在进一步开发中产生任何错误。
//div = document.createElement('div'); Remove this
        div.appendChild(span);
        //wrapping_div.appendChild(div); Remove this