'How do i fix this error in next js TypeError: Cannot set properties of undefined (setting 'className')

I am working on a next js project , copied some coe on code pen , it is used for a product design of an e commerce website . However i am having this problem. TypeError: Cannot set properties of undefined (setting 'className'). What is an equalvalent of getElementsByClassName or how can i override this eror here is a glimse of the code

var slider = document.getElementsByClassName("sliderBlock_items");
    var slides = document.getElementsByClassName("sliderBlock_items__itemPhoto");
    var next = document.getElementsByClassName("sliderBlock_controls__arrowForward")[0];
    var previous = document.getElementsByClassName("sliderBlock_controls__arrowBackward")[0];
    var items = document.getElementsByClassName("sliderBlock_positionControls")[0];
javascriptcssreactjswebnext.js


Solution 1:[1]

You can use:

document.querySelector(".your_class_name").value querySelector() can be used to select elements on a page, just pass in a CSS like selector...

Cannot set value of undefined would mean that you are trying to select HTML elements that are not on the page. This could mean your code gets run before the components get rendered

Share your full code, or add that code inside a useEffect()

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Spruce

Related Questions