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.
