0
259
ViewsWhy does omitting parenthesis when calling a function in JavaScript update slider output correctly, but when including the parenthesis creates bug
My slider output which reads the value given/updated by user using oninput event handler does not update correctly when I call using
slider.oninput = updateGridRange();
syntax with parenthesis, rather it gives me the same default value of 16x16. However the code works great without that bug when I call using
slider.oninput = updateGridRange;
What is the difference in JavaScript when I call a function with no parameters defined functionExample() and functionExample without parentheses? Why is there a bug created in my code when this situation happens?
function createSlider() {
const slider = document.createElement('input');
slider.setAttribute('type', 'range');
slider.setAttribute('min', '1');
slider.setAttribute('max', '100');
slider.setAttribute('value', '16');
document.querySelector('div.slider-container').appendChild(slider);
const sliderText = document.createElement('div');
sliderText.classList.add('slider-text');
document.querySelector('div.slider-container').insertBefore(sliderText, document.querySelector('div.slider-container').firstChild);
sliderText.textContent = `${slider.value} x ${slider.value}`;
slider.oninput = updateGridRange; //updateGridRange() causes bug
}
function updateGridRange() {
document.querySelector('div.slider-container div.slider-text').textContent = `${document.querySelector('input').value} x ${document.querySelector('input').value}`;
}
Pictures of Slider
Bug
Good
2 answers
Answer question0
updateGridRange is the function itself, and that's what you need to pass.
updateGridRange() is the result of calling updateGridRange, that is, it is whatever value is returned by calling updateGridRange.
Since you don't have a return value for the updateGridRange function, updateGridRange() is really just the same thing as undefined.
0
When doing
slider.oninput = updateGridRange;
you are assigning the function in the variable named updateGridRange, and it will be called later (a callback).
You only want it to fire when slider.oninput event happens, so you don't want to call the function immediately. Putting parenthesis on the end of a variable that holds a function will invoke it immediately, which is why you get bad behavior.