为什么这个while循环只触发一次？

时间：2018-12-17 17:58:36

标签： javascript html

我是Java语言的新手，经过四处搜寻之后，我不知道为什么函数中的while循环只会触发一次。这是功能代码：

window.onscroll = function makeOpaque() {
	var navBar = document.getElementById('navBar');
	var footBar = document.getElementById('footBar');
	var scrollY = window.pageYOffset | document.body.scrollTop; //The scrollTop is for older browsers
	if (scrollY > 1) {
		navBar.classList.add('opaqueMe');
		footBar.classList.add('opaqueMe');
	} else {
		navBar.classList.remove('opaqueMe');
		footBar.classList.remove('opaqueMe');
	}
}


var ms0 = {img: "img/bsma.jpg", name: "Started Training", date: "11/12/2017", text: "I started training and managed maybe two rolls before completely gassing out. BJJ is hard." };
var ms1 = {img: "img/stripe1WB.jpg", name: "First Stripe on White Belt", date: "20/07/2018", text: "Got my first stripe on my white belt after about 7 months training, feels really great!"};
var ms2 = {img: "img/surreyOpenWinter1.jpg", name: "First Competition: Surrey Open Summer 2018", date: "05/08/2018", text: "Completed at Middle-Heavy, managed to squeeze into the division, lost but happy with my weight loss, if not my performance.", point1: "13-2 Loss in First Fight", point2: "Hit Train Tracks Sweep for 2 Points"};
var ms3 = {img: "img/stripe2WB.jpg", name: "Second Stripe on White Belt", date: "15/10/2018", text: "Got my second stripe tonight after some really fun rolls, wasn't expecting it at all, feels really great!"};
var ms4 = {img: "img/surreyOpenWinter2.jpg", name: "Second Competition: Surrey Open Winter 2018", text: "Competed at Middle-Weight, again just managed to make division, happy with my weightloss, but had to cut to make it - which wasn't fun. Lost worse that last time, but both my teammates, coach (and I) feel like my Jiu-Jitsu was a lot better.", point1: "15-0 Loss in First Fight.", point2: "Need to work takedowns, guard retentions and aggression, as well as side control escapes", point3: "https://www.youtube.com/watch?v=LaYGhf67Mbc", point4: "Injured my shoulder escaping Americana, but almost finished him with an Ankle Lock."}
var ms5 = {img: "img/surreyOpenWinter3.jpg", name: "One Year of Training", text: "Been training for one year! After my loss at competition, I'm feeling down but determined. Biggest achievment is my weight loss. I'm currently roughly 82kg, when I started I was pushing 97kg."};
var ms6 = {img: "img/samCookBradHill.jpg", name: "First Seminar", text: "First seminar at BSMA (Paraestra UK)...", point1: "Samantha Cook & Bradley Hill"};

var milestones = [ms1, ms2, ms3, ms4, ms5, ms6];
var milestonesTotal = milestones.length;

function buildMilestones() {
  	var top = document.getElementById('top'); //finds #top
	var div = document.createElement('div'); //Creates a div
	var img = document.createElement('img'); //Creates img
	var div2 = document.createElement('div'); //Creates 2nd div
	var title = document.createElement('h4'); //Creates h4
	var date = document.createElement('h6'); // creates h6
	var text = document.createElement('p'); //creates p
	var div3 = document.createElement('div'); //creates 3rd div
	var list = document.createElement('ul'); //creates ul
	var point1 = document.createElement('li'); //creates li
	var point2 = document.createElement('li'); //creates li
	var point3 = document.createElement('li'); //creates li
	var	msCounter = 0; //sets counter
	div.classList.add('card'); //adds class name card to div
	img.src = ('img/' + 'string' + '.jpg');//adds src
	div2.classList.add('card-body');//adds class
	title.classList.add('card-title'); //adds class
	date.classList.add('card-date');//add class
	text.classList.add('card-text'); //add class
	div3.classList.add('container-fluid');//add class

	while (msCounter < milestonesTotal) {
		top.appendChild(div);
		div.appendChild(img);
		div.appendChild(div2);
		div2.appendChild(title);
		div2.appendChild(date);
		div2.appendChild(text);
		div2.appendChild(div3);
		div3.appendChild(list);
		list.appendChild(point1);
		list.appendChild(point2);
		list.appendChild(point3);
		msCounter++;

	}

}
* {
	margin: 0;
	padding: 0;
}

:root {
	--green-Dark1: #134649;
	--green-Dark2: #1A5E63;
	--green-Mid1: #026976;
	--green-Mid2: #028090;
	--green-Light1: #028090;
	--green-Light2: #028090;
	--bg-1: #28282B;
	--bg-2: #3F4045;
	--bg-3: #D4CCCC;
	--bg-4: #EEE5E5;
	--bg-5: #F2F2F2;
	--bg-6: #FFFFFF;
}

body {
	background-color: var(--green-Dark1);
}

nav, footer {
	background-color: rgba(0,0,0,.1);
	border-color: rgba(0,0,0,.1);
	transition-duration: 1s;
}

nav {
	border-bottom: 1px solid;
}

footer {
	border-top: 1px solid;
}

.opaqueMe {
	background-color: var(--green-Dark1);
	border-color: var(--green-Dark2);
}

main {
	padding: 100px;
	padding-top: 144px;
}

.cover {
	width: 100vw;
	height: 100vh;
}

h1 {
	font-size: 124px;
}

video {
	position: absolute;
		left: 50%;
		top: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
}

.coverText {
	width: 100vw;
	height: 100vh;
	position: absolute;
		left: 0;
		top: 0;
	color: white;
}

.wrap {
	margin-top: 35%;
}

.card {
	width: 50%;
	margin: 100px auto;
	border-color: var(--green-Mid1);
}

.card-img-top {

}

.card-title {
	color: var(--green-Mid2);
}

.card-date {
	color: var(--green-Light2);
}

.card-text {
	color: var(--bg-2);
}

ul {
	list-style: none;
}
<!DOCTYPE html>
<html>
<head>
  <title>BJJ Milestones</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--Includes the bootstrap relevant information and JS/JQuery-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" />
  <link rel="stylesheet" href="css/main.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>
  <script src="js/js.js"></script>
</head> 
<body onload="buildMilestones();">
    <nav id="navBar" class="navbar navbar-expand-md fixed-top">
        <a class="navbar-brand text-white" href="index.html"><i class="fas fa-fist-raised"></i> BJJ Milestones</a>
    </nav>
        <div class="cover">
          <video autoplay muted loop id="coverVideo">
            <source src="vid/coverVideo.mp4" type="video/mp4">
          </video>
        </div>
        <div class="coverText text-center">
          <div class="wrap">
            <h1>BJJ MILESTONES</h1>
            <h3>“Absorb what is useful, discard what is not, add what is uniquely your own.”</h3>
            <h6>Bruce Lee</h6>
          </div>
        </div>
        <main id="top">
          <div class="card">
            <img class="card-img-top" src="img/surreyOpenWinter1.jpg" />
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <h6 class="card-date">00/00/0000</h6>
              <p class="card-text">This is a brief description of the milestone.</p>
                <div class="container-fluid">
                  <ul class="card-ul">
                    <li class="card-li">This is a list item.</li>
                    <li class="card-li">This is a list item.</li>
                    <li class="card-li">This is a list item.</li>
                  </ul>
                </div>
            </div>
          </div>
        </main>
    <footer id="footBar" class="navbar navbar-expand fixed-bottom justify-content-center">
        <ul class="navbar-nav">
            <!--Using FontAwesome to add icons-->
            <li class="nav-item"><a class="nav-link text-white" href="https://www.facebook/TipTutZone" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
            <li class="nav-item"><a class="nav-link text-white" href="https://www.twitter.com/TipTutZone" target="_blank"><i class="fab fa-twitter-square"></i></a></li>
            <li class="nav-item"><a class="nav-link text-white" href="https://www.youtube.com/Tiptut" target="_blank"><i class="fab fa-youtube"></i></a></li>
            <li class="nav-item"><a class="nav-link text-white" href="https://www.matthewfryer.online" target="_blank"><i class="fas fa-book"></i></a></li>
            <li class="nav-item"><a class="nav-link text-white" href="#top"><i class="fas fa-arrow-circle-up"></i></a></li>
        </ul>
    </footer>
</body>

我的html中有一个onload附加到我的身体上，当前此功能仅会使页面上显示一个额外的“卡片”，我希望有六个。很抱歉，如果这是一个明显的错误。谢谢。

1 个答案:

答案 0 :(得分：0)

您的while循环会触发6次，但您每次都会添加相同子级。

您需要在每个循环上实例化新的子代。这是您对代码的快速编辑，我在其中进入了循环实例化 （我还添加了一个日志以查看其循环了多少次） 

window.onscroll = function makeOpaque() {
	var navBar = document.getElementById('navBar');
	var footBar = document.getElementById('footBar');
	var scrollY = window.pageYOffset | document.body.scrollTop; //The scrollTop is for older browsers
	if (scrollY > 1) {
		navBar.classList.add('opaqueMe');
		footBar.classList.add('opaqueMe');
	} else {
		navBar.classList.remove('opaqueMe');
		footBar.classList.remove('opaqueMe');
	}
}


var ms0 = {img: "img/bsma.jpg", name: "Started Training", date: "11/12/2017", text: "I started training and managed maybe two rolls before completely gassing out. BJJ is hard." };
var ms1 = {img: "img/stripe1WB.jpg", name: "First Stripe on White Belt", date: "20/07/2018", text: "Got my first stripe on my white belt after about 7 months training, feels really great!"};
var ms2 = {img: "img/surreyOpenWinter1.jpg", name: "First Competition: Surrey Open Summer 2018", date: "05/08/2018", text: "Completed at Middle-Heavy, managed to squeeze into the division, lost but happy with my weight loss, if not my performance.", point1: "13-2 Loss in First Fight", point2: "Hit Train Tracks Sweep for 2 Points"};
var ms3 = {img: "img/stripe2WB.jpg", name: "Second Stripe on White Belt", date: "15/10/2018", text: "Got my second stripe tonight after some really fun rolls, wasn't expecting it at all, feels really great!"};
var ms4 = {img: "img/surreyOpenWinter2.jpg", name: "Second Competition: Surrey Open Winter 2018", text: "Competed at Middle-Weight, again just managed to make division, happy with my weightloss, but had to cut to make it - which wasn't fun. Lost worse that last time, but both my teammates, coach (and I) feel like my Jiu-Jitsu was a lot better.", point1: "15-0 Loss in First Fight.", point2: "Need to work takedowns, guard retentions and aggression, as well as side control escapes", point3: "https://www.youtube.com/watch?v=LaYGhf67Mbc", point4: "Injured my shoulder escaping Americana, but almost finished him with an Ankle Lock."}
var ms5 = {img: "img/surreyOpenWinter3.jpg", name: "One Year of Training", text: "Been training for one year! After my loss at competition, I'm feeling down but determined. Biggest achievment is my weight loss. I'm currently roughly 82kg, when I started I was pushing 97kg."};
var ms6 = {img: "img/samCookBradHill.jpg", name: "First Seminar", text: "First seminar at BSMA (Paraestra UK)...", point1: "Samantha Cook &amp; Bradley Hill"};

var milestones = [ms1, ms2, ms3, ms4, ms5, ms6];
var milestonesTotal = milestones.length;
	var	msCounter = 0; //sets counter
  
function buildMilestones() {
  

	while (msCounter < milestonesTotal) {
  	var top = document.getElementById('top'); //finds #top
	var div = document.createElement('div'); //Creates a div
	var img = document.createElement('img'); //Creates img
	var div2 = document.createElement('div'); //Creates 2nd div
	var title = document.createElement('h4'); //Creates h4
	var date = document.createElement('h6'); // creates h6
	var text = document.createElement('p'); //creates p
	var div3 = document.createElement('div'); //creates 3rd div
	var list = document.createElement('ul'); //creates ul
	var point1 = document.createElement('li'); //creates li
	var point2 = document.createElement('li'); //creates li
	var point3 = document.createElement('li'); //creates li

	div.classList.add('card'); //adds class name card to div
	img.src = ('img/' + 'string' + '.jpg');//adds src
	div2.classList.add('card-body');//adds class
	title.classList.add('card-title'); //adds class
	date.classList.add('card-date');//add class
	text.classList.add('card-text'); //add class
	div3.classList.add('container-fluid');//add class
		top.appendChild(div);
		div.appendChild(img);
		div.appendChild(div2);
		div2.appendChild(title);
		div2.appendChild(date);
		div2.appendChild(text);
		div2.appendChild(div3);
		div3.appendChild(list);
		list.appendChild(point1);
		list.appendChild(point2);
		list.appendChild(point3);
		msCounter++;
    console.log('while execution ' + msCounter + '/' +milestonesTotal);

	}

}
* {
	margin: 0;
	padding: 0;
}

:root {
	--green-Dark1: #134649;
	--green-Dark2: #1A5E63;
	--green-Mid1: #026976;
	--green-Mid2: #028090;
	--green-Light1: #028090;
	--green-Light2: #028090;
	--bg-1: #28282B;
	--bg-2: #3F4045;
	--bg-3: #D4CCCC;
	--bg-4: #EEE5E5;
	--bg-5: #F2F2F2;
	--bg-6: #FFFFFF;
}

body {
	background-color: var(--green-Dark1);
}

nav, footer {
	background-color: rgba(0,0,0,.1);
	border-color: rgba(0,0,0,.1);
	transition-duration: 1s;
}

nav {
	border-bottom: 1px solid;
}

footer {
	border-top: 1px solid;
}

.opaqueMe {
	background-color: var(--green-Dark1);
	border-color: var(--green-Dark2);
}

main {
	padding: 100px;
	padding-top: 144px;
}

.cover {
	width: 100vw;
	height: 100vh;
}

h1 {
	font-size: 124px;
}

video {
	position: absolute;
		left: 50%;
		top: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
}

.coverText {
	width: 100vw;
	height: 100vh;
	position: absolute;
		left: 0;
		top: 0;
	color: white;
}

.wrap {
	margin-top: 35%;
}

.card {
	width: 50%;
	margin: 100px auto;
	border-color: var(--green-Mid1);
}

.card-img-top {

}

.card-title {
	color: var(--green-Mid2);
}

.card-date {
	color: var(--green-Light2);
}

.card-text {
	color: var(--bg-2);
}

ul {
	list-style: none;
}
<!DOCTYPE html>
<html>
<head>
  <title>BJJ Milestones</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--Includes the bootstrap relevant information and JS/JQuery-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" />
  <link rel="stylesheet" href="css/main.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>
  <script src="js/js.js"></script>
</head> 
<body onload="buildMilestones();">
    <nav id="navBar" class="navbar navbar-expand-md fixed-top">
        <a class="navbar-brand text-white" href="index.html"><i class="fas fa-fist-raised"></i> BJJ Milestones</a>
    </nav>
        <div class="cover">
          <video autoplay muted loop id="coverVideo">
            <source src="vid/coverVideo.mp4" type="video/mp4">
          </video>
        </div>
        <div class="coverText text-center">
          <div class="wrap">
            <h1>BJJ MILESTONES</h1>
            <h3>“Absorb what is useful, discard what is not, add what is uniquely your own.”</h3>
            <h6>Bruce Lee</h6>
          </div>
        </div>
        <main id="top">
          <div class="card">
            <img class="card-img-top" src="img/surreyOpenWinter1.jpg" />
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <h6 class="card-date">00/00/0000</h6>
              <p class="card-text">This is a brief description of the milestone.</p>
                <div class="container-fluid">
                  <ul class="card-ul">
                    <li class="card-li">This is a list item.</li>
                    <li class="card-li">This is a list item.</li>
                    <li class="card-li">This is a list item.</li>
                  </ul>
                </div>
            </div>
          </div>
        </main>
    <footer id="footBar" class="navbar navbar-expand fixed-bottom justify-content-center">
        <ul class="navbar-nav">
            <!--Using FontAwesome to add icons-->
            <li class="nav-item"><a class="nav-link text-white" href="https://www.facebook/TipTutZone" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
            <li class="nav-item"><a class="nav-link text-white" href="https://www.twitter.com/TipTutZone" target="_blank"><i class="fab fa-twitter-square"></i></a></li>
            <li class="nav-item"><a class="nav-link text-white" href="https://www.youtube.com/Tiptut" target="_blank"><i class="fab fa-youtube"></i></a></li>
            <li class="nav-item"><a class="nav-link text-white" href="https://www.matthewfryer.online" target="_blank"><i class="fas fa-book"></i></a></li>
            <li class="nav-item"><a class="nav-link text-white" href="#top"><i class="fas fa-arrow-circle-up"></i></a></li>
        </ul>
    </footer>
</body>

相关问题
最新问题