Why is collapsible not working for the dynamically created buttons - javascript

I am retrieving the data(question) from the database and setting that value to the button.
When I tried to click on the button it should expand the "answer" to that question but it's not happening. I have completely designed rows in the script itself.
I have created a div in HTML and trying to add the rows dynamically to that div in script.
<div class="accordion" id="accordionExample">
<div id="questions">
</div>
</div>
<script>
var store;
var store_count = 0;
var store_row = document.createElement("div");
db.collection("FAQs").orderBy("Priority","asc").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
var qid = doc.id;
var docRef = db.collection("PopopFAQs").doc(qid);
docRef.get().then(function(doc) {
if (doc.exists) {
console.log("Document data:", doc.data());
store_count++;
store = document.createElement("div");
store.setAttribute("class", "card");
store.setAttribute("id", qid);
if(store_count == 1) {
store.innerHTML = `<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link no-wrap collapsed btn-faqs" type="button"
data-toggle="collapse" data-target="#`+ doc.data().Priority +`"
aria-expanded="false" aria-controls="collapseThree">
<i class="fa fa-arrow-right"></i> `+ doc.data().Question +`
</button>
</h5>
</div>
<div id="`+ doc.data().Priority +`" class="collapse show"
aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">`+ doc.data().Answer +`
</div>
</div>`;
}
else {
store.innerHTML = `<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link no-wrap collapsed btn-faqs" type="button"
data-toggle="collapse" data-target="#`+ doc.data().Priority +`"
aria-expanded="false" aria-controls="collapseThree">
<i class="fa fa-arrow-right"></i> `+ doc.data().Question +`
</button>
</h5>
</div>
<div id="`+ doc.data().Priority +`" class="collapse"
aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">`+ doc.data().Answer +`
</div>
</div>`;
}
store_row.append(store);
document.getElementById("questions").innerHTML = store_row.innerHTML;
} else {
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
});
});
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.parentNode.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}

Related

javascript in django template not working

I'm new in Django, im create product page in Django in product card i add increment decrement add to cart button, but add to cart button work on first product card so,what can i do?
I'm added add to card increment and decrement button using JavaScript why JavaScript only apply on one card product in Django. so, how to resolve when ever i use looping in Django my JavaScript not working or shown in console btn varriable already declared.
{% for i in productskey %}
<div class="col-sm-4">
<div class="product-image-wrapper" style="border:1px solid #ddd ;">
<div class="single-products">
<div class="productinfo text-center">
<a href="{% url 'prodetail' i.id %}">
<img src=" {{i.productImage.url}} " alt="" style="width:255px; height:255px"/>
</a>
<h2>₹{{i.productPrice}}</h2>
<p>{{i.productName}}</p>
<div class="btn">
<button class="mainusbtn">-</button>
<button class="mainbtn" class="btn btn-default" class="fa fa-shopping-cart">ADD TO CART</button>
<button class="plusbtn">+</button>
</div>
<!-- <i class="fa fa-shopping-cart"></i>Add to cart -->
</div>
<!-- <div class="product-overlay">
<div class="overlay-content">
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div> -->
</div>
<!-- <div class="choose">
<ul class="nav nav-pills nav-justified">
<li><i class="fa fa-plus-square"></i>Add to wishlist</li>
<li><i class="fa fa-plus-square"></i>Add to compare</li>
</ul>
</div> -->
</div>
<!-- </a> -->
</div>
<script>
let btn = document.querySelector('.mainbtn');
let pbtn = document.querySelector('.plusbtn');
let mbtn = document.querySelector('.mainusbtn');
btn.addEventListener("click", () => {
if (btn.innerText == 'ADD TO CART') {
btn.innerText = 1;
pbtn.style.display = 'inline-block';
mbtn.style.display = 'inline-block';
}
})
mbtn.addEventListener("click", () => {
if (btn.innerText == 5) {
pbtn.style.display = 'inline-block';
}
if (btn.innerText < 2) {
btn.innerText = 'ADD TO CART';
pbtn.style.display = 'none';
mbtn.style.display = 'none';
} else {
btn.innerText = btn.innerText - 1;
}
})
pbtn.addEventListener("click", () => {
btn.innerText = +(btn.innerText) + +1;
// if(btn.innerText == 5){
// pbtn.style.display = 'none';
// }
})
</script>

I have a "main.js:200 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')" when opening for second time a modal

The first time I click on an image, the modal is correctly loaded, but when I close it and open it again, I have this error:
Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
This is my HTML code:
<div class="modal" tabindex="-1" id="myModal">
<div class="modal-dialog" id="modalDialog">
<div class="modal-content">
<div class="modal-header" id="modalHeader">
<button type="button" class="btn-close" id="btnClose" onclick="CloseModal()" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body px-0" data-bs-interval="false" id="#Model.FirstOrDefault().getNumeroEntrega()">
<div id="C_#Model.FirstOrDefault().getNumeroEntrega()" class="carousel slide carousel-dark" data-bs-interval="false">
<div id="Entrega_#Model.FirstOrDefault().getNumeroEntrega()" class="carousel-inner" data-bs-interval="false">
<!--Creacion del carousel con imagenes-->
<!--Fin del carousel-->
<button class="carousel-control-prev" type="button" data-bs-target="#C_#Model.FirstOrDefault().getNumeroEntrega()" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#C_#Model.FirstOrDefault().getNumeroEntrega()" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
And this my Javascript:
var modal = document.getElementById("myModal");
while (z < result.length) {
var carusel = document.getElementById("Entrega_" + entrega);
if (z == 0) {
var div = document.createElement('div');
div.setAttribute('class', 'carousel-item active');
let btn = document.createElement('button');
btn.setAttribute('class', 'btn btn-primary mt-3');
btn.textContent = "Descargar Imágen";
let im = document.createElement('i');
im.setAttribute('class', 'fa fa-download mx-2');
btn.appendChild(im);
div.appendChild(btn);
var img = document.createElement("img");
img.setAttribute('class', 'img-responsive img-fluid');
img.setAttribute('id', "img01")
//img.setAttribute('src', srcImg)
div.appendChild(img);
img.setAttribute('src', result[z].path);
carusel.appendChild(div);
z++;
}
else {
var div = document.createElement('div');
div.setAttribute('class', 'carousel-item');
let btn = document.createElement('button');
btn.setAttribute('class', 'btn btn-primary');
btn.textContent = "Descargar Imágen";
let im = document.createElement('i');
im.setAttribute('class', 'fa fa-download mx-2');
btn.appendChild(im);
div.appendChild(btn);
var img = document.createElement('img');
img.setAttribute('class', 'img-responsive img-fluid');
img.setAttribute('id', "img01")
div.appendChild(img);
img.setAttribute('src', result[z].path);
carusel.appendChild(div);
z++;
}
}
//'X' button onclick function
function CloseModal() {
let modal = document.getElementById('myModal');
modal.style.display = "none";
modal.remove();
}
This happened after removing a foreach loop in the HTML code, only for accessing the model values, and now I'm using #Model.FirstOrDefault.getNumero() and I have it correctly. I think this is okey but I don't know why I have that error.
The error is in the first carusel.appendChild(div), when z == 0

How can I open a specific image

in my web application I have a gallery of photos.
What I' doing now is to try to open one of them as a modal, and then navigate through all the images with a carousel.
So, what is my problem? I'm unable to open the image I click on it.
For example: if I have 10 photos in my gallery, and I want to open de 4th one, when I click on it it opens the modal-carousel but showing the photo in position 0, making me have to click on the "Next" button to get to that photo.
One idea that came to my mind to fix this problem is to send the position and the src of the photo (each photo has a data-img-show="#cont"), but then how can I tell Javascript that there are previous images?
I'm running out of ideas to fix this problem.
This is my actual image:
<img class="img" id="Image_#cont" src="#pd.getImagePath" onclick="GetImages(#pd.getCode,this)" data-img-mostrar="#pd.getImageCode" />
This is my carousel-modal:
#foreach(var item in Model){
<div class="modal" tabindex="-1" id="myModal">
<div class="modal-dialog" id="modalDialog">
<div class="modal-content">
<div class="modal-header" id="modalHeader">
<button type="button" class="btn-close" id="btnClose" onclick="CloseModal()" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body px-0" data-bs-interval="false" id="#item.getNumeroEntrega()">
<div id="C_#item.getNumeroEntrega()" class="carousel slide carousel-dark" data-bs-interval="false">
<div id="Entrega_#item.getNumeroEntrega()" class="carousel-inner" data-bs-interval="false">
<!--Creacion del carousel con imagenes-->
<!--Fin del carousel-->
<button class="carousel-control-prev" type="button" data-bs-target="#C_#item.getNumeroEntrega()" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#C_#item.getNumeroEntrega()" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
}
And this is my Javascript code:
function GetImagenes(entrega, img){
var z = 0;
var modal = document.getElementById("myModal");
console.log(entrega);
console.log(img);
$.ajax({
method: "GET",
url: "GetPedidoImagenes",
contentType: "aplication/json; Charset=utf-8",
data: { 'entrega': entrega },
async: true,
success: function (result) {
console.log("Longitud: " + result.length);
if (result == 0) {
alert("No hay Imagenes");
}
else {
console.log(result);
while (z < result.length) {
var carusel = document.getElementById("Entrega_" + entrega);
if (z == 0) {
var div = document.createElement('div');
div.setAttribute('class', 'carousel-item active');
let btn = document.createElement('button');
btn.setAttribute('class', 'btn btn-primary');
btn.textContent = "Descargar Imágen";
let im = document.createElement('i');
im.setAttribute('class', 'fa fa-download mx-2');
btn.appendChild(im);
div.appendChild(btn);
var img = document.createElement("img");
img.setAttribute('class', 'img-responsive img-fluid');
img.setAttribute('id', "img01")
//img.setAttribute('src', srcImg)
div.appendChild(img);
img.setAttribute('src', result[z].path);
carusel.appendChild(div);
z++;
}
else {
var div = document.createElement('div');
div.setAttribute('class', 'carousel-item');
let btn = document.createElement('button');
btn.setAttribute('class', 'btn btn-primary');
btn.textContent = "Descargar Imágen";
let im = document.createElement('i');
im.setAttribute('class', 'fa fa-download mx-2');
btn.appendChild(im);
div.appendChild(btn);
var img = document.createElement('img');
img.setAttribute('class', 'img-responsive img-fluid');
img.setAttribute('id', "img01")
div.appendChild(img);
img.setAttribute('src', result[z].path);
carusel.appendChild(div);
z++;
}
}
modal.style.display = "block";
}
console.log(result);
}
})
};

How can I remove this error from my console?

I receive the following error:
Uncaught ReferenceError: notesObj is not defined
at HTMLButtonElement.<anonymous> (apps.js:14)
I could store the object earlier in the local storage and there was no error generated. But after the removal of the 'card' division after 'your notes' it is now difficult for me to remove the error.
//shownotes();
//If user add a note, add it to the local storage
let addBtn = document.getElementById('addBtn')
addBtn.addEventListener('click', function(e) {
let addTxt = document.getElementById('addTxt');
let notes = localStorage.getItem('notes');
if (notes == null) {
notesObj = [];
} else {
nodesObj = JSON.parse(notes);
}
notesObj.push(addTxt.value)
localStorage.setItem('notes', JSON.stringify(notesObj));
addTxt.value = '';
console.log(notesObj);
shownotes();
})
function shownotes() {
let notes = localStorage.getItem('notes');
if (notes == null) {
notesObj = [];
} else {
nodesObj = JSON.parse(notes);
}
let html = '';
notesObj.forEach(function(element, index) {
html += `<div class="card my-3 mx-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Notes ${index + 1}</h5>
<p class='card-text'>${element}</p>
Add Notes
<buttom href="#" class="btn btn-danger my-3">Delete notes</button>
</div>
</div>`
});
let notesElm = document.getElementById('notes')
if (notes.length != 0) {
notesElm.innerHTML = html;
} else {
notesElm.innerHTML = `Nothing to show! Use 'Add notes section above to add notes `
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Make notes!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container my-3 text-center">
<h1>Magic notes</h1>
<div class="card">
<div class="card-body">
<h5 class="card-title">Quick notes</h5>
<div class="form-floating">
<textarea class="form-control" id="addTxt" rows="3" style="height: 100px"></textarea>
<!-- <label for="floatingTextarea2">Add your notes here</label> -->
</div>
<button href="#" class="btn btn-primary my-3" id="addBtn">Add notes</button>
</div>
</div>
</div>
<hr>
<h1 class="text-center">Your notes</h1>
<hr>
<div id="notes" class="row container-fluid">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Well, from the code you provided, it appears to me that you try to use nodesObj before it was ever defined anywhere. I think you meant notesObj. Either define nodesObj like this, or fix the typo.
You may want to do something like
Now my java script code is from here.
var nodesObj = new Array(); // Declare the variable BEFORE using it anywhere.
console.log('This is the notes app.')
//shownotes();
//If user add a note, add it to the local storage
let addBtn = document.getElementById('addBtn')
addBtn.addEventListener('click', function (e) {
let addTxt = document.getElementById('addTxt');
let notes = localStorage.getItem('notes');
if (notes == null) {
notesObj = [];
}
else {
nodesObj = JSON.parse(notes);
}
notesObj.push(addTxt.value)
localStorage.setItem('notes', JSON.stringify(notesObj));
addTxt.value = '';
console.log(notesObj);
shownotes();
})
function shownotes() {
let notes = localStorage.getItem('notes');
if (notes == null) {
notesObj = [];
}
else {
nodesObj = JSON.parse(notes);
}
let html = '';
notesObj.forEach(function (element, index) {
html += `<div class="card my-3 mx-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Notes ${index + 1}</h5>
<p class='card-text'>${element}</p>
Add Notes
<buttom href="#" class="btn btn-danger my-3">Delete notes</button>
</div>
</div>`
});
let notesElm = document.getElementById('notes')
if (notes.length != 0) {
notesElm.innerHTML = html;
}
else {
notesElm.innerHTML = `Nothing to show! Use 'Add notes section above to add notes `
}
}
you write somethings wrong
test it
console.log('This is the notes app.')
//shownotes();
//If user add a note, add it to the local storage
let addBtn = document.getElementById('addBtn')
var nodesObj = new Array();
var notesObj = new Array();
addBtn.addEventListener('click', function (e) {
let addTxt = document.getElementById('addTxt');
let notes = localStorage.getItem('notes');
if (notes == null) {
notesObj = [];
}
else {
nodesObj = JSON.parse(notes);
}
notesObj.push(addTxt.value)
localStorage.setItem('notes', JSON.stringify(notesObj));
addTxt.value = '';
console.log(notesObj);
shownotes();
})
function shownotes() {
let notes = localStorage.getItem('notes');
if (notes == null) {
notesObj = [];
}
else {
nodesObj = JSON.parse(notes);
}
let html = '';
notesObj.forEach(function (element, index) {
html += `<div class="card my-3 mx-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Notes ${index + 1}</h5>
<p class='card-text'>${element}</p>
Add Notes
<buttom href="#" class="btn btn-danger my-3">Delete notes</button>
</div>
</div>`
});
let notesElm = document.getElementById('notes')
if (notes.length != 0) {
notesElm.innerHTML = html;
}
else {
notesElm.innerHTML = `Nothing to show! Use 'Add notes section above to add notes `
}
}

array does not fetch the data in HTML?

I'm trying to make the news list more dynamic , so i tried to make it in array and loop on the categories but unfortunately the function getw () does not fetch the data ?
<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-5">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId"
aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto ml-2 mt-lg-0" id="line">
</ul>
</div>
</nav>
<div class="container">
<div class="row" id="posts-row">
</div>
</div>
java script code
var list = ["General", "Entertainment", "Health", "Science", "Sports", "Technology"];
function getw() {
var lines = "";
for (var i = 0; i < list.length; i++) {
lines += `<li>
<a class='nav-link' href='#'>` + list[i] + `</a>
</li>`
}
document.getElementById("line").innerHTML = lines; (not working i don't know why ?)
}
getdata("general")
var links = document.getElementsByClassName("nav-link");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function (e) {
var currentCat = e.target.text;
getdata(currentCat.toLowerCase())
})
}
var data;
function getdata(category) {
var httpReq = new XMLHttpRequest();
httpReq.open("GET", "http://newsapi.org/v2/top-headlines?country=eg&category=" + category + "&apiKey=d4f87946d7fc4322be9c2089316d5625");
httpReq.send();
data = [];
httpReq.addEventListener("readystatechange", function () {
if (httpReq.readyState == 4) {
data = JSON.parse(httpReq.response).articles;
Display();
}
})
}
function Display() {
var temp = "";
for (var i = 0; i < data.length; i++) {
temp += `<div class ='col-md-4'>
<div>
<img src=`+ data[i].urlToImage + ` class='img-fluid'>
<h4>`+ data[i].title + `</h4>
<p>`+ data[i].description + `</p>
</div>
</div>`
}
document.getElementById("posts-row").innerHTML = temp;
}
.............................................................................................///////////////////////////////////////////
At least in the code you posted, you are not invoking the getw function.
Try adding getw() at the end of your JavaScript.

Categories

Resources