onclick function not working in next project

Question

i am just trying to change the image but it does not work

I have checked the links they are working but not the onclick function

protfolio.js

import Image from 'next/image';
import React from 'react';

const Portfolio = () => {
  const changeImage = () => {
    const image = document.getElementById('myImage');
    if (image.src.match("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80")) {
        image.src = "https://images.unsplash.com/photo-1594717527389-a590b56e8d0a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80";
    }
}
  return (
    <div className='max-w-[1240px] mx-auto py-16 text-center'>
      <button onClick={changeImage} >Travel Photos</button>
      <div className='grid grid-rows-none md:grid-cols-5 p-4 gap-4'>
        <div className='w-full h-full col-span-2 md:col-span-3 row-span-2'>
          <Image
            src='https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80'
            id='myImage'
            alt='/'
            layout='responsive'
            width='677'
            height='451'
            onClick={changeImage}
          />
        </div>
      </div>
    </div>
  );
};

export default Portfolio;

you should start using useState and useEffect hooks for this kind of needs — ilkerkaran
– ilkerkaran, Commented Aug 15, 2022 at 11:58
If anything causes this component to re-render, the changes you manually made to the DOM are lost. Manually changing the DOM is almost always the wrong approach in React. — David
– David, Commented Aug 15, 2022 at 12:00
make sure things aren't refreshing your page, you may need to force it to not refresh. Also, make sure that nothing is covering your onClick preventing the click. — Display name
– Display name, Commented Aug 15, 2022 at 12:03

kiranvj · Accepted Answer · 2022-08-16 02:50:33Z

Is there any reason you are not using state for this?

const [imageUrl, setImageUrl] = useState('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80')

And on image onClick

onClick={()=> changeImage(imageUrl); }

And your function would be like this

const changeImage = (currentImageUrl) => {
    
    if (currentImageUrl.match("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80")) {
       setImageUrl("https://images.unsplash.com/photo-1594717527389-a590b56e8d0a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80")
    }

}

Sonu Sindhu · Accepted Answer · 2022-08-15 12:01:19Z

0

I would highly recommend you to use the useRef to replace the src for the image

const imageRef=useRef();

bind ref to image

<img ref={imageRef} />

Use imageRef to change the src like this

imageRef.current.src = {image}

Hope it will help to resolve your issue.

answered Aug 15, 2022 at 12:01

Sonu Sindhu

1,80216 silver badges27 bronze badges

5 Comments

Vikrant gupta Over a year ago

in this imageRef.current.src = {image} do i have to change image with the image link. can you please specify how to use this

Sonu Sindhu Over a year ago

yes, {image} is what we need to change. it can be static url or dynamic

Vikrant gupta Over a year ago

can you please tell how to write the code

Sonu Sindhu Over a year ago

like that imageRef.current.src = 'image url'

Sonu Sindhu Over a year ago

check this codesandbox.io/s/hungry-frost-o2lfjp?file=/src/App.js

Collectives™ on Stack Overflow

onclick function not working in next project

2 Answers 2

Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Related