I am trying to not load more than 9 alert on each .content but in result I am packing every number in group of 9 items and eliminating any items less than 10!
For example if the random value is 8 then nothing will shows in the content or if the random number is 19 only two set of content displays
How can I fix the following demo?
var itemsNumber = Math.floor(Math.random() * 50) + 1;
console.log(itemsNumber);
var contents = $('.contents');
var element = $('<div class="content"></div>');
for (var i = 0, j = 0; i < itemsNumber; i++, j++) {
element.append('<div class="alert alert-success" role="alert"> Alert ' + i + '</div>');
if (j == 9) {
contents.append(element);
element = $('<div class="content"></div>');
j = -1;
}
}
.content {
background: khaki;
margin: 10px;
border: 1px solid #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents text-center">
</div>
The problem is that you condition to append the content is based on j == 9, so if you have less than 9 items it will never be true and never append. You can add || i === itemsNumber - 1 to tell if you are at the end of all the items.
var itemsNumber = 8; //Math.floor(Math.random() * 50) + 1;
console.log(itemsNumber);
var contents = $('.contents');
var element = $('<div class="content"></div>');
for (var i = 0, j = 0; i < itemsNumber; i++, j++) {
element.append('<div class="alert alert-success" role="alert"> Alert ' + i + '</div>');
if (j === 9 || i === itemsNumber - 1) {
contents.append(element);
element = $('<div class="content"></div>');
j = 0;
}
}
.content {
background: khaki;
margin: 10px;
border: 1px solid #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents text-center">
</div>
Use condition i % 9 == 8 as break point
var itemsNumber = Math.floor(Math.random() * 50) + 1;
console.log(itemsNumber);
var contents = $('.contents');
var element = $('<div class="content"></div>');
for (var i = 0; i < itemsNumber; i++) {
element.append('<div class="alert alert-success" role="alert"> Alert ' + i + '</div>');
if (i % 9 == 8) {// break point
contents.append(element);
element = $('<div class="content"></div>');
}else if(i == itemsNumber - 1){// last loop
contents.append(element);
}
}
.content {
background: khaki;
margin: 10px;
border: 1px solid #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents text-center">
</div>
Related
I'm trying to make it so that each time I click the yes button the next square turns green and when I click no it goes back one square and turns red. I kind of have the idea of making each box a variable but I'm having trouble actually implementing it
Here is my code
<!DOCTYPE html>
<head>
<style>
div {
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
div div {
width: 100px;
height: 100px;
outline: 1px solid;
float: left;
}
h1 {
text-align: center;
vertical-align:bottom;
padding-top: 10px;
}
div div div {
background-color: black;
}
p {
text-align: center;
}
button {
margin:auto;
display: block;
}
</style>
</head>
<body>
<h1> Seven Stages of Misery </h1>
<div>
<div id = "b1"><h1>1</h1></div>
<div id = "b2"><h1>2</h1></div>
<div id = "b3"><h1>3</h1></div>
<div><div></div></div>
<div><div></div></div>
<div id = "b4"><h1>4</h1></div>
<div id = "b7"><h1>7</h1></div>
<div id = "b6"><h1>6</h1></div>
<div id = "b5"><h1>5</h1></div>
</div>
<p id = "question">Did you do it right?</p>
<button id="yes" type="button"
onclick="document.getElementById('b1').style.background = 'green'">
Yes</button>
<button id="no" type="button"
onclick="document.getElementById('b1').style.background = 'red'">
No</button>
<script>
var b1 = 0;
var b2 = 0;
var b3 = 0;
var b4 = 0;
var b5 = 0;
var b6 = 0;
var b7 = 0;
var yes= document.getElementById('yes'), no = document.getElementById('no')
yes.onclick if (b1 = 0 || b1 = 2) {
b1 = 1;
} else if (b2 = 0 || b2 = 2) {
b2 = 1;
} else if (b3 = 0 || b4 = 2) {
b3= 1;
} else if (b4 = 0 || b4 = 2) {
b4= 1;
} else if (b5 = 0 || b5 = 2) {
b5= 1;
} else if (b6 = 0 || b6 = 2) {
b6= 1;
} else if (b7 = 0 || b7 = 2) {
b7= 1;
};
no.onclick if (b7 = 1) {
b7 = 2;
} else if (b6 = 1) {
b6 = 2;
} else if (b5 = 1) {
b5 = 2;
} else if (b4 = 1) {
b4 = 2;
} else if (b3 = 1) {
b3 = 2;
} else if (b2 = 1) {
b2 = 2;
} else if (b1 = 1) {
b1 = 2;
};
if (b1 = 0) {
document.getElementById('b1').style.background = 'white';
} else if (b1 = 1) {
document.getElementById('b1').style.background = 'green';
} else {
document.getElementById('b1').style.background = 'red';
}
</script>
</body>
I know it is not very nice coding and differs a lot from yours but it works for me very well. I hope that still helps!:
// Buttons
<button id="yes" type="button"
onclick="showProgress(1)">
Yes</button>
<button id="no" type="button"
onclick="showProgress(2)">
No</button>
// JavaScript function
<script>
function showProgress(answer)
{
var currentDiv = 0;
if (answer == 1)
{
for (var i = 1; i <= 7; i++)
if (document.getElementById("b" + i).style.backgroundColor == "" || document.getElementById("b" + i).style.backgroundColor == "red")
{
currentDiv = i;
break;
}
document.getElementById("b" + currentDiv).style.backgroundColor = "green";
}
else
{
for (var i = 7; i >= 1; i--)
if (document.getElementById("b" + i).style.backgroundColor == "green")
{
currentDiv = i;
break;
}
document.getElementById("b" + currentDiv).style.backgroundColor = "red";
}
}
</script>
I made a standard deviation calculator but am not sure where I am going wrong in the calculation. I am trying to learn how to manipulate arrays so everything probably takes the long route in what I am doing.
What am I doing wrong?
JavaScript:
myArray = [];
squaredArray = [];
var theTotal;
var average;
var theSquaredTotal;
var meanOfSquaredArray;
var squaredAverage;
var standardDeviation;
$(document).ready(function() {
$('#inTakeButton').on('click', function() {
var inputValue = parseFloat($('#input').val());
if (inputValue === "") {
return;
}
if (isNaN(inputValue)) {
$('#input').val("");
return;
}
myArray.push(inputValue);
$('#input').val("");
});
$('#showArray').on('click', function() {
console.log(myArray);
$('#list').html("");
for (var i = 0; i < myArray.length; i++) {
$('#list').append("<li>" + myArray[i] + "</ul>");
};
$('#doMath').on('click', function() {
theTotal = 0;
for (var i = 0; i < myArray.length; i++) {
theTotal = theTotal + myArray[i];
};
$('#sum').html("");
$('#sum').html("The sum is: " +
theTotal);
average = parseFloat((theTotal /
myArray.length));
$('#average').html("");
$('#average').html(
"The mean value is: " + average
);
for (var i = 0; i < myArray.length; i++) {
squaredArray.push(myArray[i] -
average);
};
console.log(
"the subtracted squared away array is: " +
squaredArray);
for (var i = 0; i < myArray.length; i++) {
squaredArray[i] = Math.pow(
squaredArray[i], 2);
};
console.log(
"the squared away array is: " +
squaredArray);
for (var i = 0; i < squaredArray.length; i++) {
squaredTotal = 0;
squaredTotal = squaredTotal +
squaredArray[i]
};
console.log("The squared sum is: " +
squaredTotal);
//meanOfSquaredArray =
squaredAverage = parseFloat((
squaredTotal / squaredArray
.length));
console.log("The squared average is: " +
squaredAverage);
standardDeviation = Math.sqrt(
squaredAverage);
console.log(
"The standard deviation is: " +
standardDeviation);
});
});
});
CSS:
#wrapper {
width: 80%;
margin: 0 auto;
border: 1px solid #000;
border-radius: 5px 5px 5px 5px;
box-shadow: 5px 5px 10px 3px #000;
padding: 10px;
}
h1 {
text-align: center;
color: orange;
text-shadow: 1px 1px blue;
}
#intake {
text-align: center;
}
HTML:
<div id="wrapper">
<div id="content">
<h1>Standard Deviation</h1>
<div id="intake">
<input id="input" type="text"> <button id="inTakeButton">Push
to Array</button> <button id="showArray">Show Array</button>
<button id="doMath">Do Math</button>
</div>
<div id="middle">
<ul id="list"></ul>
<ul id="sortedList"></ul>
</div>
<div id="output">
<p id="sorted"></p>
<p id="sum"></p>
<p id="average"></p>
</div>
</div>
</div>
Fiddle here.
It´s quite simple mistake, you are doing
for (var i = 0; i < squaredArray.length; i++) {
squaredTotal = 0;
squaredTotal = squaredTotal + squaredArray[i]
};
So in each step, you are resetting squaredTotal to 0, which means when the loop ends, squaredTotal will be equal to the last value of the array. Fix is to put it outside the loop:
squaredTotal = 0;
for (var i = 0; i < squaredArray.length; i++) {
squaredTotal = squaredTotal + squaredArray[i]
};
You have nested two click events:
$('#showArray').on('click', function() {
//
$('#doMath').on('click', function() {
//
});
});
You should move the click event on #doMath out to stand alone so that it can run when you actually click that element.
I am using a for-loop to get the values of a sorted list using .html() but it is only printing the last value in the array. I thought by using myArray.length and myArray[i] in the loop that it would cycle through as expected.
Ideally, I would like this to read:
The sorted values are:
1, 2, 3, 4, 5 etc. . .
What am I doing wrong?
Fiddle here.
HTML:
<div id="wrapper">
<div id="content">
<h1>Let's Do Some Math</h1>
<div id="intake">
<input type="text" id="input"> <button id="inTakeButton">Push to Array</button> <button id="showArray">Show Array</button> <button id="doMath">Do Math</button>
</div>
<div id="middle">
<ul id="list">
</ul>
</div>
<div id="output">
<p id="sorted"></p>
<p id="sum"></p>
<p id="average"></p>
</div>
</div>
</div>
CSS:
#wrapper{
width: 80%;
margin: 0 auto;
border: 1px solid black;
border-radius: 5px 5px 5px 5px;
box-shadow: 5px 5px 10px 3px black;
padding: 10px;
}
h1 {
text-align: center;
color: orange;
text-shadow: 1px 1px blue;
}
#intake {
text-align: center;
}
JavaScript:
myArray = [];
var theTotal;
$(document).ready(function() {
$('#inTakeButton').on('click', function() {
var inputValue = parseFloat($('#input').val());
if (inputValue === "") {
return;
}
if (isNaN(inputValue)) {
$('#input').val("");
return;
}
myArray.push(inputValue);
$('#input').val("");
});
$('#showArray').on('click', function() {
console.log(myArray);
$('#list').html("");
for (var i = 0; i < myArray.length; i++) {
$('#list').append("<li>" + myArray[i] + "</ul>");
};
$('#doMath').on('click', function() {
theTotal = 0;
for (var i = 0; i < myArray.length; i++) {
theTotal = theTotal + myArray[i];
};
$('#sum').html("");
$('#sum').html("The sum is: " + theTotal);
var average = (theTotal/myArray.length);
$('#average').html("");
$('#average').html("The mean value is: " + average);
var sorted = myArray.sort();
$('#sorted').html("");
for (var i = 0; i < myArray.length; i++) {
$('#sorted').html("The sorted values are: <br>" + myArray[i] + ", ");
};
});
});
});
You don't even need to use loop trough the array to do this, just:
$('#sorted').html("The sorted values are: <br>" + myArray.join(", "));
In your loop for the sorted values, you are overriding the entire HTML content each time.
Try something like
for (var i = 0; i < myArray.length; i++) {
$('#sorted').append(myArray[i] + ", ");
};
You can try this. Instead of showing the values using a loop, you can just display the whole array at once. Edited JS code:
myArray = [];
var theTotal;
$(document).ready(function() {
$('#inTakeButton').on('click', function() {
var inputValue = parseFloat($('#input').val());
if (inputValue === "") {
return;
}
if (isNaN(inputValue)) {
$('#input').val("");
return;
}
myArray.push(inputValue);
$('#input').val("");
});
$('#showArray').on('click', function() {
console.log(myArray);
$('#list').html("");
for (var i = 0; i < myArray.length; i++) {
$('#list').append("<li>" + myArray[i] + "</ul>");
};
$('#doMath').on('click', function() {
theTotal = 0;
for (var i = 0; i < myArray.length; i++) {
theTotal = theTotal + myArray[i];
};
$('#sum').html("");
$('#sum').html("The sum is: " + theTotal);
var average = (theTotal/myArray.length);
$('#average').html("");
$('#average').html("The mean value is: " + average);
var sorted = myArray.sort();
$('#sorted').html("The sorted values are: <br>" + myArray )
});
});
});
Check out the fiddle
var sorted = myArray.sort(function (a, b) {
return a - b;
});
use this for sorting
Thanks in Advance to helping my problem.
I have 10,000 Pages in my Blogger Site and using following HTML code to show Number page navigation on main page
Here my issue is, there are morethan 10,000 posts but it uses first 500 posts and showing 18 pages (it should be more than 300+ pages)
I changes 28 posts / page and as it showing 18 x 28 pages = 500 or less
When i have 10,000 posts it should show 28 posts x 350+ pages
You can have a Look on : Dealdimer.com
Please someone guide me where the issue is, Sorry if i'm poor in explaining my concern.
My Code as:
<style type="text/CSS">
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #7AA1C3;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #7AA1C3;
background-color:#F6F6F6;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #7AA1C3;
background: #F6F6F6;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #7AA1C3;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#7AA1C3;
}
</style>
<script type="text/JavaScript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount = 28;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage">'+ upPageWord +'</span>';
}
}else{
upPageHtml = '<span class="showpage">'+ upPageWord +'</span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum">1</span>';
}
}else{
html += '<span class="showpageNum">'+ (p+1) +'</span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> '+ downPageWord +'</span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>
I am quite new to javascript and I am learning more about HTML5, Javascript and CCS3.
The task I have been given:
Create a chess board where you use JavaScript to write the cells (8x8), and then use nth-child to change the background color in CSS.
As you can see I have done that, I don’t know if I have done it in a good way, but I am now going to add a button that change the sides (black and white side). I have tried to solve it by creating var with boolean value, if it’s true it will load one function, and if it’s false another. It works in loading the page, but the change button does not work. What have I done wrong?
HTML and JavaScript:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ccsO2.css">
</head>
<body>
<h1>Sjakkbrett</h1>
<script>
var truefalse = true;
function changer(){
if(truefalse === true){
truefalse = false;
} else{
truefalse = true;
}
}
var svartbrikke = new Array();
svartbrikke [0] = "♜";
svartbrikke [1] = "♞";
svartbrikke [2] = "♝";
svartbrikke [3] = "♛";
svartbrikke [4] = "♚";
svartbrikke [5] = "♝";
svartbrikke [6] = "♞";
svartbrikke [7] = "♜";
svartbrikke [8] = "♟";
var hvitbrikke = new Array();
hvitbrikke [0] = "♖";
hvitbrikke [1] = "♘";
hvitbrikke [2] = "♗";
hvitbrikke [3] = "♕";
hvitbrikke [4] = "♔";
hvitbrikke [5] = "♗";
hvitbrikke [6] = "♘";
hvitbrikke [7] = "♖";
hvitbrikke [8] = "♙";
if(truefalse === true){
document.write('<table>');
for(var i = 0; i < 8; i++){
document.write('<tr align="center">');
for(var j = 0; j < 8; j++){
if(i === 0){
document.write('<td>' + svartbrikke[j] + '</td>');
}
if(i === 1){
document.write('<td>' + svartbrikke[8] + '</td>');
}
if(i === 6){
document.write('<td>' + hvitbrikke[8] + '</td>');
}
if(i === 7){
document.write('<td>' + hvitbrikke[7 - j] + '</td>');
}
else if(i >= 2 && i <= 5) {
document.write('<td> </td>');
}
}
document.write('</tr>');
}
document.write('</table>');
} else {
document.write('<table>');
for(var i = 0; i < 8; i++){
document.write('<tr align="center">');
for(var j = 0; j < 8; j++){
if(i === 0){
document.write('<td>' + hvitbrikke[j] + '</td>');
}
if(i === 1){
document.write('<td>' + hvitbrikke[8] + '</td>');
}
if(i === 6){
document.write('<td>' + svartbrikke[8] + '</td>');
}
if(i === 7){
document.write('<td>' + svartbrikke[7 - j] + '</td>');
}
else if(i >= 2 && i <= 5) {
document.write('<td> </td>');
}
}
document.write('</tr>');
}
document.write('</table>');
}
</script>
<button onclick="changer();"> Bytt side</button>
</body>
</html>
CSS:
root {
display: block;
}
table{
background-color: lightgray;
}
tr:nth-child(2n+1) > td:nth-child(2n){
content: center;
background-color: white;
box-sizing: border-box;
width: 40px;
height: 40px;
}
tr:nth-child(2n) > td:nth-child(2n+1){
content: center;
background-color: white;
box-sizing: border-box;
width: 40px;
height: 40px;
}
You cannot use document.write() after the page is rendered.
Use:
innerHTML
or
DOM methods
to change/add/remove page elements after the page is rendered.
You change the variable, but the code that checks it has already run and you don't rerun it.