Fatal编程技术网
  • javascript/
  • Javascript 动态div未在express js中显示

Javascript 动态div未在express js中显示

javascript html node.js mongodb express

Javascript 动态div未在express js中显示,javascript,html,node.js,mongodb,express,Javascript,Html,Node.js,Mongodb,Express,大家好 请告诉我，我仍然在学习node和expressjs 我使用javascript（在我的公用文件夹中）在html中创建了动态div，效果很好。当我想从mongodb检索数据时，我试图通过将javascript放在route文件夹中来更改javascript的位置，使其更易于访问。 我渲染它，动态div不再显示。 我猜这和位置有关，但我不知道从哪里开始。 有人能帮我解释一下这个逻辑吗 问题出在javascript函数multidivs（）上；这在快车外很好用 多谢各位 我这样将multidi

大家好

请告诉我，我仍然在学习node和expressjs

我使用javascript（在我的公用文件夹中）在html中创建了动态div，效果很好。当我想从mongodb检索数据时，我试图通过将javascript放在route文件夹中来更改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>


***multidivs（）；***
出于某种原因，它与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>

HTML
提供头衔
标志
multidivs（）；
前100名
新闻
集锦
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;
}

*
{
边际：0px；
}
#管理员
{
边缘顶部：100px；
字体系列：“新罗马时代”；
字体大小：14px；
字体大小：粗体；
左边距：400px；
线高：30px；
}
#登录
{
边缘顶部：100px；
字体系列：“新罗马时代”；
字体大小：14px；
字体大小：粗体；
左边距：400px；
线高：20px；
}
身体
{
背景色：白色；
字体系列：“简介内联”；
}
/*主容器的包装器*/
#包装纸
{
保证金：自动；
}
/*此容器下的所有div都将在方面中维护*/
#容器
{
位置：绝对位置；
保证金：0px自动；
}
/*导航div和*/
.wrapper 1
{
宽度：780px；
高度：55px；
左边距：15vh；
边缘顶部：30px；
文本对齐：左对齐；
显示：内联块；
边框宽度：4px；
边框样式：实心；
边框颜色：橙色；
位置：静态；
}
/*图表新闻音乐组*/
.1分部
{
宽度：380px；
高度：50px；
字体大小：25px；
字体重量：较轻；
颜色：白色；
浮动：左；
填充：0px 10px 0px 10px；
文本对齐：左对齐；
边框宽度：4px；
边框样式：实心；
边框颜色：红色；
}
/*facebook twitter instagram和搜索的div*/
.searchdiv
{
宽度：140px；
高度：50px；
浮动：左；
空白：nowrap；
显示：内联块；
边框样式：实心；
边框颜色：黄色；
边框宽度：4px；
}
梅努迪夫先生
{   
浮动：对；
右边填充：50px；
左边距：30px；
}
.searchboxdiv
{
宽度：120px；
高度：40px；
空白：nowrap；
字体大小：0px；
显示：内联块；
对齐项目：居中；
浮动：左；
填充：0px 30px 0px 0px；
边框宽度：4px；
边框样式：实心；
边框颜色：黄褐色；
}
.搜索图标
{
宽度：20px；
保证金：0自动；
填充：0px；
}
/*菜单的div*/
.divmenu
{
宽度：50px；
高度：50px；
浮动：左；
左边距：0vh；
边框宽度：4px；
边框样式：实心；
边框颜色：绿色；
}
/*航行*/
导航
{
位置：固定；
宽度：100%；
高度：120px；
背景色：黑色；
文本对齐：右对齐；
垂直对齐：中间对齐；
颜色：白色；
z指数：99；
}
导航a
{
颜色：白色；
字号：18px；
文字装饰：无；
左边距：30px；
线高：150px；
}
/*商标处*/
.logodiv
{
浮动：左；
颜色：白色；
宽度：80px；
边缘顶部：5vh；
边缘底部：2vh；
字体大小：粗体；
字体大小：50px；
z指数：10；
位置：固定；/*新增*/
左：30vh；/*新增*/
垂直对齐：中间对齐；
}
/*导航上图标的css*/
.图标
{
宽度：20px；
高度：20px；
}
/*身体的css*/
#bodydiv
{
保证金：0自动；
填充：0px；
}
#左撇子
{
边际上限：30vh；
左边距：30vh；
宽度：60vh；
高度：75vh；
浮动：左；
}
#右舵
{
边际上限：30vh；
浮动：对；
左边距：130vh；
位置：固定；
宽度：40vh；
高度：75vh；
}
托普迪夫先生
{
宽度：35vh；
高度：35vh；
文本对齐：居中；
垂直对齐：中间对齐；
背景颜色：灰色；
浮动：对；
最小宽度：25%；
}
.bottomdiv
{
线高：100px；
文本对齐：居中；
宽度：35vh；
高度：30vh；
边缘顶部：5vh；
背景色：黑色；
浮动：对；
最小宽度：25%；
}
/*除法乘法*/
.innerdiv
{
对齐内容：居中对齐；
自对准：居中；
宽度：80vh；
高度：20vh；
背景颜色：灰色；
边框宽度：1px；
边框样式：实心；
边框颜色：黑色；
}
.innertop
{
z指数：99；
位置：固定；
宽度：34.5vh；
高度：5vh；
背景色：黑色；
颜色：白色；
字体拉伸：额外扩展；
字体大小：25px；
线高：30px；
边框宽度：1px；
边框样式：实心；
边框颜色：黑色；
}
.内底
{
z指数：99；
位置：固定；
宽度：35vh；
高度：5vh；
背景颜色：灰色；
颜色：白色；
字体拉伸：额外扩展；
字号：28px；
线高：30px；
}
/*为音乐内容工作的div*/
.contentdiv
{
宽度：20vh；
高度：15vh；
边际上限：2vh；
显示：内联块；
浮动：左；
左边距：1vh；
}
阿罗迪夫先生
{
宽度：8vh；
高度：19.8vh；
保证金：0vh；
线高：2vh；
背景色：#131212；
显示：内联块；
浮动：左；
}
.内容
{
宽度：20vh；
高度：15vh；
线高：2vh；
边际上限：2vh；
左边距：1vh；
显示：内联块；
浮动：左；
}
.rcontentdiv
{
宽度：20vh；
高度：15vh；
线高：2vh；
边际上限：2vh；
左边距：1vh；
背景颜色：米色；
文本对齐：居中；
浮动：对；
显示：内联块；
浮动：左；
}
.哈弗迪夫
{
宽度：3vh；
高度：5vh；
背景颜色：米色；
边框宽度：2倍；
边框样式：实心；
边框颜色：红色；
浮动：左；
}
伊姆格迪夫先生
{
边缘顶部：50px；
左边距：10px；
宽度：20px；
高度：20px；
}
.leftsub
{
宽度：60px；
高度：10px；
浮动：左；
边框宽度：2倍；
边框样式：实心；
边框颜色：绿色；
}
#弹出窗口
{
}
.弹出窗口
{
宽度：135px；
高度：40px；
浮动：对；
文本对齐：居中；
显示：内联块；
垂直对齐：中间对齐；
右边距：50px；
线高：50%；
}
.col1
{
宽度：35px；
高度：40px；
文本对齐：居中；
显示：内联块；
背景色：黑色；
颜色：白色；
右边框：1px纯白；
}
.col2
{
宽度：35px；
高度：40px；
文本对齐：居中；
显示：内联块；
背景-

/*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);
});   }


}