Currently, I have a function defined in my app.js. The goal now is to separate the function calls into a different file.
// Function to add .rellax class and data attribute
function addRellax(selector, value) {
// Select all elements that match the given selector
const elements = document.querySelectorAll(selector); // Add .rellax class to selected elements
for (var i = 0; i < elements.length; i++) {
elements[i].classList.add('rellax');
} // Control speed
for (var i = 0; i < elements.length; i++) {
elements[i].setAttribute('data-rellax-speed', value);
}
};
// Applying parallax effect to different elements
// These three lines will be moved to another file
addRellax('.helloWorld__item1', 6);
addRellax('.helloWorld__item2', -2);
addRellax('.helloWorld__item3', 3);
// Initialize Rellax
const rellax = new Rellax('.rellax');
To achieve this, I created a new file named helloWorld.js and attempted the following:
export default
addRellax('.helloWorld__item1', 6);
addRellax('.helloWorld__item2', -2);
addRellax('.helloWorld__item3', 3);
I then replaced the mentioned part in my main app.js with:
// Adding parallax effect to elements
import './05-sections/helloWorld/helloWorld.js';
However, upon testing, I encountered an error:
Uncaught ReferenceError: addRellax is not defined at Object../src/05-sections/helloWorld/helloWorld.js