[WEEK #7] – 14 Advanced DOM Manipulation + Problem Set + Blog Question


Hello guys, this is week 7’s work. I did’t have any troubles doing it. I really liked the walk through of the problem set. I just did not like how he made us write the code and then at the end he just simplified it. Overall I liked the information that I have learned.

Tutorials


Problem Set

This problem set was pretty fun to create. I created a game that I can play on my free time. I like projects like these.


Blog Question


Describe what the two arguments of the addEventListener method are and how they work. Give four examples of the first argument and give examples of using an anonymous function vs. a declared function for the second argument. Use the code-insert tool for your examples.

When using addEventListeners, there are two arguments passed. The first one is the listener event (something that is being listened to) and the other is the function. When the listener event is fulfilled, then the function is activated.

Click Event

button.addEventListener("click", function () {
    alert("clicked");
});

//An alert is being run when you click on the button.

Change Event

numberInput.addEventListener("change", function() {
  //Change event will run anything a change happens.
  winningScoreDisplay.textContent = numberInput.value;
  winningScore = Number(numberInput.value);
  reset();
});

//Whenever a change event happens in a <input> or <textarea> element, the function is run.

Mouseover Event

for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener("mouseover", function () {
        this.classList.add("selected");
    });
}

//This event happens when you move your mouse over the element which are the li element. Once you move your mouse over it, a class is added to the element.

Mouseout Event

for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener("mouseout", function () {
        this.classList.remove("selected");
    });
}

//This event happens when you move your mouse away from the element which are li elements. This works together with the mouse over element. The class "selected" is removed from the element.

I hope you understand what I was trying to explain.


Leave a comment

Your email address will not be published. Required fields are marked *

css.php