So i have an card where the user text in the textarea then clicks a button to make it disappear and show as the card-title div but it wont register any input.

The card will be repeated multiple times so i need to make the event listener be able to differentiate between different cards.

What i have tried is the below jquery and some javascript like this:

let questionHeaderInput = document.querySelectorAll(".questionMainTextArea");
let questionHeader = document.querySelectorAll(".card-title");
questionHeaderInput.forEach(item => {
    questionHeader.innerHTML = item.value;
});

$(".questionMainTextArea").on("change paste keyup input", function() {
  $(this).closest(".card-title").innerHTML = $(this).val();
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="card-body">
    <div class="questionMainTextAreaContent">
      <div class="questionMainTextAreaContentArea">
        <textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
      </div>
    </div>
    <div class="card-title questionHeader"></div>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can try the jQuery version by first targeting the closest .card-body then find .card-title. You can not use innerHTML on a jQuery referenced object, you should use .text(). Also, attaching the event on input is enough.

Demo:

$(".questionMainTextArea").on("input", function() {
  $(this).closest(".card-body").find(".card-title").text($(this).val());
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="card-body">
    <div class="questionMainTextAreaContent">
      <div class="questionMainTextAreaContentArea">
        <textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
      </div>
    </div>
    <div class="card-title questionHeader"></div>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>