Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 days ago.
Improve this question
enter image description hereI'm building a shopping cart for a website but for some reason when i click add to cart button everything related to that product shows up in the cart page except the image of that product. here is the code in my php:(Ive cut out product details section)
<div class="thumbnail object-cover">
<a href="#">
<img class="product-img" src="tv/samsung/au8000/55.jpeg" alt="">
</a>
</div>
<div class="thumbnail object-cover">
<a href="#">
<img class="product-img" src="tv/oled/x75k/43.jpeg" alt="">
</a>
</div>
For my javascript:
function handle_addCartItem(){
let product = this.parentElement;
let title = product.querySelector(".main-links").innerHTML;
let price = product.querySelector(".current").innerHTML;
let productImgs = document.getElementsByClassName("product-img");
let imgSrc = [];
for (let i = 0; i < productImgs.length; i++) {
imgSrc[i] = productImgs[i].src;
}
console.log(title, price, imgSrc);
let newToAdd = {
title,
price,
imgSrc,
};
//Add product to cart
let cartBoxElement = CartBoxComponent(title, price, imgSrc);
let newNode = document.createElement("div");
newNode.innerHTML = cartBoxElement;
const cartContent = cart.querySelector(".cart-content");
cartContent.appendChild(newNode);
update();
}
function CartBoxComponent(title, price, imgSrc) {
return `
<div class="cart-box">
<img src=${imgSrc} alt="" class="cart-img">
<div class="detail-box">
<div class="cart-product-title">${title}</div>
<div class="cart-price">${price}</div>
<input type="number" value="1" class="cart-quantity">
</div>
<!--REMOVE CART-->
<i class="fa-solid fa-trash cart-remove"></i>
</div> `
}
Ive checked numerous solutions but none seem to work. I thought it was maybe the file path but they all seem to be correct. Any kind of help will be appreciated. Thank you in advance.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
const setupProducts = (data) => {
if (data.length) {
let html = '';
data.forEach(doc => {
const product = doc.data();
const li = `
<li>
<div class="collapsible-header grey lighten-4"> ${product.title} </div>
<div class="collapsible-header grey lighten-4"> ${doc.id} </div>
<div class="collapsible-body white"> ${product.content}
<a href="" class="secondary-content">
<a class="btn orange modal-trigger" >Get ID</a>
</a>
</li>
`;
html += li;
});
productList.innerHTML = html
} else {
productList.innerHTML = '<h5 class="center-align">Login to view products</h5>';
}
};
My idea is that i whant to get the ID by clicking on the document and then but the product.title in db.collection('activeWorks').doc(doc.id or product.id(I don't know whats right...)).set. I have no idea how to do this,please help
You can achieve this by adding an onclick attribute to an element. This attribute takes a string as a value and this string will be interpreted as code upon clicking. I added the onclick to the <a> at the end and your <li> should look like this:
const li = `
<li>
<div class="collapsible-header grey lighten-4"> ${product.title} </div>
<div class="collapsible-header grey lighten-4"> ${doc.id} </div>
<div class="collapsible-body white"> ${product.content}
<a href="" class="secondary-content">
<a class="btn orange modal-trigger" onclick="console.log(${product.id})">Get ID</a>
</a>
</li>
`;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I cannot make a function that would let me go to the next div.
I've tried some thing but I just couldn't make it work for some reason
<button type="button" name="button" onclick="arrowLeft()" id="arrowLeft">Prev</button>
<button type="button" name="button" onclick="arrowRight()" id="arrowRight">Next</button>
<div class="monsterTabs" id="monsterTabs">
<div class="monsterType" id="monsterSlime" style="display:block;">
Slime
</div>
<div class="monsterType" id="monsterZombie" style="display:none;">
Zombie
</div>
<div class="monsterType" id="monsterSkeleton" style="display:none;">
Skeleton
</div>
<div class="monsterType" id="monsterWolf" style="display:none;">
Wolf
</div>
</div>
https://jsfiddle.net/gfx873ve/3
I want to know the best way to make it so i can go through the divs without a problem.
You can get a collection of all monsters by using document.getElementsByClassName('monsterType'); then update the display property of each one when you call the arrowLeft and arrowRight functions.
I used a monsterId variable to control which monster is currently displayed. Each element in monsters has its display property set to none unless it is the monsterId-th element in the list.
The monsterId = (monsterId + monsters.length) % monsters.length; line uses the modulus (%) operator to make sure the monsterId is always between 0 and monsters.length - 1.
let monsters = document.getElementsByClassName('monsterType');
let monsterId = 0;
function arrowLeft() {
updateMonster(-1);
}
function arrowRight() {
updateMonster(1);
}
function updateMonster(direction) {
monsterId += direction;
monsterId = (monsterId + monsters.length) % monsters.length;
for(var i = 0; i < monsters.length; i++){
monsters[i].style.display = i === monsterId ? 'block' : 'none';
}
}
<button type="button" name="button" onclick="arrowLeft()" id="arrowLeft">Prev</button>
<button type="button" name="button" onclick="arrowRight()" id="arrowRight">Next</button>
<div class="monsterTabs" id="monsterTabs">
<div class="monsterType" id="monsterSlime" style="display:block;">
Slime
</div>
<div class="monsterType" id="monsterZombie" style="display:none;">
Zombie
</div>
<div class="monsterType" id="monsterSkeleton" style="display:none;">
Skeleton
</div>
<div class="monsterType" id="monsterWolf" style="display:none;">
Wolf
</div>
</div>
Im making a prototype for a website. I want to showcase that the user can choose between three images and pick a favorite image.
I made it with innerhtml, to showcase the user has picked a favorite, the text changes. The problem is now you can vote as many times as you want. I want it to be that you can only pick one image.
function myKeuze() {
document.getElementById("keuzeVerhaal").innerHTML = "What is your favorite picture?";
}
function Sien() {
document.getElementById("uitslag").innerHTML = "Your vote is: Sien!";
}
function Pien() {
document.getElementById("uitslag").innerHTML = "Your vote is: Pino!";
}
function Aart() {
document.getElementById("uitslag").innerHTML = "Your vote is: Aart!";
}
<section id="Three" class="main style1 dark fullscreen">
<div class="content container 75%">
<header>
<h2 id="uitslag">Choose your favorite</h2>
<h3 id="keuzeVerhaal">Which picture do you like most??</h3>
</header>
<img src="sien.png" width="30%" onclick="myKeuze();Sien()" />
<img src="pien.png" width="30%" onclick="myKeuze();Pien()" />
<img src="aart.png" width="30%" onclick="myKeuze();Aart()" />
</div>
</section>
I added a function that gets called on click called stopVoting this function once called will prevent the images from being clicked any further.
The method bellow works by looping through all the images and turning their onclick attribute to null that way clicking them will do nothing in the future.
function myKeuze() {
document.getElementById("keuzeVerhaal").innerHTML = "What is your favorite picture?";
}
function Sien() {
document.getElementById("uitslag").innerHTML = "Your vote is: Sien!";
stopVoting();
}
function Pien() {
document.getElementById("uitslag").innerHTML = "Your vote is: Pino!";
stopVoting();
}
function Aart() {
document.getElementById("uitslag").innerHTML = "Your vote is: Aart!";
stopVoting();
}
function stopVoting(){
var images = document.querySelectorAll('#Three img');
for( var i = 0; i < images.length; i++){
images[i].onclick = null;
}
}
<section id="Three" class="main style1 dark fullscreen">
<div class="content container 75%">
<header>
<h2 id="uitslag">Choose your favorite</h2>
<h3 id="keuzeVerhaal">Which picture do you like most??</h3>
</header>
<img src="sien.png" width="30%" onclick="myKeuze();Sien()" />
<img src="pien.png" width="30%" onclick="myKeuze();Pien()" />
<img src="aart.png" width="30%" onclick="myKeuze();Aart()" />
</div>
</section>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a slider with 4 images, and I want to use the slider markup, to generate thumbnails on another part of my document. For this case I used data attributes with the needed information for the thumbnails.
Here is the Code from the Slider Part:
<div id="sliderWrapper">
<div id="slider">
<div class="image" data-slide="1" data-thumb="thumb1.jpg" style="background-image: url('slide1.jpg');"></div>
<div class="image" data-slide="2" data-thumb="thumb2.jpg" style="background-image: url('slide2.jpg');"></div>
<div class="image" data-slide="3" data-thumb="thumb3.jpg" style="background-image: url('slide3.jpg');"></div>
<div class="image" data-slide="4" data-thumb="thumb4.jpg" style="background-image: url('slide4.jpg');"></div>
</div>
</div>
This Markup should be used, to generate the following:
<div id="sliderThumbs">
<a class="item" data-slide="1" style="background-image: url('thumb1.jpg');"></a>
<a class="item" data-slide="2" style="background-image: url('thumb2.jpg');"></a>
<a class="item" data-slide="3" style="background-image: url('thumb3.jpg');"></a>
<a class="item" data-slide="4" style="background-image: url('thumb4.jpg');"></a>
</div>
The question is, how I could "copy" and "modify" the markup.
My first try was to get the children of the slider div using jquery:
var images = $('#slider').children('div').map(function(){
console.log($(this).attr('src'));
}).get();
But this isn't working so good. I hope someone can help me to achieve this. How can I get all four divs and use the data attributes to generate the needed markup?
Thanks!
Use find/attribute setting to create a new element based upon the source element and use $.append() to add it onto the target element...
Here's a fiddle with a working solution
$("div.image").click(function(e){
var clicked = $(e.target);
var imageURL= "url('" + clicked.attr("data-thumb") + "')";
var toAppend = $("<a>")
.attr("data-slide", clicked.attr("data-slide"))
.css("background-image", imageURL)
.addClass("item")
.text("added "+ clicked.text());
$("#sliderThumbs").append(toAppend);
});
Edited the fiddle to do on document load for each div.
$("div.image").each(function(index, d){
var div = $(d);
var imageURL= "url('" + div.attr("data-thumb") + "')";
var toAppend = $("<a>")
.attr("data-slide", div.attr("data-slide"))
.css("background-image", imageURL)
.addClass("item")
.text("added "+ div.text());
$("#sliderThumbs").append(toAppend);
});
$(function(){
var count = 1;
var img = $('#slider > .image').each(function(){
if($(this).attr('data-thumb')){
var vimg = $(this).attr('data-thumb');
var data = "<a class='item' data-slide='"+count+"' style='background-image: url("+vimg +")';></a>"
console.log(data);
count++;
};
});
});
Is it possible to change the text "mars-on-newyork" from this links, this is how the links looks like:
<ul>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-red"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-green"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-blue"/>
</a>
</li>
</ul>
This code changes my images only:
function changeIt(objName) {
var obj = document.getElementById(objName);
var objId = new Array();
objId[0] = "newyork";
objId[1] = "paris";
objId[2] = "tokyo";
var i;
var tempObj;
for (i = 0; i < objId.length; i++) {
if (objName == objId[i]) {
obj.style.display = "block";
} else {
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
and here is the rest of the html from which the java script changes only the pictures:
<div id="newyork">
<a href="#">
<img src="newyork.jpg"/>
</a>
</div>
<div id="paris" style="display:none">
<img src="paris.jpg" border="0" alt="one"/>
</div>
<div id="tokyo" style="display:none">
<img src="tokyo.jpg" border="0" alt="two" />
</div>
<div style="display:none;">
<a id="one" href="#" onclick="changeIt('newyork');"><img src="newyork.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="two" href="#" onclick="changeIt('tokyo');"><img src="tokyo.jpg" border="0" alt="two"/></a>
</div>
If i click on
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
i want the text from the links on the ul to change from this:
href="google.com/finder.php?offer=mars-on-newyork
to this:
href="google.com/finder.php?offer=mars-on-paris
and if i click on
<a id="one" href="#" onclick="changeIt('tokyo');"><img src="paris.jpg" border="0" alt="one"/></a>
it changes it to
href="google.com/finder.php?offer=mars-on-tokyo
i want the java script to work like it does, how it changes the images but i also want to take advantage of the click to change the text.
thanks!
I see how it is now, i guess my post wasn't good enough to have piqued you're interest's, i guess i would have to pay a freelancer to help me, thanks anyways guys for your time and help!
Quick answer to "Is it possible to add or change and id from a link?":
$('#link').attr('id', 'yourNewId'); // Change id
Quick solution to "What I also want is not to just change the images but also the id or link"
$('#link').attr('href', 'yourNewUrl'); // Change link
I'm finding it a little hard to understand what you're trying to do, but...
what i also want is not to just change the images but also the id or link from the ul list e.g
OK, to change the link, i.e., the href property of all anchor elements in your ul list, assuming the URL has a fixed format and we can just replace whatever comes after the last "-":
// assume objName = "paris" or whatever
$("ul a").attr("href", function(i, oldVal) {
return oldVal.substr(0, oldVal.lastIndexOf("-") + 1) + objName;
});
If you pass the .attr() method a callback function it will call that function for each element and pass the function the current value - you then return the new value.
The elements in question don't seem to have an id at the moment, so I'm not sure what you mean by wanting to change it.