I am currently learning Javascript and trying to create an accordion, and thing just don't seem to be going my way, I'll give an example of what i'm working on:
function add() { let parent = document.getElementsByClassName("relative"); for (let i = 0; i < parent.length; i++) { let element = document.createElement("p"); let text = document.createTextNode("Hello"); element.append(text); parent.append(element); } } function button() { let parent = document.getElementsByClassName("relative"); for (let i = 0; i < parent.length; i++) { parent.querySelector("img").setAttribute("src", "assets/images/icon-minus.svg"); } } let button1 = document.querySelectorAll(".relative img"); button1.forEach(value => { value.addEventListener("click", function() { add(); button(); }, false) }) Lorem Ipsum
//THIS WON'T DISPLAY
Lorem Ipsum
//THIS WON'T DISPLAY
Can I use Frontend Mentor projects in my portfolio?
//THIS WON'T DISPLAY
Lorem Ipsum
//THIS WON'T DISPLAY
So, my desired result is that when I click on the image, which is positioned absolutely to the div, a paragraph is created and inserted i.e accordion, but it is not going my way, could someone assist.
I am currently learning Javascript and trying to create an accordion, and thing just don't seem to be going my way, I'll give an example of what i'm working on:
function add() { let parent = document.getElementsByClassName("relative"); for (let i = 0; i < parent.length; i++) { let element = document.createElement("p"); let text = document.createTextNode("Hello"); element.append(text); parent[i].append(element); } } function button() { let parent = document.getElementsByClassName("relative"); for (let i = 0; i < parent.length; i++) { parent[i].querySelector("img").setAttribute("src", "assets/images/icon-minus.svg"); } } let button1 = document.querySelectorAll(".relative img"); button1.forEach(value => { value.addEventListener("click", function() { add(); button(); }, false) }) Lorem Ipsum
[img]assets/images/icon-plus.svg[/img] //THIS WON'T DISPLAY Lorem Ipsum
[img]assets/images/icon-plus.svg[/img] //THIS WON'T DISPLAY Can I use Frontend Mentor projects in my portfolio? //THIS WON'T DISPLAY [img]assets/images/icon-plus.svg[/img]
Lorem Ipsum
[img]assets/images/icon-plus.svg[/img] //THIS WON'T DISPLAY So, my desired result is that when I click on the image, which is positioned absolutely to the div, a paragraph is created and inserted i.e accordion, but it is not going my way, could someone assist.