0

How to replace text and content on click and show initial text in this function? My function work when click on A show me A, then when click on B show me A and B. I want when click on B delete A and show me only B, and show initial text example A.

const alphabetHolder = document.querySelector(".alphabet")
const textHolder = document.querySelector(".second-column-div2")
const letterHolder = document.querySelector(".letter-holder")
let arrOfAlphabet = module.data;
arrOfAlphabet.forEach((letter) => {
       const p = document.createElement("p")
       p.innerHTML = letter.letter
       alphabetHolder.appendChild(p)
       p.addEventListener('click', () => {
             const pp = document.createElement("p")
             const span = document.createElement("span")
             pp.innerHTML = letter.text
             span.innerHTML = letter.letter
             textHolder.appendChild(pp)
             letterHolder.appendChild(span)
       }

arrOfAlphabet looks like a json: 

 {
        "id": 1,
        "letter": "A",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget rutrum estipit, finugiat eget."
    },
    {
        "id": 2,
        "letter": "B",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    }
Brhaka
  • 1,622
  • 3
  • 11
  • 31
Alex Al
  • 156
  • 4
  • 17
  • Can you explain what you mean by " I want when click on B delete A and show me only B, and show initial text example A."? – Aparna Jul 02 '19 at 11:43
  • @Aparna Yes I want dynamic. When click on A show A...In my logic now when I click on A show me A and that do propertly. But when click on B , A still here , and B is added. I want toggle A and show B... – Alex Al Jul 02 '19 at 11:46
  • Please provide a proper [mre] first of all. – 04FS Jul 02 '19 at 11:47
  • “Clearing” the current content of your textHolder element probably will do the trick already, right now it looks like you are only ever appending new elements to that, so of course they will start to accumulate. – 04FS Jul 02 '19 at 11:48
  • @04FS Okey how to "Clearing" current content of my textholder? – Alex Al Jul 02 '19 at 11:49
  • https://stackoverflow.com/questions/3450593/how-do-i-clear-the-content-of-a-div-using-javascript – 04FS Jul 02 '19 at 11:51
  • @04FS if(textHolder) { textHolder.innerHTML = "" } No show text.... – Alex Al Jul 02 '19 at 11:58
  • 1
    And _where_ did you put this now …? – 04FS Jul 02 '19 at 11:59
  • Thank you! Just one think, how to show initial text? :) – Alex Al Jul 02 '19 at 12:00
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/195860/discussion-between-alex-al-and-04fs). – Alex Al Jul 02 '19 at 12:44
  • Well don’t wait for a click, but perform the steps that make the first text visible directly at the moment when you are initializing this whole thing … – 04FS Jul 02 '19 at 12:48

0 Answers0