Why am I not getting the content

Asked

Viewed 126 times

1

I have a question when it comes to capturing the element with Dom;

Example

let paragrafo = document.getElementById('paragrafo').innerHTML;

All right so far so good, with this I can see the contents of my paragraph, but why I can’t change the value of my captured element, as an example below 

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <p id="paragrafo"></p>
        <button onclick="colocarConteudo()">inserir texto</button>


    <script type="text/javascript">
        let conteudo = document.getElementById('paragrafo').innerHTML;
        function colocarConteudo(){
            conteudo = `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
        }
    </script>
    </body>
    </html>
javascript

  • Let is not used for local variable? , try with var

  • Guy tried but didn’t give either

1 answer

5


Are you taking the innerHTML (string content) of a HTMLElement and putting in a variable, by doing this conteudo = 'outro texto'; you are only changing the value within the variable and not in HTML.

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <p id="paragrafo">meu texto</p>
        <button onclick="colocarConteudo()">inserir texto</button>


    <script type="text/javascript">
        let conteudo = document.getElementById('paragrafo').innerHTML;
        function colocarConteudo(){
            console.log( 'Nome do constructor:', conteudo.constructor.name );
            console.log( 'Var:', conteudo )
            conteudo = 'novo texto';
            console.log( 'Var:', conteudo );
        }
    </script>
    </body>
    </html>

It seems to me you want to catch HTMLElement, that is to say, document.getElementById('paragrafo') and then replace your content (innerHTML) another +/- like this:

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <p id="paragrafo"></p>
        <button onclick="colocarConteudo()">inserir texto</button>


    <script type="text/javascript">
        let conteudo = document.getElementById('paragrafo');
        function colocarConteudo(){
            console.log( 'Nome do constructor:', conteudo.constructor.name );
            console.log( 'Var:', conteudo);
            conteudo.innerHTML = `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
        }
    </script>
    </body>
    </html>

References: Htmlelement, Element, innerHTML

Browser other questions tagged javascript

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