what can ı do for this error help!
Hello!
You could start by sharing the complete error and your code 
.
1 Like
function Home() {
const thumbs=document.getElementsByClassName(".thumb-img").children;
function changeImage(event){
document.querySelector(".pro-img").src=event.c[0].src
for(let i=0; i<thumbs.length;i++){
thumbs[i].classList.remove("active");
}
event.classList.add("active");
}
return (
<div>
<div className="carousel-wrapper">
<span id="item-1"></span>
<span id="item-2"><a href="#sectionid1"></a></span>
<span id="item-3"><a href="#sectionid1"></a></span>
<div className="carousel-item item-1">
<a className="arrow arrow-prev" href="#item-3"></a>
<a className="arrow arrow-next" href="#item-2"></a>
</div>
<div className="carousel-item item-2">
<a className="arrow arrow-prev" href="#item-1"></a>
<a className="arrow arrow-next" href="#item-3"></a>
</div>
<div className="carousel-item item-3">
<a className="arrow arrow-prev" href="#item-2"></a>
<a className="arrow arrow-next" href="#item-1"></a>
</div>
</div>
<section id="sectionid1" datatype="section1data" className="section1">
<div id="photo1"></div>
<h1 id="headh1">Wireless Phone Charger for Cars </h1>
<p id="choosecolor">Color -</p>
<div className="product">
<div className="main-img">
<img src="/assets/silver-open.png" className="pro-img" alt="product" />
</div>
<div className="thumb-img">
<div className="box active" onClick={() => changeImage(this)}>
<img src="/assets/gold-open.png" alt="thumb" />
</div>
<div className="box" onClick={() => changeImage(this)}>
<img src="/assets/gold-closed.png" alt="thumb" />
</div>
<div className="box" onClick={() => changeImage(this)}>
<img src="/assets/silver-closed.png" alt="thumb" />
</div>
</div>
</div>
<div id="buynow"><a href="/">Buy Now</a></div>
<div id="addtocart"><a href="/">Add to cart</a></div>
</section>
<section className="second-section">
<div>
</div>
</section>
</div>
);
}
export default Home
getElementsByClassName returns an array, hence children will always be undefined. Besides that, you need to remove the . in front of the class:
document.getElementsByClassName('the-class') //Correct
document.getElementsByClassName('.the-class') // Incorrect
1 Like
before this it was having queryselector and its still giving that error I erased the dot heres the before classname
import React from 'react'
import './Home.css'
import $ from "jquery";
function Home() {
const thumbs=document.querySelector(".thumb-img").children;
function changeImage(event){
document.querySelector(".pro-img").src=event.children[0].src
for(let i=0; i<thumbs.length;i++){
thumbs[i].classList.remove("active");
}
event.classList.add("active");
}
return (
<div>
<div className="carousel-wrapper">
<span id="item-1"></span>
<span id="item-2"><a href="#sectionid1"></a></span>
<span id="item-3"><a href="#sectionid1"></a></span>
<div className="carousel-item item-1">
<a className="arrow arrow-prev" href="#item-3"></a>
<a className="arrow arrow-next" href="#item-2"></a>
</div>
<div className="carousel-item item-2">
<a className="arrow arrow-prev" href="#item-1"></a>
<a className="arrow arrow-next" href="#item-3"></a>
</div>
<div className="carousel-item item-3">
<a className="arrow arrow-prev" href="#item-2"></a>
<a className="arrow arrow-next" href="#item-1"></a>
</div>
</div>
<section id="sectionid1" datatype="section1data" className="section1">
<div id="photo1"></div>
<h1 id="headh1">Wireless Phone Charger for Cars </h1>
<p id="choosecolor">Color -</p>
<div class="product">
<div class="main-img">
<img src="/assets/silver-open.png" class="pro-img" alt="product" />
</div>
<div class="thumb-img">
<div class="box active" onClick={() => changeImage(this)}>
<img src="/assets/gold-open.png" alt="thumb" />
</div>
<div class="box" onClick={() => changeImage(this)}>
<img src="/assets/gold-closed.png" alt="thumb" />
</div>
<div class="box" onClick={() => changeImage(this)}>
<img src="/assets/silver-closed.png" alt="thumb" />
</div>
</div>
</div>
<div id="buynow"><a href="/">Buy Now</a></div>
<div id="addtocart"><a href="/">Add to cart</a></div>
</section>
<section className="second-section">
<div>
</div>
</section>
</div>
);
}
export default Home
you want to change the onClick to onClick={changeImage} to get the event
1 Like
that didnt work out ı changed it to normal removed “this” please hellp
what do you want to happen, when you click an image you want it to appear on the pro-img?
1 Like
Im currently making a react ecommerce website and ı wanted to make a color picker for the product and when the color is choosed the image shouls change depending on the color if you have an alternative ı can use it too
1 Like
You should have the images in an array then loop over them and then when clicked send the image to state and have the main image src set to that state, i will send a example if you dont know what i mean
1 Like
ı dont know javascript btw
That’s because you’re querying the component before it loads.
Every time you query the .thumb-img it’s null. You should move it inside your changeImage and remove the this keyword as @biscuitmanz suggested.
1 Like
heres a little example
const [colors] = useState([
"/assets/gold-open.png",
"/assets/gold-closed.png",
"/assets/silver-closed.png"
])
const [chosenColor, setChosenColor] = useState(colors[0])
<div className="product">
<div className="main-img">
<img
src={chosenColor}
className="pro-img"
alt="product"
/>
</div>
<div className="thumb-img">
{colors.map((color, i) => (
<div className="box active" key={i} onClick={() => setChosenColor(color)}>
<img src={color} alt="thumb" />
</div>
))}
</div>
</div>
you will also need to import useState at the top too import React, {useState} from "react";
1 Like
This is an issue because React doesn’t do much that is not pure JavaScript (not the DOM API). You are trying to use DOM manipulation functions (ie the ones provided by the browser, not built into JS). jQuery is just a library on top of those. This is not how you program React applications and you are just causing yourself problems.
Go through a React tutorial (eg the one on the React website). Stop trying to use jQuery and the document query functions – you already have direct access to the things you want to manipulate in the React code, you are massively complicating things by trying to query a document that doesn’t really exist in the code you have there.
As I said in the other thread, the stuff that looks like HTML there is not HTML, it’s a way of writing JS functions that will eventually produce HTML via a different library (not React itself). To make it work smoothly with the document query functions you need to use things called refs, and for your usecase you neither want nor need to use them.
I feel like you’re just copy-pasting things together without any understanding of how anything works – if you re going to use React, you need to get a bit more comfortable with how to use it.
3 Likes
thank you so much you saved my life thanks
1 Like
ı figured that out thanks a lot Im kinda taking your time a bit but if you are not busy can you also make when changes to other color the buy buttons link should change ex. ı clicked gold when ı click buy now it should go to golds buy now page how can ı do that please help.
Do you have a separate buy page for each color? you shouldn’t really be doing it that way tbh,
what you should do is create just one buy page and just change the information on it when the buy button is clicked buy passing props to it, but if your not using react router its probably gonna take you a while to get that sorted if you dont know what your doing, why did you choose to use react if your just using normal html lol? anyway i will give you a solution, what are your page names?
thanks for your suggestion appreciate it i will do it like that its much more convinient ı dunno why ı was trying to do it like that still have to learn a lot especially from you thanks for putting in time for me have a great day bye.
1 Like
The only way to change to a new html page is using a router im afraid i just tried it out, adding one to your project should be quite easy just use the quick start guide and copy over what you need…
once you get a router set up i will be able to help you
1 Like