The problem is that getelementbyclass is resetting when the add to cart button is clicked its only storing one at a time i want it to store multiple i had similar problem with grand total but fixed it but i cannot use the same logic to it since it will get me nan any help ?
var addtocartbuttons = document.getElementsByClassName(`cart`)
for (let i = 0; i < addtocartbuttons.length; i++) {
var button = addtocartbuttons[i]
button.addEventListener(`click`, lang1)
}
function lang1(event) {
var target = event.srcElement;
var button = event.target
var shopitem = button.parentElement.parentElement.parentElement
var title = shopitem.getElementsByClassName(`title`)[0].innerText;
console.log(title)
res2 = document.getElementsByClassName(`result2`)
res2.textContent = title
console.log(res2)
}
<div class="product-categorie-box">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="grid-view">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-4">
<div class="products-single fix">
<div class="box-img-hover">
<img src="../../petuta/pizza/margerita.jpg" class="img-fluid" alt="Image">
<div class="mask-icon">
<ul>
<li><i class="fas fa-eye"></i></li>
<li><i class="fas fa-sync-alt"></i></li>
<li><i class="far fa-heart"></i></li>
</ul>
<a class="cart" href="#">Add to Cart</a> </div>
</div>
<div class="why-text">
<h4 class="title" id="title1"> Kids</h4>
<h5 class = "price"> €6.00</h5>
</div>
</div>
</div>
but when button is pressed the text content in res2 despairs and put the new data any ideas?
Here is the console.log:
(HTMLCollection [div.result2, textContent: "Olives"]
0: div.result2
length: 1
textContent: "Olives")
The array only stays of the length of 1 I want it to keep storing how can I do that? I want to store the text content in res2 even when the button is clicked.
I'm making a website which sends email with an order, and when I send email only the first one get sends and even in the console it appears the length of 1 then gets reset when add to cart button is clicked.
ps.
i have 33 of these product-categorie-box so I would need some fix
I didnt use get element by id i used get element by class yet i still get one only can
ps i tried
for(var i = 0; i < elems.length; i++) {
var elems = elems[i];
element2= elems.getElementsByClassName(`result2`)[0]
console.log(element2)
}
but still same problem
I manged to get a fix with the help of barmar
function lang1(event) {
var target = event.srcElement;
var button =event.target
var shopitem = button.parentElement.parentElement.parentElement
var title = shopitem.getElementsByClassName(`title`)[0].innerText;
var node =document.createElement("LI"); // Create a <li> node
var textnode =(`${title}`)
node.innerHTML=textnode
// Create a text node // Append the text to <li>
var cnode=document.getElementsByClassName("result2")[0]
cnode.prepend(node)
console.log(cnode.textContent)
Related
I want to change icon with every click. This code is worked But just first click. With every click after the first click, nothing happens. If i delete the if & else the click is work with every click. What is the problem ?
#foreach (var item in Model)
{
<div class="item col-lg-4 col-md-6 col-xs-12 landscapes sale" style="padding-right:15px;padding-left:15px;" data-id="#item.Id">
<div class="project-single" data-aos="fade-up">
<div class="project-inner project-head">
<div class="homes">
<!-- homes img -->
<div href="single-property-1.html" class="homes-img">
<div class="add-favorite">
<i class="far fa-heart"></i>
</div>
#if (item.Document == true)
{
<div class="homes-tag button alt featured">Document</div>
}
<div class="homes-price">$ #String.Format(new CultureInfo("hr-HR"), "{0:# ##0}", item.Price)</div>
<img src="~/EstateImages/#item.MainImage" alt="home-1" class="img-responsive">
</div>
</div>
</div>
<!-- homes content -->
</div>
</div>
}
<script type="text/javascript">
let announcements = document.querySelectorAll(".item")
let favoriteAnnouncementsText = localStorage.getItem("favorites")
let favoriteAnnouncements;
if (favoriteAnnouncementsText != null){
favoriteAnnouncements = favoriteAnnouncementsText.split("-");
}
for (let i = 0; i < announcements.length; i++) {
announcements[i].querySelector(".add-favorite i").addEventListener('click', function(e){
if (this.getAttribute("class") == "fas fa-heart"){
announcements[i].querySelector(".add-favorite").innerHTML = '<i class="far fa-heart"></i>'
}
else if (this.getAttribute("class") == "far fa-heart"){
announcements[i].querySelector(".add-favorite").innerHTML = '<i class="fas fa-heart"></i>'
}
})
}
</script>
In your event handler, you replace the element for which the click handler is defined by setting the .innerHtml property of the parent element. The html fragment is parsed and integrated into the DOM but that does not preserve the event handler definitions associated with the original element.
Change your event handler to
this.classList.toggle("fas");
this.classList.toggle("far");
This toggles both classes on the i element with each click which is equivalent to switching between those classes on each click. Other classes (ie. fa-heart) are not affected. No modification of the DOM structure is necessary.
Ref:
MDN: Web API - classList
MDN: Web API - DOMTokenList
I want to create a list of button where once clicked, it will shows the respective div as below. And in the div, there is a few links that user can click, and once they clicked the link and go back, it will bring them back to the previous div instead of the first default div. Codes as below.
<div class="tab">
<a class="tablinks btn" href="#m0" id="t0">Item A</a>
<a class="tablinks btn" href="#m1" id="t1">Item B</a>
<a class="tablinks btn" href="#m2" id="t2">Item C</a>
</div>
<div class="tlist">
<div id="m0" class="tdiv" style="display:block;">
LinkA</div>
<div id="m1" class="tdiv" style="display:none;">
LinkB</div>
<div id="m2" class="tdiv" style="display:none;">
LinkC</div>
</div>
I have Javascript codes that will change the display from none to block when user clicked on the Item.
document.getElementById("m0").style.display = "block";
document.getElementById("t"+i).addEventListener('click',divStyle.bind(this,"m"+i),false);
function divStyle(num) {
var i,tdiv,tablinks;
tdiv = document.getElementsByClassName("tdiv");
for (i=0;i<tdiv.length;i++) {
tdiv[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i=0;i<tablinks.length;i++) {
tablinks[i].className = tablinks[i].className.replace(" active","");
}
document.getElementById(num).style.display = "block";
Event.className += "active";
}
//print tab for Item
function printTab(itemnum) {
for (var y = 0; y < itemnum; y++) {
tabbtn = document.createElement("a");
tabbtn.classList.add("tablinks", "btn", "btn-secondary");
tabbtn.setAttribute("href", "#m" + y);
tabbtn.setAttribute("id", "t" + y);
if (y == 0) {
tabbtn.classList.add("tablinks", "btn", "btn-secondary", "active");
}
tabtxt = document.createTextNode(""); //print Item text here
tabbtn.appendChild(tabtxt);
document.getElementById("tab").appendChild(tabbtn);
}
//print div for Link
function printLink(num) {
var docFrag = document.createDocumentFragment();
for (var i = 0; i < Object.keys(obj).length; i++) {
moddiv = document.createElement("div");
moddiv.setAttribute("id", "m" + num);
moddiv.setAttribute("class", "tdiv");
moddiv.style.display = "none";
for (var i = 0; i < Object.keys(obj).length; i++) {
/*do something here and put link of each item*/
}
moddiv.appendChild(docFrag);
document.getElementById("tlist").appendChild(moddiv);
}
The problem I have now is that when LinkC is clicked, and user then pressed Back button in the browser, browser goes back to the link of the previous specific div, for example, page.html#m2 but shows div m0. I guess this is because I already set document.getElementById("m0").style.display = "block"; by default so it will always go to div m0 but is there other way to make sure the browser will go back to the previous specific div chosen?
My google finding shows people suggesting history.back() but that means I need to create a Back button but I do not want that. I am sure this is not a complicated issue but I can't think anymore on how to solve this.
Any help is very appreciated. Thank you!
Update: I tried to use history.back() and created a button but this also is not working as it still display div m0. :(
Update #2: Tried this on Firefox and it is working though. Is there another way to make sure it can work for different browser?
Please try the bellow code :
<div class="tab">
<a class="tablinks btn active" href="#m0" id="t0">Item A</a>
<a class="tablinks btn" href="#m1" id="t1">Item B</a>
<a class="tablinks btn" href="#m2" id="t2">Item C</a>
</div>
<br>
<div class="tlist">
<div id="m0" class="tdiv" style="display:block;">
LinkA</div>
<div id="m1" class="tdiv" style="display:none;">
LinkB</div>
<div id="m2" class="tdiv" style="display:none;">
LinkC</div>
</div>
<style>
a{color:#333;text-decoration: none;background: #eee;border: 1px solid #333;border-radius:5px;padding:3px;}
.active{color:blue;background: #ccc;}
</style>
<script type="text/javascript">
var tabSelect=(url)=>{
console.log(url);
let hs = url.split('#')[1]||'m0',ts = hs.split('m').join('t');
if(hs!=''){
let tabcs = document.getElementsByClassName('tdiv');
for(let tabc of tabcs){if(tabc.id){tabc.style.display='none';}}
let tabhs = document.getElementsByClassName('tablinks');
for(let tabh of tabhs){if(tabh.id){tabh.className="tablinks btn"}}
let c = document.getElementById(hs);
if(c){c.style.display = 'block';document.getElementById(ts).className="tablinks btn active"}
}
}
window.onhashchange=(i)=>{tabSelect(i.newURL);}
window.onload=()=>{tabSelect(location.href);}
</script>
Hope you will be fine with this code.
I am writing a jquery function to filter products by type. It works perfectly fine but when I filter by type more than once. Html Element of product-box named addToWishlist stop working.
otherwise all products are displayed perfectly fine.
Cant figure out where is the problem.
Here is the code
//load products data in array
var productArray = [];
$("#product-items .col-4").each (function (){
productArray.push($(this)) })
$(".filter-btn").click(function(e) {
var btnId = e.target.id;
var tempArray = [];
for(var i = 0;i < productArray.length; i++){
var type = $(productArray[i]).find('.addToWishlist').data("type");
if(btnId == "fairness-soaps" && type == "Fairness")
tempArray.push(productArray[i])
if(btnId == "deep-clean-soaps" && type == "Deep-Clean")
tempArray.push(productArray[i])
if(btnId == "skin-whitening-soaps" && type == "Skin-Whitening")
tempArray.push(productArray[i])
}
$("#product-items").html(tempArray);
});
<div class="row" id="product-items">
<div class="col-4">
<a href="#">
<div class="product-box">
<div class="product-img">
<img src="images/product-img13.png" alt="">
<a type="button" class="addToWishlist" data-id="13" data-image="images/product-img13.png" data-price="$30"
data-name="Aloe Vera Soap" data-quantity="1" data-weight="50g" data-availability="In Stock" data-type="Fairness">
<i class="wishlist-icon fa fa-heart-o"></i></a>
</div>
<p class="product-name">Aloe Vera Soap</p>
<p class="product-price">$30</p>
</div>
</a>
</div>
and so on....
You're not reordering the product Elements, you're rewriting them. Even though the HTML of the products is the same, the events you attach to them is lost when you call $("#product-items").html(tempArray);. You either need to reapply the events to the "addToWishList" buttons or reorder the elements instead of writing directly to the html.
Here's a contrived example that shows how just because the HTML is the same doesn't mean the event stays:
<div id="container">
<button id="special-button">Click me</button>
</div>
<script>
$("#special-button").on("click", function(){
alert("I've Been clicked!");
});
$("#container").html(`<button id="special-button">Click me</button>`);
</script>
I created a link node with javascript, appended it to the body and gave it a class of 'heart'.
They are visible in the browser and when I inspect, I can see that they have the class name 'heart'.
However, when I try to access them by the method getElementsByClassName and console.log() the resuly, it returns all of them as undefined, as if they don't exist.
Here is my whole code:
body.appendChild(imagebox);
for (var i = 9; i <= 16; i++) {
var imagebox = document.createElement("div");
imagebox.classList.add("imagebox");
var heart = document.createElement("a");
heart.innerHTML = "❤";
heart.classList.add("heart");
imagebox.appendChild(heart);
}
var hearts = document.getElementsByClassName("heart");
console.log(hearts[9]);
<div class="imagebox">
<a class="heart">❤</a>
</div>
<div class="imagebox">
<a class="heart">❤</a>
</div>
<div class="imagebox">
<a class="heart">❤</a>
</div>
<div class="imagebox">
<a class="heart">❤</a>
</div>
<div class="imagebox">
<a class="heart">❤</a>
</div>
<div class="imagebox">
<a class="heart">❤</a>
</div>
<div class="imagebox">
<a class="heart">❤</a>
</div>
<div class="imagebox">
<a class="heart">❤</a>
</div>
I get in the console that it is undefined.
What I wanted to mention which kinda complicates whole thing is that I created first 8 elements of class heart in html code, and after that, I created another 24 in javascript and gave them all the same class name.
I think you should insert body.appendChild(imagebox) into the for loop
const body = document.querySelector('body');
for (var i = 9; i <= 16; i++) {
var imagebox = document.createElement("div");
imagebox.classList.add("imagebox");
var heart = document.createElement("a");
heart.innerHTML = "❤";
heart.classList.add("heart");
imagebox.appendChild(heart);
body.appendChild(imagebox);
}
var hearts = document.getElementsByClassName("heart");
console.log(hearts[9]);
Solved the issue,athough i dont understand it,if someone could explain me why this works would be great.
This whole javascript code was inside file all_product.js in that file i this javacript code was wrapped with window.addEventListener("scroll",function(){}),where i created this loop and links.When i put console.log(hearts[9]); at the bottom of the page it didnt work,but when i putted inside window.addEventListener it works as normal.
I have code something like:
var iconContainer = document.getElementById('iconContainer');
var icon = iconContainer.getElementsByClassName("item");
for (var i = 0; i < icon.length; i++) {
icon[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
<form>
<header>
<div class="icon-line" id="iconContainer">
<div class="item active" id="">
<div class="group-icon">
<i class="fas fa-hdd"></i>
</div>
<span>SSD</span>
</div>
<div class="item" id="">
<div class="group-icon">
<i class="fas fa-server"></i>
</div>
<span>EKRAN KARTI</span>
</div>
<div class="item" id="">
<div class="group-icon">
<i class="fas fa-microchip"></i>
</div>
<span>İŞLEMCİ</span>
</div>
<div class="item" id="">
<div class="group-icon">
<i class="fas fa-memory"></i>
</div>
<span>RAM</span>
</div>
</div>
</header>
</form>
Also I have a selection.js that changes selected item's class from class="item" to class="item-active"
How can controll the selected item by using it's data?
I want to search in my data by using selected item. For exapmle, you selected SSD, so that, I will search on my SSD.json file or you selected RAM, I will search on my ram.js
How can do this?
Note: I'm using Node.js on server side.
Ok, firstly you have a for loop that change item's class to "active" one, we will continue adding code there.
var iconContainer = document.getElementById('iconContainer');
var icon = iconContainer.getElementsByClassName("item");
for (var i = 0; i < icon.length; i++) {
icon[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
// ADD CODE HERE
});
}
You'll have to do 2 things: get the selected item's value and send it to server by making a searh request with the value as params.
Get the selected item's value by getting the 's innerText:
...
// ADD CODE HERE
var value = this.getElementsByTagName("span")[0].innerText;
And make a get request with the value with fetch API (or any libs that support make xhr request):
...
// ADD CODE HERE
var value = this.getElementsByTagName("span")[0].innerText;
fetch(`URL_TO_SERVER/?params=${value}`)
.then(res => {
// do what you want with search result
}
The rest is your server's work to handle the request, take params, search on respective file and return the search result to client.
That's all.
In better way, instead of using value from innerText as param, you should use data-attribute for better request. You can read here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes