Problem with displaying text within a <textarea>

Question

Problem with displaying text within a <textarea>

Asked 4 years ago

Viewed 101 times

-3

I’m making a text editing HTML5 site, in it Oce types something in the text box and selects one of the desired options, 'Uppercase, Lowercase, Bold, Italic, Fixed, Strike, Sub, Sup'. The problem starts when I try to use the 'Bold, Italic, Fixed, Strike, Sub, Sup' buttons, the message returns in the response box between '< b> < /b>, < i> < /i>, < tt> < /tt>, < strike> < /strike>, < sub> < /sub>, < sup> < /sup>' respectively, instead of returning with the text effect. I hope I’ve been clear with my problem, I really appreciate the help!

Below is the HTML5 code

<!DOCTYPE html>
    <html lang="ue">
        <head>
            <meta charset="UTF-8">
            <meta name="description" content="site para edição de texto simples">
            <meta name="keywords" content="editar texto, correção de texto, texto, edição">
            <meta name="author" content="@sir_membrive">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Character Transition</title>
            <link rel="stylesheet" href="estilo.css">
        </head>

        
        <body>
            <section>
                <h1>Character Transition</h1>
                <div>
                    <p id="paragrafo1">
                        <input type="button" class="botao" value="Uppercase" onclick="maiusculas()">
                        <input type="button" class="botao" value="Lowercase" onclick="minusculas()">
                        <input type="button" class="botao" value="Bold" onclick="negrito()">
                        <input type="button" class="botao" value="Italic" onclick="italico()">
                        <input type="button" class="botao" value="Fixed" onclick="fixo()">
                        <input type="button" class="botao" value="Strike" onclick="riscado()">
                        <input type="button" class="botao" value="Sub" onclick="sub()">
                        <input type="button" class="botao" value="Sup" onclick="sup()">
                        <input type="button" class="botao" value="Number of Characters" onclick="letras()">
                    </p>
                    <p>
                        <textarea id="texto" placeholder="Type the text:"></textarea>
                    </p>
                </div>

                <textarea id="res"></textarea>
            </section>


            <footer>
                <p>&copy; Designed by @sir_membrive</p>
            </footer>

            <script src="script.js"></script>
        </body>
    </html>

Below is the Javascript code

function maiusculas() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.toUpperCase()
}

function minusculas() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.toLowerCase()
}

function negrito() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.bold()
}

function italico() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.italics()
}

function fixo() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.fixed()
}

function riscado() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.strike()
}

function sub() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.sub()
}

function sup() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.sup()
}

function letras() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = `Your text has ${texto.length} characters, including spaces, letters and punctuation.`
}

Important you [Dit] your question and explain objectively and punctually the difficulty found, accompanied by a [mcve] of the problem and attempt to solve. To better enjoy the site, understand and avoid closures and negativities worth reading the Stack Overflow Survival Guide in English.

– Bacco

2020/06/29 at 17:22

1 answer

Browser other questions tagged javascript html5 variables textarea

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

by user60252 · Answer 1 · 2020-06-27T19:49:56+00:00

"It won’t work anyway, you are trying to render HTML elements in fields that only accept string. The Bold() method, for example, involves text typed in the top textarea in Html tags , but, when you put that back into an input element that only accepts string (bottom textarea) this is converted to string!" comment from @Leandrade

You can replace the textarea with a div property resize and apply a css to simulate a textarea. This way you will work as expected.

function maiusculas() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.toUpperCase()
}

function minusculas() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.toLowerCase()
}

function negrito() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.bold()
}

function italico() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.italics()
}

function fixo() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.fixed()
}

function riscado() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.strike()
}

function sub() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.sub()
}

function sup() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = texto.sup()
}

function letras() {
    var texto = document.getElementById('texto').value
    var res = document.getElementById('res')
    res.innerHTML = `Your text has ${texto.length} characters, including spaces, letters and punctuation.`
}

#res {
  border: 1px solid #E4E4E4;
  padding: 20px; 
  width: 140px;
  height: 20px;
  resize: both;
  overflow: auto;
}

<!DOCTYPE html>
    <html lang="ue">
        <head>
            <meta charset="UTF-8">
            <meta name="description" content="site para edição de texto simples">
            <meta name="keywords" content="editar texto, correção de texto, texto, edição">
            <meta name="author" content="@sir_membrive">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Character Transition</title>
            <link rel="stylesheet" href="estilo.css">
        </head>

        
        <body>
            <section>
                <h1>Character Transition</h1>
                <div>
                    <p id="paragrafo1">
                        <input type="button" class="botao" value="Uppercase" onclick="maiusculas()">
                        <input type="button" class="botao" value="Lowercase" onclick="minusculas()">
                        <input type="button" class="botao" value="Bold" onclick="negrito()">
                        <input type="button" class="botao" value="Italic" onclick="italico()">
                        <input type="button" class="botao" value="Fixed" onclick="fixo()">
                        <input type="button" class="botao" value="Strike" onclick="riscado()">
                        <input type="button" class="botao" value="Sub" onclick="sub()">
                        <input type="button" class="botao" value="Sup" onclick="sup()">
                        <input type="button" class="botao" value="Number of Characters" onclick="letras()">
                    </p>
                    <p>
                        <textarea id="texto" placeholder="Type the text:"></textarea>
                    </p>
                </div>

                <div id="res"></div>
            </section>


            <footer>
                <p>&copy; Designed by @sir_membrive</p>
            </footer>

        </body>
    </html>

The estate resize CSS defines whether an element is resizable and, if so, in which directions.

The property `resize` can receive four possible values:

None: the control cannot be resized
vertical: the control can be resized vertically
horizontal: the control can be resized horizontally
Both: the control can be resized in both dimensions.