I want to add an "active" class on the button when I click the button but addEventListener is not working. I want to have a unique id for each of my and
. data has the API response and I want to display the name from API on the button and email and other details on
Please help to understand
HTML:
<div id="sidebar">
</div>
window.onload = function(){
//function send_with_ajax(){
if (window.XMLHttpRequest || window.ActiveXObject) {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP"); // For IE
} catch(exception) {
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // For IE
}
} else {
xhr = new XMLHttpRequest();
}
} else {
alert("Your browser does not support XMLHTTP Request...!");
}
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true); // Make sure file is in same server
xhr.send(null);
xhr.onreadystatechange = function(){
if (xhr.readyState==4 && xhr.status==200){
var data = JSON.parse(xhr.responseText);
//console.log(data);
var sidebar = document.querySelector("#sidebar");
for(let i = 0; i < data.length; i++){
// data.map(function(){
sidebar.innerHTML += "<button id='accordion"+i+"'>" + data[i].name + "</button>";
sidebar.innerHTML += "<p id='panel"+i+"'>" + data[i].email + data[i].address.city + data[i].company.name + "</p>";
var accordion = document.getElementById('accordion'+i);
var panel = document.getElementById('panel'+i);
accordion.addEventListener('click', function () {
var active = accordion.classList.toggle("active");
//console.log(accordion.classList.contains('active'));
if(active){
panel.style.display = "block";
}else{
panel.style.display = "none";
}
});
}// i for loop ends here
}; // readystate
}; // onreadystatechange
}// onload
I want to add an "active" class on the button when I click the button but addEventListener is not working. I want to have a unique id for each of my and
. data has the API response and I want to display the name from API on the button and email and other details on
Please help to understand
HTML:
<div id="sidebar">
</div>
window.onload = function(){
//function send_with_ajax(){
if (window.XMLHttpRequest || window.ActiveXObject) {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP"); // For IE
} catch(exception) {
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // For IE
}
} else {
xhr = new XMLHttpRequest();
}
} else {
alert("Your browser does not support XMLHTTP Request...!");
}
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true); // Make sure file is in same server
xhr.send(null);
xhr.onreadystatechange = function(){
if (xhr.readyState==4 && xhr.status==200){
var data = JSON.parse(xhr.responseText);
//console.log(data);
var sidebar = document.querySelector("#sidebar");
for(let i = 0; i < data.length; i++){
// data.map(function(){
sidebar.innerHTML += "<button id='accordion"+i+"'>" + data[i].name + "</button>";
sidebar.innerHTML += "<p id='panel"+i+"'>" + data[i].email + data[i].address.city + data[i].company.name + "</p>";
var accordion = document.getElementById('accordion'+i);
var panel = document.getElementById('panel'+i);
accordion.addEventListener('click', function () {
var active = accordion.classList.toggle("active");
//console.log(accordion.classList.contains('active'));
if(active){
panel.style.display = "block";
}else{
panel.style.display = "none";
}
});
}// i for loop ends here
}; // readystate
}; // onreadystatechange
}// onload
Anonymous Asked question May 14, 2021
Recent Comments