动态div不显示在快递j

时间：2017-12-14 15:16:36

标签： javascript html node.js mongodb express

Goodday all，

请我仍然得到一个节点并表达js。

我使用javascript（在我的公共文件夹中）在html中创建了动态div，它工作正常。当我想从mongodb检索数据时，我尝试更改javascript的位置以使其更易于访问，方法是将其置于路径文件夹中。 我渲染它，动态div不再显示了。 我猜这与位置有关，但我不知道从哪里开始。 请有人帮我解决这个逻辑

问题出在哪里，是用javascript函数multidivs（）;在外面表达很好。

谢谢

我将multidivs（）放在

下面 
<form action="/routes/top100" method="POST" >
<div  id="bodydiv"> 
<div id="leftdiv" > 
<script type="text/javascript"> ***multidivs();*** </script>
</div> 
</div>

</form>

出于某种原因，它适用于netbeans IDE 以下是代码

HTML
<html>
<head>
<title>TODO supply a title</title>
<link href="/css/index.css" rel="Stylesheet"/>
<script  src="bower_components/jquery/dist/jquery.js"> </script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="/routes/top100.js" type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body >
<div id="wrapper">
<div id="container">
<nav>
<div class="logodiv">logo </div>

<a href=""> charts </a>
<a href=""> news </a>
<a href=""> music </a>

<a  href=""><img  height="20" src='/images/fblogo.png' alt="" class=''  
 width="20"/></a>
<a href=""><img  height="20" src='/images/Instagram.png'  
alt="" class='' width="20"/></a>                         
<a  href=""><img  height="20" src='/images/twitter.png'  
alt="" class='' width="20"/></a>

<a  href=""><img src='/images/search.png'  alt="" 
class='searchicon'/></a><!--
-->
<div class="menudiv"> <a href=""> <img 
src='/images/menu.png' alt="" class='icons'/> </a>
                         </div> 
</nav>
<form action="/routes/top100" method="POST" >
<div  id="bodydiv"> <div id="leftdiv" > <script 
type="text/javascript" >multidivs();</script></div> 
<!--<script type="text/javascript" > multidivs();
</script>-->
<div id="rightdiv">

<div class="topdiv"><div class="innertop"> Top100 
news</div> </div> 
<div class="bottomdiv"><div class="innerbottom"> 
Highlights</div> </div>

</div></div>
</form>
</div>
</div> 
</body>
</html>

css 

*
{
margin: 0px;
}
#admin
{
  margin-top: 100px;
  font-family:"Times New Roman";
  font-size: 14px;
  font-weight: bold;
  margin-left: 400px;
  line-height: 30px;
}

#login
{
  margin-top: 100px;
  font-family:"Times New Roman";
  font-size: 14px;
  font-weight: bold;
  margin-left: 400px;
  line-height: 20px;
 }
body
{
  background-color:  white;  
  font-family: "Intro-Inline";

}


/*wrapper for the main container*/
#wrapper
{
    margin: auto;
}
/*all divs under this container to be maintained in aspect*/
#container
{
 position:absolute;
 margin:0px auto;
}

/*wrapper for navigation divs and <a>*/    
.wrapper1
{
 width:780px;
 height:55px;
 margin-left: 15vh;
 margin-top:30px;
 text-align:  left;
 display: inline-block;
 border-width: 4px;
 border-style: solid;
 border-color: orange;
 position: static;
 }
 /*div for charts news music*/
.div1
{
  width:380px;
  height:50px;
  font-size: 25px;
  font-weight:  lighter;
  color: white;
  float:left;
  padding:0px 10px 0px 10px;
  text-align:  left;
  border-width: 4px;
  border-style: solid;
  border-color: red;
}
/*div for facebook twitter instagram and search*/
.searchdiv
{
 width:140px;
 height:50px;
 float:left; 
 white-space:  nowrap;
 display:inline-block;
 border-style: solid;
 border-color:yellow;
 border-width:4px;
}
.menudiv
{   
 float:right;
 padding-right: 50px;
 margin-left: 30px;
}

.searchboxdiv
{
 width:120px;
 height:40px;
 white-space:nowrap;
 font-size:0px;
 display:inline-block;
 align-items:  center;
 float:left ;
 padding:0px 30px 0px 0px;
 border-width: 4px;
 border-style: solid;
 border-color: chartreuse;
}
.searchicon
{
 width:20px;
 margin:0 auto;
 padding:0px;

}
/*div for menu*/
.divmenu
{
 width:50px;
 height:50px;
 float:left;
 margin-left: 0vh;
 border-width: 4px;
 border-style: solid;
 border-color: green;
}
/*navigation*/
nav
{
 position:fixed;
 width:100%;
 height:120px;
 background-color: black;
 text-align: right;
 vertical-align:  middle;
 color:white;
 z-index: 99;
}
nav a
{
 color: white;
 font-size: 18px;
 text-decoration: none;
 margin-left: 30px;
 line-height: 150px;
}
/*div for logo*/
.logodiv
{
 float:left;
 color:white;
 width: 80px;
 margin-top:5vh;
 margin-bottom:2vh;
 font-weight: bolder;
 font-size: 50px;
 z-index:10;
 position: fixed; /*newly added*/
 left: 30vh; /*newly added*/
 vertical-align: middle;
}

/*css for the icons on nav*/
.icons
{
 width:20px;
 height:20px;

}
/*css for the body*/
#bodydiv
{
 margin:0 auto;
 padding:0px;
}
#leftdiv
{
  margin-top:30vh;
  margin-left:30vh;
  width:60vh;
  height:75vh;
  float:left;
}

#rightdiv
{
 margin-top: 30vh;
 float:right;
 margin-left: 130vh;
 position: fixed;
 width:40vh;
 height:75vh;
}
.topdiv
{
 width:35vh;
 height:35vh;
 text-align:  center;
 vertical-align:  middle;
 background-color:  gray;
 float: right;
 min-width: 25%;
}
.bottomdiv
{
 line-height:  100px;
 text-align:  center;
 width:35vh;
 height:30vh;
 margin-top:5vh;
 background-color:  black;
 float: right;
 min-width: 25%;
}
/*div to multiply*/
.innerdiv
{
 align-content: center;
 align-self:  center;
 width:80vh;
 height:20vh;
 background-color: gray;
 border-width: 1px;
 border-style: solid;
 border-color: black;
}
.innertop
{
 z-index: 99;
 position:  fixed;
 width:34.5vh;
 height:5vh;
 background-color: black;
 color: white;
 font-stretch:  extra-expanded;
 font-size:25px;
 line-height: 30px;
 border-width: 1px;
 border-style: solid;
 border-color: black;

}
.innerbottom
{
 z-index: 99;
 position:  fixed;
 width:35vh;
 height:5vh;
 background-color:gray;
 color: white;
 font-stretch:  extra-expanded;
 font-size:28px;
 line-height: 30px;
}
/*div working for contents of music*/
.contentdiv
{
 width:20vh;
 height:15vh;
 margin-top:2vh;
 display:inline-block;
 float:left;
 margin-left:1vh;
}
.arrowdiv
{
 width:8vh;
 height:19.8vh;
 margin:0vh;
 line-height:  2vh;
 background-color:#131212;
 display:inline-block;
 float:left;
}
.ccontentdiv
{
 width:20vh;
 height:15vh;
 line-height: 2vh;
 margin-top:2vh;
 margin-left: 1vh;

 display:inline-block;
 float:left;
}
.rcontentdiv
{
 width:20vh;
 height:15vh;
 line-height: 2vh;
 margin-top:2vh;
 margin-left: 1vh;
 background-color:  beige;
 text-align:  center;
 float:right;
 display:inline-block;
 float:left;
}
.hoverdiv
{
 width:3vh;
 height:5vh;
 background-color:  beige;
 border-width: 2px;
 border-style: solid;
 border-color: red;
 float:left;
}
.imgdiv
{
 margin-top: 50px;
 margin-left: 10px;
 width:20px;
 height:20px;
}
.leftsub
{
 width:60px;
 height:10px;
 float: left;
 border-width: 2px;
 border-style: solid;
 border-color: green;
}
#popup
{

}
.popup
{
 width:135px;
 height:40px;
 float: right;
 text-align:  center;
 display: inline-block;
 vertical-align: middle;
 margin-right: 50px;
 line-height:  50%;
}
.col1
{
 width:35px;
 height:40px;
 text-align:  center;
 display: inline-block;
 background-color: black;
 color:white;
 border-right:1px solid white;
}

.col2
{
 width:35px;
 height:40px;
 text-align:  center;
 display: inline-block;
 background-color: black;
 color:white;
}
.col3
{
 width:35px;
 height:40px;
 text-align:  center;
 display: inline-block;
 background-color: black;
 color:white;
 border-left: 1px solid white;
}

.img
{
 max-width:180px;
}

javascript代码

/*define function for multidivs*/

var popup = document.createElement('div'); //div
popup.className ="popup";
var innercol =["col1","col2","col3","col4"];
for (j=0;j<3;j++){
var colone = document.createElement('div'); //div
var imgcol = document.getElementById("col4");
var colimg=document.createElement('img');
colimg.className= "col4";
colimg.src="images/blackarrow.png";
colone.className=innercol[j];
popup.appendChild(colone);
}
popup.appendChild(colimg);
function multidivs(){
var columnnames=
["arrowdiv","contentdiv","ccontentdiv","rcontentdiv"];//styles for innerdiv
var columnids=["arrow", "content", "ccontent", "rcontent"];
for(x=0; x<100;x++) {
var row= document.createElement('div');
row.className = "innerdiv";
for(i=0; i<4; i++){
var columndiv = document.createElement('div'); //div
columndiv.className =columnnames[i];
columndiv.id=columnids[i];
//attach arrow image
if(columndiv.className=== columnnames[0]){
attachImage(columndiv);

}

row.appendChild(columndiv);
}
document.getElementById('leftdiv').appendChild(row);
}  
}
//attach arrow image onload and thn on mouseover and mouseout
function attachImage(columndiv){
var img =document.createElement('img');
img.className= "imgdiv";
img.src="images/orangearrow.png";
columndiv.appendChild(img);

domouseover(); /*this will change the arrow directions and also add popup*/
domouseout();/*take out popup*/
//onmouseover changes the arrow
function domouseover(){
columndiv.addEventListener("mouseover", function(){
img.src="images/whitearrow.png";
columndiv.appendChild(img);

columndiv.appendChild(popup);
}); }

function domouseout(){
columndiv.addEventListener("mouseout", function(){
img.src="images/orangearrow.png";
columndiv.removeChild(popup);
});   }


}

0 个答案:

没有答案
相关问题
最新问题