Почему в ${.....} число можно передать но нельзя строку .... мол ' не определен'

Рейтинг: 0Ответов: 1Опубликовано: 10.08.2023

Почему в ${.....} число можно передать но нельзя строку .... мол ' не определен'

let productContainer = document.querySelector('.product-container')

let data = [
    {   id:1,
        name:'Samsung',
        price:3232
    },
    {
        id:2,
        name:'Nokia',
        price:3434
    },
    {   id:3,
        name:'Sony',
        price:36667
    },
]


function CartRender(param){
console.log(param)
}


for(let item of data){
    productContainer.innerHTML += `
    <div class='product-item'>
    <span>${item.name}</span>
    <span>${item.price}</span>
    <button onclick = CartRender(${item.name}) class='btn'>add</button>
    </div>
   `
}
<div class="product-container"></div>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Проблема не в том, что это строка, а в вашей синтаксической ошибке. CartRender(${item.name}) -- в этом куске вы говорите интерпретатору вставить значение item.name в строку. Интерпретатор вставляет, и вы получаете, например, CartRender(Sony). Соответственно интерпретатор считает, что вы ему передаете неопределенную переменную. Ваша проблема решается добавлением кавычек, чтобы интерпретатор воспринял передаваемое значение как строку:

let productContainer = document.querySelector('.product-container')

let data = [
    {   id:1,
        name:'Samsung',
        price:3232
    },
    {
        id:2,
        name:'Nokia',
        price:3434
    },
    {   id:3,
        name:'Sony',
        price:36667
    },
]


function CartRender(param){
console.log(param)
}


for(let item of data){
    productContainer.innerHTML += `
    <div class='product-item'>
    <span>${item.name}</span>
    <span>${item.price}</span>
    <button onclick = CartRender('${item.name}') class='btn'>add</button>
    </div>
   `
}
<div class="product-container"></div>