The avatar for @aaronkyle
Aaron Kyle Dennis
Social development practitioner. Trying to understand our world.
Published unlisted
Edited
Jan 17, 2021
Insert cell
Insert cell
Insert cell
page_navigation.querySelectorAll("#link1, #link2, #link3").forEach(div =>
div.onclick = (e) => {
let random_image = image_list[Math.floor(Math.random()*Object.keys(image_list).length)]
image_view.querySelector("#image").src = random_image
})
Insert cell
Insert cell
Insert cell
Insert cell
page_navigation = html`
<nav class="f5 fw5 tracked">
<a id="link1" class="link dim light-gray dib mr3 hover-dark-blue" href="#section1" title="Section 1"><label for="section1">Section 1</label></a>
<a id="link2" class="link dim light-gray dib mr3 hover-dark-blue" href="#section2" title="Section 2"><label for="section2">Section 2</label></a>
<a id="link3" class="link dim light-gray dib mr3 hover-dark-blue" href="#section3" title="Section 3"><label for="section3">Section 3</label></a>
</nav>
`
Insert cell
image_view = html`
<div><img id="image" src=${random_image}></img></div>
`
Insert cell
Insert cell
// WORKS, but must be repeated for each element
attempt_using_id = page_navigation.querySelector("#link1").onclick = function(event) {
let random_image = image_list[Math.floor(Math.random()*Object.keys(image_list).length)]
image_view.querySelector("#image").src = random_image
}
Insert cell
Insert cell
Insert cell
Insert cell
page_navigation.getElementsByClassName("link").length
Insert cell
// NOT WORKING
attempt_using_class = page_navigation.getElementsByClassName("link").onclick = function(event) {
let random_image = image_list[Math.floor(Math.random()*Object.keys(image_list).length)]
document.getElementById('image').src = random_image
}
Insert cell
Insert cell
page_navigation.querySelectorAll("#link1, #link2, #link3").length
Insert cell
// NOT WORKING
attempt_using_multiple_id = page_navigation.querySelectorAll("#link1, #link2, #link3").onclick = function(event) {
let random_image = image_list[Math.floor(Math.random()*Object.keys(image_list).length)]
document.getElementById('image').src = random_image
}
Insert cell
Insert cell
image_list = [
"https://live.staticflickr.com/838/28214344027_807d823257_k_d.jpg",
"https://live.staticflickr.com/7579/15313470254_12adc25d60_k_d.jpg",
"https://live.staticflickr.com/4648/28437030709_1f90aa555d_k_d.jpg",
"https://live.staticflickr.com/8464/8425355495_c93e9889b1_k_d.jpg",
"https://live.staticflickr.com/4525/37852151165_59139381d4_k_d.jpg",
"https://live.staticflickr.com/7041/6861301274_6f3e1c0065_k_d.jpg",
"https://live.staticflickr.com/486/19388142340_9df39d9e26_k_d.jpg",
"https://live.staticflickr.com/911/39881083610_3d564b334b_k_d.jpg",
"https://live.staticflickr.com/783/27768800938_d9563d6391_k_d.jpg",
"https://live.staticflickr.com/383/19580403981_dea1d39685_k_d.jpg"
]

Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more