How transform a quantity of textareas to html paragraphs in one input?

November 26, 2023

I have a code to generate new textarea with a text and save it as html paragraphs (<p>) in a input, but my code can’t save more that one textarea, when I tried to do this I get only undefined output.

There is an option to save more that one textareas?

Here is my code:

(function () {
var textbox = document.getElementById('textbox');
var txtBtn = document.getElementById('addTxt');
var webB = document.getElementById('webB');
var currentIndex = 0;
txtBtn.addEventListener("click", createTxt);
function createTxt() {
var txtTyper = document.createElement('textarea');
txtTyper.innerText = 'Type text here';
txtTyper.id = 'txtTyper';
webB.appendChild(txtTyper);
txtTyper.style.cursor = 'auto';
let count = 0;
var txtTypers = document.querySelectorAll("#txtTyper");
txtTypers.forEach((element, currentIndex) => {
  count = count + 1;
    element.classList.add(`Typer-${count}`);
});
}
setInterval(function addValue() {
var txtTyperw = document.querySelectorAll("#txtTyper");
textbox.value ='<p style="height:' + txtTyperw.offsetHeight + 'px;width:' + txtTyperw.offsetWidth + 'px;">' + txtTyperw.value + '</p>';
}, 0001);
})();

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet"/>
<div class="btnP">
<button id="addTxt" class="btn btn-primary" title="Add text block"><i class="bi bi-textarea-t fs-4"></i></button>
</div>
<input style="height:50px;width:100%" id="textbox">
<div class="webB" id="webB">
</div>

CodePen: https://codepen.io/Puma-Murca/pen/XWOYxGK

Note: I am a beginner in JavaScript and I am using an external library (Bootstrap), and so I need an answer without the use of jQuery.

>Solution :

querySelectorAll returns a NodeList, not a single node

Something like this perhaps?

Note, using requestAnimationFrame instead of setInterval – meaning it calls addValue only as often as "visually" needed – i.e at least 60 times a second, but perhaps more on higher sync rate monitors? I don’t know if requestAnimationFrame is actually tied to the sync rate of monitors, but 60 times a second is more than enough, no need to do it close to 1000 times a second, that’s for sure.

(function () {
    var textbox = document.getElementById('textbox');
    var txtBtn = document.getElementById('addTxt');
    var webB = document.getElementById('webB');
    var currentIndex = 0;
    txtBtn.addEventListener("click", createTxt);
    function createTxt() {
        var txtTyper = document.createElement('textarea');
        txtTyper.innerText = 'Type text here';
        txtTyper.className = 'txtTyper';
        webB.appendChild(txtTyper);
        txtTyper.style.cursor = 'auto';
        let count = 0;
        var txtTypers = document.querySelectorAll("#txtTyper");
        txtTypers.forEach((element, currentIndex) => {
            count = count + 1;
            element.classList.add(`Typer-${count}`);
        });
    }
    const addValue = () => {
        textbox.value = [...document.querySelectorAll(".txtTyper")]
            .map(txtTyperw => '<p style="height:' + txtTyperw.offsetHeight + 'px;width:' + txtTyperw.offsetWidth + 'px;">' + txtTyperw.value + '</p>').join("");
        requestAnimationFrame(addValue);
    }
    addValue();
})();

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet" />
<div class="btnP">
  <button id="addTxt" class="btn btn-primary" title="Add text block"><i class="bi bi-textarea-t fs-4"></i></button>
</div>
<input style="height:50px;width:100%" id="textbox">
<div class="webB" id="webB">
</div>