How to properly add an image through JavaScript to a webpage - javascript

I am following along in a tutorial that creates a dynamic webpage. The webpage is supposed to show the time and an image that updates according to whatever hour it is. However, the way the instructor is inserting his image is new to me and I am not sure where I am messing up but no image at all is being displayed on the page.
let today = new Date(),
hour = today.getHours();
if(hour < 12) {
// Morning
document.body.style.backgroundImage = "url('../images/Morning.jpg')";
greeting.textContent = 'Good Morning';
} else if(hour < 18) {
// Afternoon
document.body.style.backgroundImage = "url('../images/Evening.jpg')";
greeting.textContent = 'Good Afternoon';
} else {
// Evening
document.body.style.backgroundImage = "url('../images/Night.jpg')";
greeting.textContent = 'Good Evening';
}
}```
I get no error messages with the following function after calling it. However, no image is being displayed.

url('../images/Morning.jpg')";
has to be a valid URL. Let's say your HTML file was www.example.com/foo/index.html. There would have to be a www.example.com/images/Morning.jpg file, or else you won't see anything.
This is especially true if your URL before was "Morning/jpg", as that's not a valid URL (well, technically it is, but it almost certainly isn't valid for your case).

Related

how do i run this custom api?? (using wix and javascript)

Im trying to code a slideshow that starts on a different page depending on the week day
im using wix to build this website but ive run to a stop
$w.onReady(function() {
$w("#slideshow1")
});
const d = new Date(); // gets time
function func2() { d.getDay } //gets day of the week
if (func2.getDay = 0) { $w("#slideshow1").changeSlide(0)}
else if (func2.getDay = 1) {$w("#slideshow1").changeSlide(1);}
else if (func2.getDay = 2) {$w("#slideshow1").changeSlide(2);}
else if (func2.getDay = 3) {$w("#slideshow1").changeSlide(3);}
else if (func2.getDay = 4) {$w("#slideshow1").changeSlide(4);}
else if (func2.getDay = 5) {$w("#slideshow1").changeSlide(5);}
else if (func2.getDay = 6) {$w("#slideshow1").changeSlide(6);}
// sets slideshow according to day
ive tried using all lines as "if's"
if anyone knows thier way around the velo/wix api id love some help on this as ive sat for hours troubleshooting
thx

getHours(), show and hide

I'm currently working on my first website and have run into an issue that I just can't pass. I am using JavaScript to show and hide elements in my HTML (sounds easy enough right?) But it's not working the way it should. Even when I have an alert on the page that shows the number returned by variable 'hours', there is some issue when showing the correct information.
var today = new Date();
var hours = today.getHours();
alert(hours)
let day = document.querySelector('.day')
let night = document.querySelector('.night')
if (hours > 9 || hours < 12) {
day.style.display = "block";
night.style.display = "none";
}
else {
day.style.display = "none";
night.style.display = "block";
let blurred = document.querySelector('h1')
blurred.classList.add('blur');
}
Not to mention that eventually it should work with getUTCHours, however thought I would try this way first.
I think you specified a wrong if statement since an hour is always greater than 9 or less than 12.
Probably you meant something like if (hours >= 9 && hours <= 12)?

Javascript file suddenly stopped working with no changes

So I got help on this code earlier and it was working before perfectly. However, upon opening VS Code again the code no longer responds with zero errors.
var runned = false;
var d = new Date();
if (d.getHours(5) == 5 && !runned) {
alert("Hello");
runned = true;
}
The code is simply supposed to get the current hour and return an alert.
I verified that the js file was connected to the HTML file with some other code and it worked.
var runned = false;
var d = new Date();
if (d.getHours() == 5 && !runned) {
alert("Hello");
runned = true;
}
getHours() doesn't take parameters
getHours uses the 24-hour clock model, i.e 0-23 so 5 is 5 am but 17 is 5pm
d.getHours() as used above without an argument makes it work in all use case scenarios

I need a running timer and checker

I am trying to create a function/alg that executes a script depending on the time.
This won't work with PHP's 'sleep' function (I've nested loops with headers and tried).
here is the logic I am seeking to accomplish:
$time= time(); // checks time
if($time == 3'o'clock) {
do_something();
} else {
check_time();
and_keep_counting();
}
I need a continous clock ticking | which can run in the background
at the same time, continous checking of the clock.
I may have to go jquery?
This will not be very efficient, but will do the trick:
(function time(){
var t = new Date().toLocaleTimeString();
console.log(t);
if(t === "3:00:00 PM"){
// Do whatever you need to here
runStuff();
}
// Call the function again in 59 seconds
setTimeout(time, 59000);
}());
function runStuff(){
alert("Time's Up!");
}
I'm not entirely sure what you're asking, but you can do something like this with JavaScript...
var date = new Date(); which creates a date-time object
var hours = date.getHours(); which gets the hours in "military time" format, meaning 1 is 1:00AM and 13 is 1:00PM
If you want to check if it's three o'clock, you can do
if (hours == 15) {
someFunction();
} else {
doSomeOtherFunction();
}

To change a css style depending on time of day (javascript)

im trying to write a little .js file to change a css style from display:block to display:none depending on the time of day, 08.30 to 17.00 display block and 17.00 to 08.30 display none.
Here's what i have so far:
<script language="JavaScript">
day=new Date() //..get the date
x=day.getHours() //..get the hour
if(x>=8.30 && x<17) {
document.write('<style type="text/css">#live{display:block}"></style>')
} else
if(x>=17 && x<8.30) {
document.write('<style type="text/css">#live{display:none}"></style>')
};
</script>
Do think this is good js plus not sure if using 8.30 would work plus not sure if the last ";" is needed.
Any help on this would be great thanks.
Im now trying this code but does not work
<script type="text/javascript">
$(document).ready ( function (){
var dateObj = new Date();
var hour = dateObj.getHours() * 100 + dateObj.getMinutes();
if (hour >= 1600 && hour <= 1800) {
document.getElementById('live').style.display = "none";
}
});
</script>
Date().getHours() returns an integer. For your code to work you'd have to do something like this:
var dateObj = new Date();
var hour = dateObj.getHours() * 100 + dateObj.getMinutes();
if (hour >= 830 && hour <= 1700) {
document.getElementById('your_el').style.display = "none";
}
Note that you should only use this code when the DOM is ready for manipulation.
Although, is this really what you want? JavaScript's Date gets its date and time information from the users' clock. You would probably be better off handling this on the server.
getHours() returns a whole number (0 to 23). For 8:30, you will
need to check getHours() and getMinutes() accordingly.
The last semicolon does not need to be there.
getHours() only gets you the hours number, you need to get the minutes as well
try with
x=day.getHours()+ (day.getMinutes()/100);
about the ; it is not neccessary after an if, but it's good practice to put it at the end of each code line (that would be every other line)

Categories

Resources