Adding 1 to a css style property in Javascript

Question

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;
});

Answer 1

Css properties are strings, and '1' + 1 = 11 .

Add "+" before firstPostOrder to convert it to a number.

firstPost.style.order = +firstPostOrder += 1;

Answer 2

值是字符串，因此它们是连接的，在使用parseInt（）之前尝试解析为整数

Answer 3

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;
});

Answer 4

No, 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 "+=".