I am trying to first get the value of the order property of an element, and then adding 1 to it when I click a button. Thing is, instead of getting 1 and adding 1 and getting 2, I get 11. Shouldn't the "+=" operator add the values? What am I doing wrong?
carouselPrev.addEventListener("click", function(){
const firstPost = document.querySelector(".blog-post");
let firstPostOrder = firstPost.style.getPropertyValue('order');
firstPost.style.order = firstPostOrder += 1;
});
Css properties are strings, and '1' + 1 = 11.
Add "+" before firstPostOrder to convert it to a number.
firstPost.style.order = +firstPostOrder += 1;
the values are strings so they are be concatenated, try parsing to an integer before using parseInt()
Try this
carouselPrev.addEventListener("click", function(){
const firstPost = document.querySelector(".blog-post");
let firstPostOrder = firstPost.style.getPropertyValue('order');
firstPost.style.order = parseInt(firstPostOrder,10) +1;
});
radix with parseInt i.e. parseInt(firstPostOrder, 10) see stackoverflow.com/questions/6611824/why-do-we-need-to-use-radixNo, the "+=" operator is an assignment operator you'd use in lieu of "=".
let x = 42;
x += 1;
is equivalent to
let x = 42;
x = x + 1;
You want to use just the "+" to add the values, not the "+=".
firstPostOrderas an integer usingparseInt()before doing arithmetic. Otherwise, you're just appending1to a string.