how can i change exemple to exemple with onclick function?

Question

I want help making the java script code to use an icon and when i click the icon the <a>exemple</a> to <textarea>exemple</textarea>

<div class="swiper-slide">
    <i class="fa-regular fa-pen-to-square" id="update_pen"  onclick="convertElement()"></i>  <--- click here

    <div class="services-item__content">
          <h4 class="services-item__tp-title mb-30">
                 <a href="">Exemple</a> <--- change this to textarea with the same text
          </h4>                    
     </div>
</div>

Please see [ask] and take the [tour]. You're expected to make an effort and show your code. — isherwood, Oct 14 '22 at 16:29
@isherwood oh i got it , i will update it now, sorry im new , i will improve. — bilel abdelmoula, Oct 14 '22 at 16:35

score 0 · Answer 1 · answered Oct 14 '22 at 15:37

You can hide and show the elements. Something like this

<div class="swiper-slide">
    <i class="fa-regular fa-pen-to-square" id="update_pen"  onclick="update_function()"></i>  <--- click here

    <div class="services-item__content">
          <h4 class="services-item__tp-title mb-30">
                <textarea id="textarea-123" style="display: block;"></textarea>
                 <a href="" id="anchor-123">Exemple</a> <--- change this to textarea with the same text
          </h4>                    
     </div>
</div>

<script>
    function update_function() {
        document.getElementById('anchor-123').style.display = 'none';
        document.getElementById('textarea-123').style.display = 'block';
    }
</script>

He also wants to update the content of the text area, where do you do this with your code? — cloned, Oct 14 '22 at 15:42

score 0 · Answer 2 · answered Oct 14 '22 at 16:01

You can try this way to solve this problem

<div class="swiper-slide">
    <i class="fa-regular fa-pen-to-square" id="update_pen"  onclick="update_function()"></i>  

    <div class="services-item__content">
          <h4 class="services-item__tp-title mb-30" id='demo'>
                 
                 <a href="" id='myAnchor'>Exemple</a>
          </h4>                    
     </div>
</div>
<script> 
document.getElementById("myAnchor").addEventListener("click", function(event){
  event.preventDefault()
     const myElement = document.getElementById("demo");
     myElement.innerHTML = "<textarea>exemple</textarea>";
     });
</script>

score 0 · Accepted Answer · answered Oct 14 '22 at 16:16

This function should replace the <a> with a <textarea>

function update_function(event) {
    // from the parent of the event target find the child that is parent to the element you want to replace
    let parent = event.target.parentNode.querySelector("div > h4")
    // get the target element
    let target = parent.querySelector("a")
    // store the current value
    let text = target.innerText
    // remove the old item
    parent.removeChild(target)
    // create, populate and append the new element to the stored parent
    let el = document.createElement("textarea")
    el.appendChild(document.createTextNode(text))
    parent.appendChild(el)
}

how can i change exemple to exemple with onclick function?

3 Answers3