I stuck until here, I got infinite loop when I proceed. Below code is a half way, how to print from 1:00 AM to 12: AM.
http://jsfiddle.net/sychhLya/
JS
$(function () {
for (i = 0; i < 12; i++) {
var time = '<p>' + i + ':00 AM</p>';
$('.holder').append(time);
}
});
Here is a solution using the Date class in Javascript:
$(function () {
var x = new Date("March 3, 2015 01:00");
for (i = 0; i < 12; i++) {
$('.holder').append(x.getHours() + ":" + x.getMinutes() + x.getSeconds() + "AM<br/>");
x.setHours(x.getHours()+1);
console.log(x);
}
});
JSFiddle: http://jsfiddle.net/sychhLya/3/
Is this what you want?
$(function() {
for (i = 1; i <= 12; i++) {
var time = '<p>' + i + ':00 AM</p>';
$('.holder').append(time);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="holder"></p>
Or this?
$(function() {
for (i = 1; i <= 12; i++) {
for (j = 0; j < 60; j++) {
j = ("0" + j).slice(-2);
var time = '<p>' + i + ':' + j + ' AM</p>';
$('.holder').append(time);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="holder"></p>
Related
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
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
Can't get loop to spit out a string of the values in checked checkboxes.
Basic Javascript.
I've tried to follow various other stackoverflow posts to no avail. This and This seemed to be what was closest to what I'm trying to make work.
The HTML is just a row of
<div class="help-days">MON<br><input type="checkbox" id="d0-field" value="Monday" aria-describedby="avail-help"></div>
I've tried
var element = document.getElementsByClassName('help-days');
for (var i = 0; i <= 6; i++) {
if (element[i].checked) {
var day = $('#d' + i + '-field').val();
days = days + ' ' + day;
}
}
and
for (var i = 0; i <= 6; i++) {
var element = document.getElementById('#d' + i + '-field')
if (element[i].checked) {
var day = $('#d' + i + '-field').val();
days = days + ' ' + day;
}
}
Below example outputs Monday Tuesday Wednesday Thursday Friday Saturday Sunday which leads me to believe there's something about using HTMLCollection and for loops & checking checkboxes that I'm not quite grasping?
for (var i = 0; i <= 6; i++) {
var day = $('#d' + i + '-field').val();
if (day) {
days = days + ' ' + day;
}
}
I'm trying to create a string that appends a checkbox 'value' to the string, if the checkbox is checked.
Any help appreciated!
No need to include the # character when you use document.getElementById. The # character is used with JQuery
And you don't need to write element[i].checked, only element.checked because element is already a reference to your checkbox element.
for (var i = 0; i < 6; i++) {
var element = document.getElementById('d' + i + '-field')
if (element.checked) {
var day = element.value
days += ' ' + day;
}
}
document.getElementsByClassName('help-days'); this will return the list of divs, and they don't have a checked property, you'll need to select the checkboxes inside of them :
for (var i = 0; i < 2; i++) {
var checkbox = element[i].childNodes[2];
if (checkbox.checked) {
var day = $('#d' + i + '-field').val();
days = days + ' ' + day;
}
}
var days = '';
for (var i = 0; i < 3; i++) {
var element = document.getElementById('d' + i + '-field')
if (element.checked) {
var day = element.value
days += ' ' + day;
}
}
console.log(days)
<div class="help-days">MON<br><input type="checkbox" id="d0-field" value="Monday" aria-describedby="avail-help" checked></div>
<div class="help-days">TUE<br><input type="checkbox" id="d1-field" value="Tuesday" aria-describedby="avail-help" checked></div>
<div class="help-days">WED<br><input type="checkbox" id="d2-field" value="Wednesday" aria-describedby="avail-help"></div>
I'm working on a simple table which the data is being generated using loop, I have problem with generating the random numbers What I want is to generated saparately using div ex. <td>09897</td> to <td><div>0</div><div>0</div><div>8</div><div>9</div><div>7</div></td> I manage to generate the numbers somehow, but dont know how to separate them.
Hope you help me.
Thanks
var dataNum = 30;
for (let t = 1; t <= dataNum; t++) {
$('table tbody').append('<tr>');
for (var j = 0; j < 2; j++) {
if (j == 0) {
$('table tbody').append('<td>' + todayDate() + '-' + deci(t) + '</td>');
} else if (j == 1) {
$('table tbody').append('<td>' + (Math.floor(Math.random() * 10000) + 90000) + '</td>');
}
}
$('table tbody').append('</tr>');
}
function todayDate() {
var d = new Date(),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('');
}
function deci(number) {
var num = null;
if (number < 10) {
num = '000' + number;
} else if (number > 9 && number < 100) {
num = '00' + number;
} else if (number > 99 && number < 1000) {
num = '0' + number;
} else {
num = number;
}
return num;
}
table th, table td{
width: 150px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Num</th>
<th>Random</th>
</tr>
</thead>
<tbody></tbody>
</table>
Use this function to convert your generated number to desired html and then insert it in your td tag (convert("09897", "div")):
function convert(num, tag){return "<"+tag+">"+(num+"").split("").join("</"+tag+"><"+tag+">")+"</"+tag+">"}
So (Math.floor(Math.random() * 10000) + 90000) gives you the random number. Now you need each of the digit (which would be available via .toString().split("")), and then for every digit you need to wrap <div> around it - which can be done via .map(t => "<div>" + t + "</div>"). Then you can join those strings using .join("").
var dataNum = 30;
for (let t = 1; t <= dataNum; t++) {
$('table tbody').append('<tr>');
for (var j = 0; j < 9; j++) {
if (j == 0) {
$('table tbody').append('<td>' + todayDate() + '-' + deci(t) + '</td>');
} else if (j == 1) {
$('table tbody').append('<td>' +
(Math.floor(Math.random() * 10000) + 90000)
.toString()
.split("")
.map(t => "<div>" + t + "</div>")
.join("") +
'</td>');
}
}
$('table tbody').append('</tr>');
}
function todayDate() {
var d = new Date(),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('');
}
function deci(number) {
var num = null;
if (number < 10) {
num = '000' + number;
} else if (number > 9 && number < 100) {
num = '00' + number;
} else if (number > 99 && number < 1000) {
num = '0' + number;
} else {
num = number;
}
return num;
}
table th,
table td {
width: 150px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Num</th>
<th>Random</th>
</tr>
</thead>
<tbody></tbody>
</table>
References:
String#split - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split
Array#join - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join
Array#map - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
var x=90987;
x=x.toString();
for(var y=0; y<x.length; y++)
{
console.log(x[y]);
}
This has been asked before but I'm still struggling to wrap my head around how to fix the error in my case. I'm new to learning Javascript/jQuery. Firefox gives an error "ReferenceError: getFirstArr is not defined". I have a simplified script of what I'm trying to do here JSFiddle (to make it work, select a year button first before a month button).
The culprit seems to be the getFirstArr(videos[i]) line 28. I really don't even know what to try since my code seems correct. It works in Safari, Chrome and IE. Firefox is the odd man out. Here's a snippet of the on click event where the problem is.
$('.campbutton').on('click', function () {
camp = $(this).attr('id');
$('.campbutton').removeClass('green');
$(this).addClass('green');
$('#searcharea').html('<table></table>');
var campyear = camp + year;
var count = 1;
var noResultCount = 0;
for (i = 0; i < videos.length; i++) {
for (j = 0; j < 5; j++) {
getFirstArr(videos[i]); // Firefox doesn't like this line
function getFirstArr(video) { // prints the the array where a match is found
The JSFiddle will have the whole code. So my question is, why is Firefox not accepting the function call, and what needs to be changed? Any help or hints are appreciated (btw, I'm still working on getting the correct table tags to format the output correctly so the videos don't just stack on top of themselves).
Edit: The specific problem Firefox has is when the camp button is clicked, no videos load in the div. The other button events are fine.
Here's the entire code in question:
var videos = [ ["string1A", "string1B", "string1C"], ["string2A", "String2B", String2C"] ];
var camp = "";
var year = "";
$('#searcharea').html('select a year button first');
$('.yearbutton').on('click', function () {
year = $(this).attr('id');
$('.yearbutton').removeClass('green');
$(this).addClass('green');
});
$('.campbutton').on('click', function () {
camp = $(this).attr('id');
$('.campbutton').removeClass('green');
$(this).addClass('green');
$('#searcharea').html('<table></table>');
var campyear = camp + year;
var count = 1;
var noResultCount = 0;
for (i = 0; i < videos.length; i++) {
for (j = 0; j < 5; j++) {
getFirstArr(videos[i]);
function getFirstArr(video) {
if (campyear === video[j]) {
var pos = video.indexOf(video[j]);
$('#searcharea').append('<tr><td>' + video[(pos - pos)] + '</td>' + '<td>' + 'Composer: ' + video[(pos -pos) + 1] + '<br>' + 'Player: ' + video[(pos - pos) + 2] + '<br>' + 'Piece: ' + video[(pos - pos) + 3] + '</td>');
}
else noResultCount++;
if (campyear === video[j] && count % 3 === 0 && j === 4)
$('#searcharea').append('</tr><tr>');
if (i === videos.lenght && j === 4)
$('#searcharea').append('</table>');
}
}
count++;
}
if (noResultCount === videos.length * 5)
$('#searcharea').html("No results found");
});
http://jsfiddle.net/3ncc5xdx/123/
Here i have moved your function to outside the loop like so, I think it works, unless I misunderstood what the issue is:
$('.campbutton').on('click', function () {
camp = $(this).attr('id');
$('.campbutton').removeClass('green');
$(this).addClass('green');
$('#searcharea').html('<table></table>');
var campyear = camp + year;
var count = 1;
var noResultCount = 0;
function getFirstArr(video) {
if (campyear === video[j]) {
var pos = video.indexOf(video[j]);
$('#searcharea').append('<tr><td>' + video[(pos - pos)] + '</td>' + '<td>' + 'Composer: ' + video[(pos -pos) + 1] + '<br>' + 'Player: ' + video[(pos - pos) + 2] + '<br>' + 'Piece: ' + video[(pos - pos) + 3] + '</td>');
}
else noResultCount++;
if (campyear === video[j] && count % 3 === 0 && j === 4)
$('#searcharea').append('</tr><tr>');
if (i === videos.lenght && j === 4)
$('#searcharea').append('</table>');
}
for (i = 0; i < videos.length; i++) {
for (j = 0; j < 5; j++) {
getFirstArr(videos[i]);
}
count++;
}
if (noResultCount === videos.length * 5)
$('#searcharea').html("No results found");
});
So the reason that it works is that the function is now declared before it is used once. Also, its now only declared once rather than again and again in your loop. It probably works in Chrome because Chrome is pretty smart and figuring our what you were implying – but Firefox will need a slightly more strict approach.