How do I join texts in a Textarea with Js?

Asked

Viewed 152 times

0

I’m trying to make a tabulation, where the result would be shown in an already existing textarea in HTML. I am using innerText to insert the text in this textarea, only the text is being replaced and only the last result is displayed.

function tabuada() {
    var tabNum = Number(document.getElementById('txtNum').value)
    var mulMin = Number(document.getElementById('mulMin').value)
    var mulMax = Number(document.getElementById('mulMax').value)
    var Tab = document.getElementById('resTab')
    var spcMsg = document.getElementById('msg')


    if (mulMin > mulMax) {
        window.alert('[ERRO] O ultimo multiplicador deve ser maior que o primeiro.')
        spcMsg.innerHTML = 'Preencha novamente os campos.'
    } else if (mulMin < mulMax) {
        for (var cont = mulMin; cont <= mulMax; cont++) {
            
            var resTab = (tabNum * cont)
            Tab.innerText += `${tabNum}x${cont}=${resTab}`
        }

    }
}
<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabuada</title>
    <link rel="stylesheet" type="text/css" href="tabuada.css">
</head>

<body>
    <header id=cabeçalho>
        <h1>Tabuada Online</h1>
    </header>

    <section id="princ">
        <p id="textTab">Digite abaixo o numero do qual você deseja obter a tabuada:</p>
        <div id="div1">
            <p>
                Número: <input type="number" name="txtNum" id="txtNum" />
                X <input type="number" id="mulMin"> até <input type="number" id="mulMax">
                <button onclick="tabuada()" id="botao">obter tabuada</button>
            </p>

        </div>


        <div class="div2">
            <textarea name="resTab" id="resTab" cols="30" rows="10"></textarea>

            <aside id="msg">
                <p></p>

            </aside>
        </div>


    </section>
    <script src="tabuada.js">

    </script>
</body>

</html>

I have done something very similar to innerHTML in another program, the difference is that the results were presented in the same line. innerText acts in the same way as innerHTML, even though one inserts only text and the other tags? Is it characteristic of innerHTML to write everything in the same line and so the text is replaced? Or there would have to be something in the code that did this line break?

Thanks for your help.

javascript html5 loop

1 answer

0


  • That answer explains the difference between innerHTML and the innerText.
  • In your situation, I think you should use value instead of innerText, for the textarea has input behavior.
  • To break the Voce line you can simply add one \n in its result and make a reset of the value of textarea whenever the user clicks on the button obter tabuada. Would that be the code:
function tabuada() {
        var tabNum = Number(document.getElementById('txtNum').value);
        var mulMin = Number(document.getElementById('mulMin').value);
        var mulMax = Number(document.getElementById('mulMax').value);
        var Tab = document.getElementById('resTab');
        var spcMsg = document.getElementById('msg');

        if (mulMin > mulMax) {
          window.alert(
            '[ERRO] O ultimo multiplicador deve ser maior que o primeiro.',
          );
          spcMsg.innerHTML = 'Preencha novamente os campos.';
        } else if (mulMin < mulMax) {
          Tab.value = ''; // faz o reset dos valores.
          for (var cont = mulMin; cont <= mulMax; cont++) {
            var resTab = tabNum * cont;
            Tab.value += `${tabNum}x${cont}=${resTab}\n`; // adiciona quebra de linha com o `\n` no final
          }
        }
      }

I guess that’s it. I hope I helped.

Browser other questions tagged javascript html5 loop

You are not signed in. Login or sign up in order to post.