i need to increment a number in a classList template string javascript

Pierre-Yves Roy

hello friends I got a hard one and I'm a bit in a pickle in my blackjack game I create images(of the cards) and the values come from the .PNG name from a list in an object. what I want to do is be able to create a class on those images to be able to use the classList.contain() method in a other function. it seems to work but the number doesn't increment every time I call the function. All the cards have the same class.

function showCard(activePlayer, card) {

if (activePlayer.score <= 20){
    
    let cardImage = document.createElement("img")
    function incrementNumber(number){
        number = number++
        return number
    }
    //increment the number of the class
    cardImage.classList.add(`images${incrementNumber()}`)
    cardImage.src = `images/${card}.png`
    document.querySelector(activePlayer["div"]).appendChild(cardImage)
    hitSound.play() 
} 

} I know i most likely forgot a simple thing but i cannot put my finger on it. I added a number in the ${incrementNumber(1)} still keeps giving me the same images class for all images. thank you for all you're help!

Johannes

The ++ (increment) operator can be confusing sometimes.

In your case, you are using it, but you are also assigning its return value back to the number. The easiest solution is not doing that assignment (changing number = number++ for just number++)

It also looks like number should be a global variable, not a parameter passed to the incrementNumber function.

The more interesting part to the problem though, is why the code does not work. This is due to how the ++ operator works. When you place it after a variable name (eg number++) JavaScript will effectively do this:

var temp = number;
number = number + 1;
return temp;

It increments the number variable by 1, but it returns the previous value of the variable. In your case, when assigning the result of number++ back to number, the increment operation will basically be cancelled out.

Also, note that you can place the ++ operator before a variable name (like ++number). This will not return the original value of the variable, instead returning the new (incremented) value.

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在JavaScript中将String转换为Number的最快方法是什么?

JavaScript中的parseInt(string)和Number(string)有什么区别?

Javascript中的classList.toggle

element.classList.contains()在JavaScript中到底如何工作?

JavaScript classList.add无法正常工作

JavaScript classList.remove无法正常工作

类,颜色之间的平滑过渡| .classList.toggle,JavaScript

JavaScript-1. .splice()很奇怪2. .classList.add很奇怪

classList的JavaScript问题

jQuery addClass工作正常,但javascript classList.add工作异常

在Javascript中删除活动类“ classList.remove”

如何使用JavaScript修复“切换”“ classList”

Do I need STUN?

使用.classList和.toggle的Javascript函数在IE8中不起作用

JavaScript / jQuery“未捕获的TypeError” classList

Javascript-未捕获的TypeError:无法读取null的属性“ classList”

使用 classList 从 JavaScript 在 Web 组件中动态添加类

通过 JavaScript classList 为 div 添加样式

什么是原生 JavaScript classList 的 jQuery 等价物?

在 JavaScript 中克隆后 classList.toggle() 不起作用

JavaScript 将 classList.toggle 仅应用于 onclick 元素

Javascript - classList 事件侦听器的问题

ClassList.toggle funktioniert nicht innerhalb einer ul (HTML/CSS/JavaScript)

ClassList.toggle 在 ul (HTML/CSS/JavaScript) 中不起作用

JavaScript:为什么 classList.remove 不起作用?

Javascript XMLHTTPRequest .classList 响应

Javascript:element.classList.add("none") 工作不正常

如何改变 String 或 Number 在 JavaScript 中转换类的方式?

Javascript - classList.toggle ("my-class") 不起作用,因为主类正在获取多个