时间戳

首页 > 解决方案 > 更改克隆元素的按钮文本

javascript - 更改克隆元素的按钮文本

问题描述

制作食品订购应用程序。有一张第一张桌子，里面有你可以选择的所有物品。每个项目都有一个按钮。在此按钮上单击它会克隆该行并将其放入包含您选择的项目的第二个表中。当元素转到第二个表时，我想更改按钮的文本内容。像第一个表中的“+”在第二个表中变成“-”（点击“-”点击删除第二个表的项目）

HTML

<h1>CHOOSE</h1>

<table id="starters">
      <tr>
        <th>PRODUCT</th>
        <th>PRICE</th>
        <th>ADD TO CART</th>
      </tr>
      <tr>
        <td>Cherry</td>
        <td>6</td>
        <td><button class="item_button">+</button></td>
      </tr>
      <tr>
        <td>Peach</td>
        <td>8</td>
        <td><button class="item_button">+</button></td>
      </tr>
      <tr>
        <td>Strawberry</td>
        <td>12</td>
        <td><button class="item_button">+</button></td>
      </tr>

</table>

<h1>YOUR CHOICE</h1>   

<table id="products_cart">

</table>

JS

let basket = document.getElementById("products_cart")

let buttons = document.querySelectorAll('.item_button');

for (button of buttons) {
 button.addEventListener('click', cloneLine);
}

function cloneLine(e) {
 let td = e.target.parentNode;
 let tr = td.parentNode;
 let clone = tr.cloneNode(true);
 basket.appendChild(clone);
}

我尝试了不同的方法，例如获取（querySelectorAll）按钮并更改它们的 innerHTML（或 textContent 或 innerText），但没有成功。我还尝试创建另一个按钮并用较新的按钮替换前者。

标签： javascript

解决方案

推荐阅读