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/bootstrap@4.6.0/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>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/bootstrap@4.6.0/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>