JS removeChild, innerText and Events Flashcards
How do we remove an element using getElementbyId?
remove();
Using removeChild() tell me the steps you need to take to use it in this code:
<body>
<h1>Hello!!!!</h1>
<div>
<h1>Laura</h1>
</div>
</body>
1) create a variable for parent and child element.
2) Target child element with querySelector not ‘document’ to target the specific child and put into variable.
3) finally use parent.removeChild(child);
VOILA
const name = document.querySelector(‘#name’);
const nameHeading = name.querySelector(‘h1’);
name.removeChild(nameHeading)
What’s the difference between innerHTML and textContent? In this code:
<body>
<h1>Hello!!!!</h1>
<div>
<h1>Laura</h1>
</div>
</body>
const name = document.querySelector(‘#name’);
console.log(name.innerHTML)
By using innerHTML, we can set the HTML content of the element. including elements not just text.
E.g name.innerHTML = <h2>Laura is ma <em>name</em></h2>;
with name.textContent = name.textContent = “Nikki”
Why does this not work?
const btn = document.getElementsByTagName(‘button’);
btn.addEventListener(‘click’, function() {
btn.textContent = “Click me again”;
});
TagName returns a collection of html elements - so you will need to specify index:
HERE:
const btn = document.getElementsByTagName(‘button’)[0];
btn.addEventListener(‘click’, function() {
btn.textContent = “Click me again”;
});
console.log(btn);
Tell me why for a button click event you need a ‘call-back function’? How is this different to other Javascript on the page?
JS usually synchronous. Callback functions are asynchronous and don’t happen sequentially. So you have to ‘wait’ until a button is clicked/event happens to run a function.
What are the ‘arguments’ for click events?
btn.addEventListener(‘’”, function() {
});
1) specify event e.g on hover/on click then the function to be executed.
How would you add a class to the heading:
<body>
<button>CLICK ME TO REVEAL MY NAME</button>
<h1></h1>
</body>
const btn = document.getElementsByTagName(‘button’)[0];
const heading = document.getElementsByTagName(‘h1’)[0];
ADD CLASS =
btn.addEventListener(‘click’, function() {
heading.textContent = “LAURAAAA”;
heading.classList.add(“green”);
});
CSS: .green {
color:green;
}
Why would this not be the correct way to run the callback function? And how can we check when it will run? Synchronous or asynchronous.
const btn = document.getElementsByTagName(‘button’)[0];
const heading = document.getElementsByTagName(‘h1’)[0];
function changeColoursRevealName(){
heading.textContent = “LAURAAAA”;
heading.classList.add(“blue”);
}
THIS PART:
btn.addEventListener(‘click’, changeColoursRevealName());
console.log(btn);
Because it would call it immediately with JS. It would not wait for button click.
For that do this:
btn.addEventListener(‘click’, changeColoursRevealName);
Without round brackets.
TO CHECK:
use a console.log inside the function.
<!DOCTYPE html>
<html>
<head>
<link></link>
<link></link>
</head>
<body>
<!-- Rest of your HTML content -->
</body>
</html>
Which style sheet will override which? When is it useful?
The one furthest down otherStyle.
When you have a ‘base’ style and then you want to add new styles above that.
Using this code, create a on click function which reveals the text:
<h1>Hello</h1>
<button>Show Text</button>
<p>This text will appear when the button is clicked.</p>
CSS:
.invisible {
display: none;
}
const btn = document.getElementById(“showButton”);
const text = document.querySelector(“.hiddenText”);
function showText(){
if(text.classList……..(“hiddenText”)){
text.classList……(“hiddenText”);
} else {
text.classList……(“hiddenText”);
}
}
btn.addEventListener(“click”, showText);
const btn = document.getElementById(“showButton”);
const text = document.querySelector(“.hiddenText”);
function showText(){
if(text.classList.contains(“hiddenText”)){
text.classList.remove(“hiddenText”);
} else {
text.classList.add(“hiddenText”);
}
}
btn.addEventListener(“click”, showText);
What is the difference assignment operator = and === equality operator?
One assigns a value, the other checks a boolean if it evaluates to true or not.
What is the difference between mousedown and moouseup and click?
It gives you more control to break the ‘click’ up into two parts. E.g controller in a game.
What is the syntax for eventListener with mousedown and up?
element.addEventListener(“mousedown”, speedUp);
function speedUp(){
console.log(“You have sped up”)
}
What’s the difference adding an event which is mouse enter and mouse leave compared to mouse down mouse up?
mouse enter and leave is just ‘hover’;
what does addEventListener(“keypress”, showNumber); do?
in an input field e.g ( what’s your name?) Every key you press in this case with a letter, the function runs.
How can I check if a function is running?
Use a console log
Why might a function not run?
The default has stopped it from running, or you have already called the function () instead of just a reference to it in the event listener e.g
addEventListener(“keypress”, showNumber()); - runs synchronously e.g immediately.
addEventListener(“keypress”, showNumber); - RUNS AFTER EVENT OCCURS.
What is the difference between keypress, keydown and keyup?
key pressed - whenever pressed, only when held down, only when released.
What is btn.addEventListener(function(event) {
console.log(event.currentTarget)
}
What does event.type do?
<button>Show Text</button>
shows type - e.g click or submit
What is the default behaviour of internal link if it’s just href=”#”?
In what case is it good to prevent it? in HTML
Take you back to top of page.
Forms - can lose data/ take back to top of screen/no error/ success message/ page refresh.
event.target or currentEvent?
This property refers to the actual element that triggered the event. It represents the specific element on which the event occurred.
how are they different?
event.target. - happens on whatever triggered the event, could be emphasised text/ image within a button.
event.currentEvents is what the event listener is added to. E.g button.
What is event propagation?
It is an event being detected, triggered and propagated throughout elements. Usually nested. E.g grandparents, parents, children
What is event bubbling?
It is when the event is triggered in multiple layers, with the inner most first e.g you have a button inside a div - both have a click event. When the button is clicked, the event is handled there, NEXT the event is handled on the DIV its parents. This is because it is default and nested inside.
What is event capturing?
Opposite of bubbling. When I click on the child, the parent event is handled first, then goes down to child. Useful for form validation. Validates parent element first, then goes down.
