Question

制作食品订购应用。第一张表包含所有可以选择的项目。每个项目都有一个按钮。在此按钮上单击，它将克隆该行，并将其放入包含所选项目的第二个表中。我想在元素转到第二个表时更改按钮的文本内容。就像第一个表中的“ +”变成第二个表中的“-”一样（接下来要删除第二个表中的“-”项，请单击）

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）均未成功。我还尝试创建另一个按钮，并用较新的按钮替换前一个按钮。

更改克隆元素的按钮文本

0 个答案: