29:null 2a:["$","title",null,{"children":"Change Image on Click | Aaron Kyle Dennis | Observable"}] 2f:[] 2d:{"id":"b91163df0f54b28c","slug":null,"title":"Change Image on Click","thumbnail":"941d4d41e80c7c6e37a82d8887f27a071e33d2dd518ed15cf9f95c09a4eb1ddd","access_level":"unlisted","create_time":"$D2021-01-16T15:49:59.550Z","update_time":"$D2021-01-17T17:26:55.126Z","view_time":null,"first_public_time":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":"starter_2024"},"version":316,"publish_version":316,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Change Image on Click","cells":[{"id":0,"value":"md`# Change Image on Click`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md`\n**Solved:**\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"page_navigation.querySelectorAll(\"#link1, #link2, #link3\").forEach(div => \n div.onclick = (e) => {\nlet random_image = image_list[Math.floor(Math.random()*Object.keys(image_list).length)]\n image_view.querySelector(\"#image\").src = random_image\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"tachyons = {\n const src = 'https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css';\n const n = html``;\n const api = {\n attach: () => document.querySelector('head').prepend(n),\n detach: () => n.parentNode && n.parentNode.removeChild(n),\n };\n api.attach();\n invalidation.then(api.detach);\n return api;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`\nHere are some navigation buttons. I'd like the image to change when I press one:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"page_navigation = html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"image_view = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`\nBefore anything above will work, you'll have to re-run this cell. It will return a red error message when the notebook loads. I have tried using \\`await\\` in a few places, but also haven't gotten it to work. I could add a short delay before the cell runs. It would (probably) work, but seems imperfect. Once the cell is run, clicking 'Section 1' above will randomly select an image from \\`image_list\\`, defined below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"// WORKS, but must be repeated for each element\nattempt_using_id = page_navigation.querySelector(\"#link1\").onclick = function(event) {\n let random_image = image_list[Math.floor(Math.random()*Object.keys(image_list).length)]\n image_view.querySelector(\"#image\").src = random_image\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`\nThe following two functions look like they *should* work:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"md`\n[\\`Document.getElementsByClassName()\\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"page_navigation.getElementsByClassName(\"link\").length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"// NOT WORKING\nattempt_using_class = page_navigation.getElementsByClassName(\"link\").onclick = function(event) {\n let random_image = image_list[Math.floor(Math.random()*Object.keys(image_list).length)]\n document.getElementById('image').src = random_image\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"md`\n[\\`Document.querySelectorAll()\\`](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"page_navigation.querySelectorAll(\"#link1, #link2, #link3\").length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"// NOT WORKING\nattempt_using_multiple_id = page_navigation.querySelectorAll(\"#link1, #link2, #link3\").onclick = function(event) {\n let random_image = image_list[Math.floor(Math.random()*Object.keys(image_list).length)]\n document.getElementById('image').src = random_image\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"md`\n[\\`[Images]\\`](https://www.flickr.com/photos/asiandevelopmentbank/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"image_list = [\n \"https://live.staticflickr.com/838/28214344027_807d823257_k_d.jpg\",\n \"https://live.staticflickr.com/7579/15313470254_12adc25d60_k_d.jpg\",\n \"https://live.staticflickr.com/4648/28437030709_1f90aa555d_k_d.jpg\",\n \"https://live.staticflickr.com/8464/8425355495_c93e9889b1_k_d.jpg\",\n \"https://live.staticflickr.com/4525/37852151165_59139381d4_k_d.jpg\",\n \"https://live.staticflickr.com/7041/6861301274_6f3e1c0065_k_d.jpg\",\n \"https://live.staticflickr.com/486/19388142340_9df39d9e26_k_d.jpg\",\n \"https://live.staticflickr.com/911/39881083610_3d564b334b_k_d.jpg\",\n \"https://live.staticflickr.com/783/27768800938_d9563d6391_k_d.jpg\",\n \"https://live.staticflickr.com/383/19580403981_dea1d39685_k_d.jpg\"\n ]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"random_image = image_list[Math.floor(Math.random()*Object.keys(image_list).length)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"