Javascript element selection
In day 1, we talked about -
- JavaScript and how to link it to documents
<script src=""></script>and<script>alert(1)</script> - How to get elements by Id, className and use of query selector
document.getElementById("element_id")=> gets the element with the id of “element_id”document.getElementsByClassName("class_name")=> gets all elements with the class name of “class_name”document.querySelector()=> uses jquery like queries to get elements- just writing the name of the tag gets the first element with the tag
- using a dot
.before the name indicates a class being mentioned - using a hash
#before the name indicates an id being mentioned - we can be more specific about the class name along with the
document.querySelectorAll()=> selects all the elements matching the query written follwoing the previous rule
- There are two ways to declare what to do if certain kind of interaction is detected -
- If there an “on…” attribute declared with the function to execute as “function_name()”
- Getting the element in JS using the previous methods and then adding an event listener
element.addEventListener("event_name", function f(){...})
- how to write loops using
for...ofloop andfor...eachloop. - console.log() shows up in inspector.
Helpful resources
Read about basics of queryselector from the MDN docs
Code from the class
Code Setup 0 - Different Ways to attach js to file
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Test 1 - Linking JS</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<h1>This page is supposd to generate two alerts if the two ways of attaching a script works</h1>
<script src="./main.js"></script>
<script>
alert("This is the alert from the embedded script in the HTML")
console.log("This is a console log to log things in the console (from the embedded script)")
</script>
</body>
</html>main.js
// This is an alert function used to generate a pop up alert with the message written inside
alert("This is the alert from the main.js file")
// This is the console.log function used to write a log to the console of the browser
console.log("This is a console log (from the main.js file)")Code setup 1 - getElementById and interactivity
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Test 1 - Linking JS</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<h1>This page shows how to use getElementById and other similar methods to add interactivity to a button</h1>
<button id="btn1">Button 1</button>
<!-- See how I used getElementById to generate an alert for this button click -->
<button onclick="click_alert_btn12()">Button 2</button>
<!-- See how I used the same function to alert for button 2 but with an attribute in HTML -->
<script src="./main.js"></script>
</body>
</html>main.js
let button = document.getElementById("btn1")
function click_alert_btn12(){
alert("Clicked Button 1 or 2")
}
button.addEventListener("click", click_alert_btn12)Code setup 2 - getElementsByClassName
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Test 1 - Linking JS</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<h1>This page expalins how get elements by class name can target a single class name and do all the interactons to all those elements (requires some knowledge of for each)</h1>
<button class="btn">Button 1</button>
<!-- See how I used getElementById to generate an alert for this button click -->
<button class="btn">Button 2</button>
<!-- See how I used the same function to alert for button 2 but with an attribute in HTML -->
<script src="./main.js"></script>
</body>
</html>main.js
let buttons = document.getElementsByClassName("btn")
buttons = Array.from(buttons)
function click_alert_btn12(){
alert("Clicked Button 1 or 2")
}
buttons.forEach(button => {
button.addEventListener("click", click_alert_btn12)
});Code setup 3 - interactivity
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Test</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<h1 id="test">Hello Please fill the form</h1>
<input type="text" id="in1">
<button onclick="clk()">Submit</button>
<script src="./main.js"></script>
</body>
</html>main.js
let h1 = document.getElementById("test")
let text = document.getElementById("in1")
function clk(){
h1.innerText = text.value;
}Code setup 4 - loops
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Test</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<h1 id="test">Open the console to check how forEach and for..of loop works in this example</h1>
</body>
</html>main.js
let x = [1,2,31,12,2]
for (const element of x) {
console.log(element)
}
console.log("For each loop")
x.forEach(element => {
console.log(element)
})Code setup 5 - loops
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Test 1 - Linking JS</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<h1>This page expalins how we can use queryselectorAll to achieve the same thing as we did with getElementsById</h1>
<button class="btn">Button 1</button>
<!-- See how I used getElementById to generate an alert for this button click -->
<button class="btn">Button 2</button>
<!-- See how I used the same function to alert for button 2 but with an attribute in HTML -->
<script src="./main.js"></script>
</body>
</html>main.js
selecting elements form a HTML page*/
let buttons = document.querySelectorAll(".btn")
buttons = Array.from(buttons)
function click_alert_btn12(){
alert("Clicked Button 1 or 2")
}
buttons.forEach(button => {
button.addEventListener("click", click_alert_btn12)
});