<table class="tableWrap">
<tbody class="check">
<tr>
<td class="items-img">
<img src="" alt="../img/" class="img_btn" />
</td>
<td class="items-number">8500161923127</td>
<td>book</td>
<td>1</td>
<td class="items-price">$10.05</td>
</tr>
</tbody>
</table>
tableWrap.addEventListener("click", (e) => {
if (e.target.classList.contains("img_btn")) {
e.target.classList.toggle("change");
console.log(e.target.parentNode.parentNode.children[1]);
console.log(e.target.parentNode.parentNode.children[2]);
console.log(e.target.parentNode.parentNode.children[3]);
console.log(e.target.parentNode.parentNode.children[4]);
const EPP = e.target.parentNode.parentNode;
console.log(EPP);
/* 🍉.price change */
const EPP1 = EPP.children[1].innerHTML;
const EPP2 = EPP.children[2].innerHTML;
const EPP3 = EPP.children[3].innerHTML;
const EPP4 = EPP.children[4].innerHTML;
if (e.target.classList.contains("change")) {
// create innerHTML
EPP.children[1].innerHTML = `${EPP1} <br> Discount`;
EPP.children[2].innerHTML = `${EPP2} <br> <input type="number"> %`;
EPP.children[3].innerHTML = `${EPP3} <br> <br>`;
EPP.children[4].innerHTML = `${EPP4} <br> $ <input type="number">`;
} else {
// 🌊remove innerHTML
EPP.children[1].innerHTML = EPP1;
EPP.children[2].innerHTML = EPP2;
EPP.children[3].innerHTML = EPP3;
EPP.children[4].innerHTML = EPP4;
}
}
});
I made a table from javascript innerHTML. and when I click an image inside of the table, I wanna put more text in each td node. so I create new td nodes and switch with original td nodes. and when I click the image again, I wanna go back to the original nodes. example) (img button click ) book -> discount book , 10$ -> 9$
(img button click again ) discount book -> book , 9$ -> 10$.
so I made a variable with original td nodes. but when I check console.log, I found the variables are made with changed nodes.
What can I do??
This is the console.log I got.