Arrow movement by pixel

JavaScript
21

Thank you. Really appreciate your help. Is there a way you can display it horizontally? just for reference.

22

Hi there surajkay19,

to display the list horizontally, just change thisā€¦

#links li {
    margin: 0.5em 0;
 }

ā€¦to thisā€¦

#links li {
    display: inline-block;
    margin: 0.5em;
 }

coothead

23

I attempted this project with the following code, but was unable to get it to work (image does not appear with computer clock is set to 9pm, and no output on the console). Can someone explain where I went wrong? This was a good exercise!

	<style type="text/css">
	#img9pm, #img10pm, #img11pm, #img12pm { display: none; }
	</style>
</head>
<body onload="showstuff()">
<!-- Each of these images shows all four hours, but each image has the arrow pointing at its own hour. -->
    <img src="imgs/image9.png" class="logo" id="img9pm">
    <img src="imgs/image10.png" class="logo" id="img10pm">
    <img src="imgs/image11.png" class="logo" id="img11pm">
    <img src="imgs/image12.png" class="logo" id="img12pm">  
	<script>
/*
Objective to show only the image related to its own hour. 
In <style>, all images are set to not display at all.
First get the hour on the computer using Date() and put it in the var of hours
If var hour lines up with the hour, it will display that image.
*/ 
var showStuff = function() {
	var img9pm = document.getElementById("img9pm");
	var img10pm = document.getElementById("img10pm");
	var img11pm = document.getElementById("img11pm");
	var img12pm = document.getElementById("img12pm");
	
	var currentTime = new Date(), hours = currentTime.getHours();
	console.log (hours);
	if (hours = 22) {
	img9pm.style.display = "block"; 
	}
}
	</script>
</body>
24

I see 2 errors straight away.

  1. onload="showstuff()"

You donā€™t have a function called showstuff but you have one called showStuff,

  1. hours = 22

Thatā€™s an assignment not a comparison and will always be true.

hours === 22 would be a comparison.

25

ā€¦ and 9pm should be 21, not 22. Thank you very much for your help!

1 Like
26

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.