Javascript and HTML

What is all of the code for this? Most of the code is supplied. I am having a hard time with it.

A script on this page should rotate through images of the Phases of the Moon:

Things to do at Halloween

Note the button tag has an event that the DOM will be looking for: ">. This button when clicked will run a JavaScript function called addList, so lets make that in the script tags

function addList(){

//code goes here

}

Now what we want to do is get what the user typed in, fortunately for us we have a text element with an ID, so we can use the querySelector() to get it. Since it is an ID we will use the #.

var userText = document.querySelector('#newitem').value;

Next step is to create a new li element and then give it the value of userText. We can make the newItem wuth the createElement method, remember the type of element we need is a li. Now we need to as a text property to the li, so we will use the textContent and set that equal to the userText

var newItem = document.createElement('li')

textContent = userText

New we need to add this li element to the list. Lets use querySelector again and select the theList, a variable to keep the list object. Now we can appendChild to add what they typed to the list.

var theList = document.querySelector('#MyList')

appendChild(newItem)

Lets test it out and if it is not working, open up the console and test it out. If you need to use the console.log() to log the information you are collecting. If it is working, you are super awesome.

Next we are going to make an animated image of the moon, we will need an array of the images we have for the moon, so feel free to copy this after getting the images.

MoonArray = ["moonImages/Moon10.jpg", "moonImages/Moon11.jpg", "moonImages/Moon12.jpg", "moonImages/Moon13.jpg", "moonImages/Moon14.jpg", "moonImages/Moon15.jpg", "moonImages/Moon16.jpg", "moonImages/Moon17.jpg", "moonImages/Moon18.jpg", "moonImages/Moon19.jpg", "moonImages/Moon20.jpg", "moonImages/Moon21.jpg", "moonImages/Moon22.jpg", "moonImages/Moon23.jpg", "moonImages/Moon24.jpg", "moonImages/Moon25.jpg", "moonImages/Moon26.jpg", "moonImages/Moon27.jpg", "moonImages/Moon28.jpg", "moonImages/Moon29.jpg", "moonImages/Moon30.jpg", "moonImages/Moon31.jpg", "moonImages/Moon32.jpg", "moonImages/Moon33.jpg", "moonImages/Moon34.jpg"];

We are also going to need to set a few other variables, putting them in play. The first is a setInterval(), this will call a function and run it every second(1000 milisecond). The second is a control variable to let us know what position in the array we are at, this will become clear when we make the myImage() function.

var myVar = setInterval(myImage, 1000);

phase = 0;

Let us now make the myImage(), of course we need this in the script tags.

function myImage() {

//code goes here

}

Now that we are in the function, lets use that variable phase, we will use it to pick what position in the array we are at. There is 0 to 24 positions, and phase starts at position 0. This will change each time we run the method.

var d = MoonArray[phase];

Now we want to get the img tag from the DOM, and we turn to our old friend querySelector(). Lets look for the tag with the ID rotatingImage and put him into the object image.

var image = document.querySelector("#rotatingImage");

the image object needs to have the src attribute changed to reflect the new image. Lets do that with the setAttribute(). We need to make sure to pass it the attribute we are changing, and the value we are changing it to, d has the file name we want to use.

setAttribute('src', d);

Lastly, we need to make sure the phase is changed for the next call. We can use phase++, but this would just increment forever. We know there are 0-24 array positions, we we can use that to constrain the phase with an if(). So lets make sure if the phase grows too large, we reset it back to 0. Arrays have length, so lets use that, while we know the length is 24, this make it so we do not have to count it out to double check(I could be wrong, or add more images later), lets use MoonArray.length, and minus 1 because the length will read 25, because 0-24 is 25 elements.

if (phase

phase++

} else {

phase = 0;

}

Lets test it out, and remember to open the console if it is not working. Do not forget to use the console.log() either.