Comparing inner loop variable with outer loop variable- Javascript - javascript

I have created a code for a multiplication table and I was advised the following:
"You could compare the inner loop variable with the outer loop value... e.g., i > a"
What is meant by this? Is there something that I'm not doing correct?
Thanks in Advance!!
<!DOCTYPE html>
<html>
<head>
<title> Java Script </title>
<h1> 6.2 Task JavaScript </h1>
<script>
var times = 1;
for (a = 9; a > 0; a--) {
for (i = 9; i > 0 && i > (9 - times); i--) {
document.write(a + ' x ' + i + ' = ' + a * i + ' ');
}
document.write('<br>');
times++;
}
</script>
</head>
<body>
</body>
</html>

The variable times is not needed, and instead of using 9 - times you can use a - 1 because that always gives the same value.
Demo:
for (a = 9; a > 0; a--) {
for (i = 9; i > 0 && i > a - 1; i--) {
document.write(a + ' x ' + i + ' = ' + a * i + ' ');
}
document.write('<br>');
}
Alternatively you can use i >= a instead of i > a - 1 and the condition for i > 0 is superfluous:
for (a = 9; a > 0; a--) {
for (i = 9; i >= a; i--) {
document.write(a + ' x ' + i + ' = ' + a * i + ' ');
}
document.write('<br>');
}

U can shorten the code a little if you compare the inner varibale a against i instead of using a second variable times:
for (a = 9; a > 0; a--) {
for (i = 9; i > 0 && i > a - 1; i--) {
document.write(a + ' x ' + i + ' = ' + a * i + ' ');
}
document.write('<br>');
}

Related

Can't change css style with JS

<script>
var animate = function (element, target, callback) {
clearInterval(element.timer);
element.timer = setInterval(function () {
var step = (target - element.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
element.style.left = element.offsetLeft + step + 'px';
// console.log(element.offsetLeft);
if (element.offsetLeft == target) {
clearInterval(element.timer);
callback && callback();
}
}, 20)
};
window.addEventListener('load', function () {
var ul = document.querySelector('.local-nav');
console.log(ul);
for (var i = 0; i < ul.children.length; i++) {
ul.children[i].children[0].children[0].style.backgroundPosition = '0 ' + -i * 32 + 'px';
}
var ul2 = document.querySelector('.subnav-entry ul');
console.log(ul2);
for (var i = 0; i < ul2.children.length; i++) {
console.log(ul2.children[i].children[0].children[0]);
ul2.children[i].children[0].children[0].style.backgroundPosition = '0 ' + -i * 32 + 'px';
}
var focus_ul = document.querySelector('.focus ul');
var ol = document.querySelector('.focus ol');
var count = 0;
var focus_timer = setInterval(function () {
if (count == 2) {
animate(focus_ul, focus_ul.offsetLeft - 375);
// console.log('i run');
// console.log(focus_ul.offsetLeft + ' ' + count);
// focus_ul.style.left = focus_ul.offsetLeft + 375 * 2 + 'px';
focus_ul.style.left = 0 + 'px'; // Here is my problem
console.log(focus_ul);
console.log(focus_ul.offsetLeft + ' ' + count);
}
else {
console.log('before animation ' + focus_ul.offsetLeft + ' ' + count);
animate(focus_ul, focus_ul.offsetLeft - 375);
console.log(focus_ul.offsetLeft + ' ' + count);
}
// focus_ul.style.left = focus_ul.offsetLeft + 375 + 'px';
count++;
count = count % 3;
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[count].className = 'current-choice';
console.log('after a round ' + focus_ul.offsetLeft + ' ' + count);
}, 2500)
})
</script>
I meant to do a photo show that can play automaticly, like a Carousel or swiper, The 375px means that the screen is 375px wide, according to the code, when comming to the last photo, as the animation end, it should change back to the initial one which style.left == 0px, but 0px only occur a small while, next time it would be -1125px, -1500px and so on, I'm confused why i set style.left to 0 but fruitless. I'm new in front end ,thanks helping
You can use more of CSS (and less JavaScript) for this animation.
Declare two separate CSS class definitions for focus_ul. Use JavaScript to change the className of focus_ul.
Use CSS transition for animation of CSS offset-left property.
See: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1
Write that custom className instead :hover in above example.

How do I add numbers following a string in JavaScript

I want to console.log a string but also add numbers inside of it. For example if I use the following code:
for (let i = 0; i < 5; i++) {
coinFlip = Math.round(Math.random());
if (coinFlip === 1) {
console.log("#" + i + 1 + " Heads");
} else {
console.log("#" + i + 1 + " Tails");
}
}
Since what I want to console.log starts with a string I can't seem to add numbers right after it. They become strings.
I want to get:
"#2 Tails"
But I get:
"#11 Tails"
How do I get "#2 Tails" instead of "#11 Tails"?
You need to wrap your addition in brackets.
console.log("#" + (i + 1) + " Heads");
or use string interpolation
console.log(`#${i+1} Heads`);
You can first sum up the value of i and 1 to num before the concatination
1)
for (let i = 0; i < 5; i++) {
coinFlip = Math.round(Math.random());
const num = i + 1;
if (coinFlip === 1) {
console.log("#" + num + " Heads");
} else {
console.log("#" + num + " Tails");
}
}
2)
for (let i = 0; i < 5; i++) {
coinFlip = Math.round(Math.random());
if (coinFlip === 1) {
console.log("#" + (i + 1) + " Heads");
} else {
console.log("#" + (i + 1) + " Tails");
}
}
3)
for (let i = 0; i < 5; i++) {
coinFlip = Math.round(Math.random());
if (coinFlip === 1) {
console.log(`#${i + 1} Heads`);
} else {
console.log(`#${i + 1} Tails`);
}
}

Javascript loop through date/times in vali increments

I've trying to build out a table from a start time until the end of day in defined increments.
eg: if the user selects 15 minute increment starting from 8:10am, the times goes
8:10,8:25,8:40,8:55,9:10...
My current code does not correct work out we've changed to the next hour and then start the offset again, eg i get:
815,830,845,905,935,1025,1125,1225,1325...
Here is a JSFiddle
https://jsfiddle.net/inboxdesign/c8f2dhng/13/
Here is the code I have so far;
// from select:
let $first_hour = 8;
let $first_minute = 10;
let day_count = 1; // don't worry about this;
let duration = 15; // increment
var offset = 0;
var current_time = parseInt($first_hour + $first_minute);
for (var i = 0; i < 120; i++) {
if (current_time < 2400) {
var time_string = ('' + current_time);
var time_minutes = parseInt(time_string.substring(time_string.length - 2));
if (time_minutes < 60) {
// offset = 0;
times += '<tr>';
for (var d = 1; d <= day_count; d++) {
times += '<td>d: ' + d + ' : time: ' + current_time + ' ->' + time_string.substring(time_string.length - 2) + ' offset: ' + offset +'</td>';
}
times += '</tr>';
} else {
offset = (time_minutes - 60);
// times += '<tr>';
// times += '<td>o:' + offset + ' tm: ' + time_minutes + '</td>';
// time_minutes = offset;
// times += '</td>';
}
}
console.log('current_time: ' + current_time);
current_time = parseInt(current_time + duration + offset);
In this line your else offset has to be reset to 0
for (var d = 1; d <= SP.new_conference.day_count; d++) {
times += '<td>d: ' + d + ' : time: ' + current_time + ' ->' + time_minutes + ' offset: ' + offset +'</td>';
}
// times += '</tr>';
} else {
offset = 0;
and then your current time and offset should look like this
current_time = parseInt(current_time + SP.new_conference.duration );
offset+=SP.new_conference.duration
I have fixed this issues in the jsfiddle if you want to have a look

How to print different value for each table row using javascript

I just want to create a multiplication table using Javascript but I don't want each row to have the same result. I will picture that table I want to be created for my work
In this code, the program will print 9 times
for (a = 1; a <= 9; a++) {
document.write('<div style= "float: left; margin: 25px">')
for (i = 1; i <= 9; i++) {
document.write(a + ' x ' + i + ' = ' + a * i + '</br>');
}
}
I already make a table for multiplication but I don't want to make all print 10 times. I want to make different for each table cell
I want to make like this picture and I'm new with JavaScript
var times = 1;
for (a = 9; a > 0; a--) {
for (i = 9; i > 0 && i > (9 - times); i--) {
document.write(a + ' x ' + i + ' = ' + a * i + ' ');
}
document.write('<br>');
times++;
}
You can simply add this to the second loop for (i = 1; i <= a; i++) that way you'll achieve what you want.
for (a = 1; a <= 9; a++) {
document.write('<div style= "float: left; margin: 5px">')
for (i = 1; i <= a; i++) {
document.write(a + ' x ' + i + ' = ' + a * i + '</br>');
}
}
The simple answer is replace this line for (i=1; i<=9; i++) { with this: for (i=a; i<=9; i++) {
for (a = 1; a <= 9; a++) {
document.write('<div style= "float: left; margin: 25px">')
for (i = a; i <= 9; i++) {
document.write(a + ' x ' + i + ' = ' + a * i + '</br>');
}
}
For having the exact same thing as you posted in your picture, this code do the job :
document.write("<table>");
for (a = 9; a > 0; a--) {
document.write("<tr>")
for (i = 9; i > a - 1; i--) {
document.write('<td>' + a + ' x ' + i + ' = ' + a * i + '</td>');
}
document.write('</tr>')
}
document.write("</table>")
Note the use of decrementing loop to match the order of your picture and the usage of the table

how to show pagination with javascript?

This code show this type of pagination
1 2 3 4 5 6 7 8 9 10 11 12 next>>
I want show want show only first two digits and last And next button. Does first 2 values need to change on next click.
1 2 .... 12 next>>
This is my code:
_paginationOutput: function(currentPage, totalPages) {
this.writeDebug('_paginationOutput',arguments);
currentPage = parseFloat(currentPage);
var output = '';
var nextPage = currentPage + 1;
var prevPage = currentPage - 1;
// Previous page
if( currentPage > 0 ) {
output += '<li class="bh-sl-next-prev" data-page="' + prevPage + '">' + this.settings.prevPage + '</li>';
}
// Add the numbers
for (var p = 0; p < Math.ceil(totalPages); p++) {
var n = p + 1;
if (p === currentPage) {
output += '<li class="bh-sl-current" data-page="' + p + '">' + n + '</li>';
}
else {
output += '<li data-page="' + p + '">' + n + '</li>';
}
}
// Next page
if( nextPage < totalPages ) {
output += '<li class="bh-sl-next-prev" data-page="' + nextPage + '">' + this.settings.nextPage + '</li>';
}
return output;
},
You'll want to check if the p variable is one of the pages you would like ignored.
EDIT:
To add the ..., put it in the if condition, and check if you already printed the dot.
Try this code. Put this in the beginning of the for loop.
And, create a new variable called dotsAdded before the for loop.
if (p >= 2 && p < totalPages - 1) {
if (!dotsAdded) {
output += "...";
dotsAdded = true;
}
continue;
}
That will continue the loop if and only if p is between 2 and the "second to last page."

Categories