Innerhtml does not work

Question

Innerhtml does not work

Asked 8 years, 1 month ago

Viewed 1,615 times

2

I’m trying to make a very simple example of javascript but the innerhtml is not being recognized.

<!DOCTYPE html>
<html>

    <head>

            <title>Pagina com Javascript</title>
            <script src="meujavascript.js"></script>
            <!-- Versao do JS <script type="text/javascript" language="JavaScript1.8.5"></script> -->

    </head>

    <body>
    <!--
    <p id="paragrafo">texto em javascript</p>
    <button type="button" onclick="mostrar()">Teste</button>
    -->

    <p id="valores">[valores]</p>

    </br></br></br>

    <button type="button" onclick=adicionar(1,2)">Mensagem</button>

    </body>

</html>

Javascript function:

function adicionar(parcela1, parcela2)
{
    //esta função adiciona dois valores
    var resultado = parcela1 + parcela2;
    var test document.getElementById("valores");
    test.innerhtml = resultado;
}

Very simple HTML just for practice.

My javascript example. I want to continue practicing but I don’t know why innerhtml isn’t working.. Someone can help me ?

1

innerhtml must be with HTML great. => innerHTML

– Sergio

2016/10/14 at 07:12

3 answers

Browser other questions tagged javascript

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

by Klaider • **2,509** points · Answer 1 · 2016-10-13T14:09:23+00:00

Only 2 errors in Javascript code:

var test document.getElementById("valores");: After 'var test' could have been declared '=' (initializer), ',' (next variable), ';' or a line break, but instead a name appeared.
Your code is interpreted and executed in case-sensitive, so test.innerhtml shall not be equivalent to test.innerHTML. test.innerHTML = ... is the Setter you want to use.

To solve the problems of the code I declared an initializer in front of the variable definition 'test' and traded test.innerhtml for test.innerHTML, which may be the getter/Setter HTMLElement#innerHTML in today’s browsers.

function adicionar(parcela1, parcela2) {
    var resultado = parcela1 + parcela2;
    var test = document.getElementById("valores");
    // Se a propriedade test.innerHTML tem um setter em test,
    // chama a função do setter, se não então re-define
    // a propriedade test.innerHTML sensivelmente
    test.innerHTML = resultado;
}

by ThadeuLuz • **131** points · Answer 2 · 2016-10-13T14:03:01+00:00

3

Use:

var test = document.getElementById("valores"); // falta o '='
test.innerHTML = resultado                     // 'html' em maiúsculo

http://codepen.io/anon/pen/EgRGJZ?editors=1010

But isn’t that what he’s doing? In the statement of the question, it has the same code..

– Marco Giovanni

2016/10/13 at 14:07
@Marcogiovanni Not really. The parser is case-sensitive: test.innerhtml is different from test.innerHTML.

– OnoSendai

2016/10/13 at 14:29
Well, I hadn’t noticed that kkkk .. + 1

– Marco Giovanni

2016/10/13 at 14:43
1

You didn’t even notice the = missing there in the variable test right!

– Sampaio Leal

2016/10/13 at 14:48
Truth @Sampaioleal ..

– ThadeuLuz

2016/11/29 at 14:31

by Denys Fontenele • 9 points · Answer 3 · 2016-10-13T14:44:53+00:00

Uppercase letters in innerHTML and quotation marks

    <head>

    <title>Pagina com Javascript</title>
    <script src="meujavascript.js"></script>
    <!-- Versao do JS <script type="text/javascript" language="JavaScript1.8.5"></script> -->
    <script>
    function adicionar(parcela1, parcela2)
    {
    //esta função adiciona dois valores
    var resultado = parcela1 + parcela2;
    var test = document.getElementById("valores");
    test.innerHTML = resultado;

    }
    </script>
    </head>

    <body>
    <!--
    <p id="paragrafo">texto em javascript</p>
    <button type="button" onclick="mostrar()">Teste</button>
    -->

    <p id="valores">[valores]</p>
    <p id="demo"></p>
    <br><br><br>

    <button type="button" onclick="adicionar(1,2)">Mensagem</button>

    </body>

    </html>

https://plnkr.co/edit/0zixeHtok0L3QORwmggy?p=preview