Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

272
Views
(javascript) How I make hide and show innerHTML like classList.toggle on table html?
    <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.

enter image description here

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!