When I run my code, there's an error saying: Cannot set property 'src' of null
The error is in this for loop:
for (i=1; i<=48; i++) {
document.getElementById("hour" + i*6 + "map").src = mapAddresses[i-1];
}//end for
Here is all of the code leading up to that point:
<script>
//Create Canvases and Images
var canvas;
var img;
var index;
for (var i = 1; i <= 40; i++) {
index = 6 * i;
canvas = document.createElement("canvas");
canvas.id = "hour" + index + "canvas";
canvas.width = 1024;
canvas.height = 764;
img = document.createElement("img");
img.id = "hour" + index + "map";
img.src = " ";
canvas.appendChild(img);
document.body.appendChild(canvas);
}//end for
//Time Variables
var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth() + 1;
var currentDay = new Date().getDate();
var currentHour = new Date().getHours();
var currentRun;
//Formatting Time Variables for URLs
if (currentMonth < 10) {
currentMonth = "0" + currentMonth;
}//end if
if (currentDay < 10) {
currentDay = "0" + currentDay;
}//end if
//Finding Latest Model Run
if (currentHour >= 0 && currentHour < 6) {
currentRun = "00";
}//end if
if (currentHour >= 6 && currentHour < 12) {
currentRun = "06";
}//end if
if (currentHour >= 12 && currentHour < 18) {
currentRun = "12";
}//end if
if (currentHour >= 18 && currentHour < 24) {
currentRun = "18";
}//end if
var currentRun = currentRun;
//Creating URLs
var mapAddresses = [];
for (i=6; i<=240; i=i+6) {
mapAddressFor = "http://www.tropicaltidbits.com/analysis/models/gfs/" + currentYear + currentMonth + currentDay + currentRun + "/gfs_mslp_pcpn_neus_" + i/6 + ".png";
mapAddresses.push(mapAddressFor);
}//end for
//Insert Images to Document
for (i=1; i<=48; i++) {
document.getElementById("hour" + i*6 + "map").src = mapAddresses[i-1];
}//end for
How can I get rid of this error? I can't figure our why there's an error, and how can I fix it?
You create 40 elements:
for (var i = 1; i <= 40; i++) {
// ...
img.id = "hour" + index + "map";
// ...
}//end for
and try to set 48
for (i=1; i<=48; i++) {
document.getElementById("hour" + i*6 + "map").src = mapAddresses[i-1];
}//end for
Related
I have 2 option in radio input
Tab screen to stop in 0.5 sec -> So I complete this solution.
Tab screen to stop immediately. I want it spin after I press the submit button and it stops after I tab the screen.
Here is my fiddle here: https://jsfiddle.net/7det89o6/3/
$("#submit-btn").click(function() {
var cond = valRadioFunc();
if (cond == 1) {
$('.reel-container:first').slotMachine('00' + 1).toString();
// one click
$(".bg-img").one("click", function() {
$('.reel-container:first').slotMachine(randGen());
});
} else if (cond == 2) {
$('.reel-container:first').slotMachine('00' + 1).toString();
}
});
}
<script type="text/javascript">
var reeling_time = 500;
var stop_spinning_time_difference = 350;
var start_spinning_time = 0;
var currency_symbol = "$";
var isInfinity = false;
$(document).ready(function() {
$(document).on('show.bs.modal', '.modal', function() {
function valRadioFunc() {
var valRadio = $('input[name=radio]:checked', '#form-select').val();
return valRadio;
}
$("#submit-btn").click(function() {
var cond = valRadioFunc();
if (cond == 1) {
$('.reel-container:first').slotMachine('00' + 1).toString();
// one click
$(".bg-img").one("click", function() {
isInfinity = false;
$('.reel-container:first').slotMachine(randGen());
});
} else if (cond == 2) {
$('.reel-container:first').slotMachine('00' + 1).toString();
isInfinity = true;
// one click
$(".bg-img").one("click", function() {
reeling_time = 0;
isInfinity = false;
$('.reel-container:first').slotMachine(randGen());
});
}
});
});
});
function randGen() {
var minRange = 1;
var maxRange = 999;
var randNum = (Math.floor(Math.random() * maxRange) + minRange).toString();
if (randNum.toString().length == 3) {
return randNum;
} else if (randNum.toString().length == 2) {
return "0" + randNum;
} else if (randNum.toString().length == 1) {
reeling_time = 0;
return "00" + randNum;
}
}
function collision($div1, $div2) {
var x1 = $div1.offset().left;
var w1 = 40;
var r1 = x1 + w1;
var x2 = $div2.offset().left;
var w2 = 40;
var r2 = x2 + w2;
if (r1 < x2 || x1 > r2) return false;
return true;
}
$.fn.slotMachine = function(my_number) {
var $parentSlot = this;
var hidden_reels_html = '';
var hidden_reels_array = [];
var numberFormat = function number_format(number) {
number = (number + '');
return number;
}
for (var $j = 0; $j <= 9; $j++) {
hidden_reels_array[$j] = "";
for (var $i = 0; $i <= 9; $i++) {
hidden_reels_array[$j] += '<div class="reel-symbol' + ($i == 0 ? ' reel-loop' : '') + '">' + (($j + $i) % 10) + '</div>';
}
}
var transformNumberToArrayPlusDollar = function(my_number) {
var my_scale = parseInt(my_number, 10) > 999 ? 0 : 2;
my_number = numberFormat(my_number, my_scale, ".", ",");
var my_number_array = my_number.split('');
// my_number_array.unshift(currency_symbol);
return my_number_array;
};
//Effect for the reel to go up and then down like it is pushed to spin
var effectBeforeSpin = function() {
$parentSlot.find('.main-reel-symbol').removeClass('reel-stop').addClass('reel-begin');
};
var slotMachine = function(my_number) {
var my_number_array = transformNumberToArrayPlusDollar(my_number);
var reels_html = '';
for (var $i = 0; $i < my_number_array.length; $i++) {
reels_html += '<div class="reel">' + hidden_reels_array[($i % 10)] + '</div>';
}
effectBeforeSpin();
var startSpinning = function() {
$parentSlot.html(reels_html);
var my_timer = reeling_time;
$.each(my_number_array, function(my_index, my_value) {
var next_value = /^[0-9]$/.test(my_value) ? (parseInt(my_value, 10) + 1) % 10 : "0";
var stopSpinning = function() {
$parentSlot.find('.reel:eq(' + my_index + ')')
.html("<div class='reel-symbol main-reel-symbol reel-stop'>" + my_value + "</div>")
.append("<div class='reel-symbol'>" + next_value + "</div>");
};
if(!isInfinity){
setTimeout(stopSpinning, my_timer);
}
my_timer += stop_spinning_time_difference;
});
};
setTimeout(startSpinning, start_spinning_time);
};
slotMachine(my_number);
return this;
};
$('.reel-container:first').slotMachine('00' + 1).toString();
</script>
I add one variable at top of JavaScript code.
i have this javascript that displays a clock. Is it also possible that it display realtime an div on special time?
if (today >= 12 && today <= 13.30) {
document.body.className += 'lunchbreak';
} else {
document.body.className += 'nolunchbreak';
}
Used clock javascript:
function timepadding(x5) {
if (typeof x5 !== "string") {
x5 = x5.toString()
}
var x6 = 0;
var x7 = 0;
if (x5 % 60 === 0) {
return x5 + ":00"
}
else {
x6 = x5 % 60;
return x6.toString()
}
}
function gettimezone() {
var d = new Date();
var z = document.getElementById("result");
var utcsinceepoch = Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
var y1 = d.getTime()
z.innerHTML= (utcsinceepoch - d.getTime())/3600000;
}
gettimezone();
function utcoffset(time, offset) {
return time + offset;
}
function displayTime() {
var d = new Date();
var y = document.getElementById("a");
var h = (d.getHours()).toString();
var m = (d.getMinutes()).toString();
var s = (d.getSeconds()).toString();
var h2 = ("0" + h).slice(-2);
var m2 = ("0" + m).slice(-2);
var s2 = ("0" + s).slice(-2);
y.style.fontSize = "100px";
y.innerHTML= h2 + ":" + m2 + ":" + s2;
}
setInterval(displayTime, 1000);
I hope you have ideas :)
https://jsbin.com/xubimewoke/edit?html,js,output
I have to fadeIn and fadeOut the information of the setInterval at the end of the program: I want that after certain amount of time, the information slowly disappear and then reappear after the information slowly. I saw other example of this subject but I didn't find a solution, i don't know how to do it, any suggestion? (Excuse me for my horrible english).
var newsTitle = [];
var newsDate = [];
var pubDate = [];
var newsHours = [];
var newsLenght;
var resultDate = [];
var cDate = 0;
var w = 1;
var newsName = "La Repubblica";
function newsUpdateAll() {
cDate = new Date();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
extractData(xhttp);
}
};
xhttp.open("GET", "http://www.repubblica.it/rss/homepage/rss2.0.xml", true);
xhttp.send();
}
function extractData(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("item");
for (i = 0; i < x.length; i++) {
newsTitle[i] = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
pubDate[i] = x[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue;
var newnewsDate = new Date(pubDate[i]);
newsDate[i] = ((cDate - newnewsDate)/1000)/60;
}
newsLenght = x.lenght;
newsClassification();
setRules();
document.getElementById("news-title").innerHTML = newsTitle[0];
document.getElementById("news-name").innerHTML = newsName + ", " + newsHours[0];
}
function newsClassification() {
var length = newsDate.length;
for (var i = (length - 1); i >= 0; i--) {
for (var j = (length - i); j > 0; j--) {
if(newsDate[j] < newsDate[j-1]) {
var tmp = newsDate[j];
newsDate[j] = newsDate[j-1];
newsDate[j-1] = tmp;
var tmp2 = newsTitle[j];
newsTitle[j] = newsTitle[j-1];
newsTitle[j-1] = tmp2;
}
}
}
}
function setRules(){
for (i = 0; i < newsDate.length; i++) {
resultDate[i] = Math.round(newsDate[i]);
if (resultDate[i] >= 1440){
newsHours[i] = Math.round((resultDate[i] / 60) / 24);
if (newsHours[i] > 1){
newsHours[i] = newsHours[i] + " giorni fa:";
}else{
newsHours[i] = newsHours[i] + " giorno fa:";
}
}else if (resultDate[i] >= 60){
newsHours[i] = Math.round(resultDate[i] / 60);
if (newsHours[i] > 1){
newsHours[i] = newsHours[i] + " ore fa:";
}else{
newsHours[i] = newsHours[i] + " ora fa:";
}
}else{
newsHours[i] = resultDate[i];
if (newsHours[i] > 1){
newsHours[i] = newsHours[i] + " minuti fa:";
}else{
newsHours[i] = newsHours[i] + " minuto fa:";
}
}
}
}
newsUpdateAll();
setInterval(function (){
if (w > 55){
w = 1;
newsUpdateAll();
}
document.getElementById("news-title").innerHTML = newsTitle[w];
document.getElementById("news-name").innerHTML = newsName + ", " + newsHours[w];
w++;
},20000);
I want to show the actual appointments of the day in my HTML. I would like to implement it with a JavaScript where I get the name of the appointment and the date out of an excel table.
I already wrote something but it doesn't work and not in the way I want it.
Code:
function appointment() {
var event = [];
var temp = [];
event[0] = ["17.12.2015", "test1"];
event[1] = ["11.12.2015", "TestToday"];
var datum = new Date();
var today = today.getDate();
var month = today.getMonth() + 1;
for (i = 0; i < event.length; i++) {
if (event[i]) {
if (event[i][0] == today && event[i][0] == month) {
event[i][0] = temp[i];
}
}
else {
break;
}
}
if (temp.length == 0) {
document.write("Today is nothing to do");
}
else {
var x2 = "Today " + ((temp.length == 1) ? "is following event: " : "are following events: ");
for (i = 0; i < temp.length; i++) {
x2 += ((temp[i] > 0) ? ((temp[i] == (temp.length - 1)) ? " and " : ", ") : " ") + temp[event[1]][3] + "(" + temp[event[i]][2] + ")";
}
document.write(x2 + " appointment");
}
}
Question: How can I make it work? How can I read the appointment toppic and date out of a excel table?
Change your code to
var datum = new Date().setHours(0,0,0,0);
//you don't need today and month
if (event[i]) {
eventDate = new Date(event[i][0].split(".").reverse()).getTime();
if (datum === eventDate) {
temp.push(event[i][1]); //there was a problem here as well
}
}
else {
break;
}
jsFiddle
Issue is in your for loop. To compare today's date should be in dd.mm.yy format as it is in array:
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10)
dd='0'+dd;
if(mm<10)
mm='0'+mm;
var today = dd+'.'+mm+'.'+yyyy;
for (i = 0; i < event.length; i++) {
if (event[i]) {
if (event[i][0] == today) {
temp[i] = event[i][0];
}
}
// Don't break your for loop
}
Working Fiddle
I want to disable specific dates in Magento Connect Order Delivery Date Calendar and tried many ways. But could not be successful. Below is my code. It says "TypeError: $.inArray is not a function" when click on the calendar icon.
disableFunc : function(date)
{
var day_off_array = dayoff.split(",") ;
currentTime = new Date();
var d1=currentTime.getDate();
var m1=currentTime.getMonth();
var y1=currentTime.getFullYear();
m1=m1+1;
var counter = 1;
var disabledDays =
["10-20-2013", "10-21-2013", "11-15-2013", "11-17-2013"];
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
return [false];
}
}
return [true];
if(y < y1)
{
return true;
}
else if(m1 > m && y==y1)
{
return true;
}
}
and this is the original code.
disableFunc : function(date)
{
var y = calendar.date.getFullYear();
var m = calendar.date.getMonth();
var d = calendar.date.getDate();
var day_off_array = dayoff.split(",") ;
//document.write(day_off_array);
currentTime = new Date();
var d1=currentTime.getDate();
var m1=currentTime.getMonth();
var y1=currentTime.getFullYear();
var counter = 1;
for (var i=0; i<day_off_array.length;i++){
if (day_off_array[i]>=0 && day_off_array[i]!=''){
if (date.getDay()==day_off_array[i]){
if (date.getDate()==currentTime.getDate()){
test_flag=true;
}
return true;
}
}
}
if(y < y1)
{
return true;
}
else if(m1 > m && y==y1)
{
return true;
}
}
Any helps would be appreciated.
It's too late to answer the question, but this may help someone like me!
var disabledDays = ["10-20-2014", "10-21-2014", "11-15-2014", "11-17-2014"];
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
var dd = (m+1) + '-' + d + '-' + y;
if(disabledDays.indexOf(dd) != -1) {
return true;
}
}