Question

我目前正在使用JavaScript练习对象和属性。我尝试将其插入 innerHTML ，但所需的输出以字符串形式而不是实际图像显示${item.img}。我还尝试在notepad ++中将代码分隔在不同的行中，但是除非在一行中键入，否则编译器无法识别该代码。请为此提供解决方案。

这是JavaScript代码：

const item = {};
item.img = 'img-cart${partPath}';
let name = event.target.parentElement.parentElement.nextElementSibling
                .children[0].children[0].textContent;
item.name = name;
let price = event.target.parentElement.parentElement.nextElementSibling
                .children[0].children[1].textContent;
let finalPrice = price.slice(1).trim();
item.price = finalPrice;

const cartItem = document.createElement("div");
cartItem.classList.add(
    "cart-item",
    "d-flex",
    "justify-content-between",
    "text-capitalize",
    "my-3"
);      

problem is here ----> cartItem.innerHTML = '<img src="${item.img}" class="img-fluid rounded-circle" id="item-img" alt=""><div class="item-text"><p id="cart-item-title" class="font-weight-bold mb-0">${item.name}</p><span>$</span><span id="cart-item-price" class="cart-item-price" class="mb-0">${item.price}</span></div><a href="#" id="cart-item-remove" class="cart-item-remove"><i class="fas fa-trash"></i></a></div>';

Answer 1

根据语法，Template Literals包含在反引号（``）中。由于您使用的是单引号（''），因此整个字符串都被视为纯字符串，因此不会评估其中的表达式。

cartItem.innerHTML = `<img src="${item.img}" class="img-fluid rounded-circle" id="item-img" alt=""><div class="item-text"><p id="cart-item-title" class="font-weight-bold mb-0">${item.name}</p><span>$</span><span id="cart-item-price" class="cart-item-price" class="mb-0">${item.price}</span></div><a href="#" id="cart-item-remove" class="cart-item-remove"><i class="fas fa-trash"></i></a></div>`;

JavaScript对象在innerHTML中不起作用

1 个答案: