Innerhtml function doesn’t work?

Question

Innerhtml function doesn’t work?

Asked 4 years, 4 months ago

Viewed 170 times

0

I am using the view engine handlebars, however, when I went to manipulate DOM elements, it continues with the value given to it by the exhaust, follows the code below:

monitor page.handlebars:

<script src="/monitoramento.js"></script>
{{#each result}}
<div class="container mt-5">
    <h6>Bomba 1: <small id="bomba1">{{bomba}}</small></h6>
    <hr>
    <h6>Bomba 2: <small id="bomba2">texto aqui</small></h6>
    <hr>
    <h6>Caixa D'Água: <small id="caixa">texto aqui</small></h6>
    <hr>
    <h6>Cisterna: <small id="cisterna">texto aqui</small></h6>
    <hr>
    <h6>Temperatura: <small id="temperatura">texto aqui</small></h6>
    <hr>
    <h6>Pressão: <small id="pressao">texto aqui</small></h6>
    <hr>
    <h6>Data: <small id="data">texto aqui</small></h6>
    <hr>
</div>
{{else}}
    <h1>Não foram encontrados registros!</h1>
{{/each}}

Small script monitoring.js for manipulating DOM elements:

var bomba1 = document.querySelector('#bomba1')

if (bomba1.value = 1) {
    bomba1.innerHTML = 'Bomba ligada'
}

why doesn’t it work?

NOTE: In the root file of the project I put the path to the static contents.

1

In the if you are using a wrong operator on bomba1.value = 1, when it should be == or ===. Behold in this topic the difference between them.

– Sam

2020/02/11 at 13:30
Your if is assigning '1' instead of comparing if value is equal to '1'. Use operator '==' or else the same strict operator '==='.

– Mateus Daniel

2020/02/11 at 13:31
I didn’t even realize this mistake I made I will implement here and I already give the answer...

– Teuuz1994

2020/02/11 at 13:32
I tried to implement here, but continues to give the same result, it does not replace the element :/

– Teuuz1994

2020/02/11 at 13:34
Look on the console for possible errors.

– Sam

2020/02/11 at 13:35
in the browser console shows the following error: monitoring.js:3 Uncaught Typeerror: Cannot read Property 'value' of null don’t know why but ta giving value "null"

– Teuuz1994

2020/02/11 at 13:37
You don’t seem to have set VALUE for the element with id "bomba1". Try putting a VALUE on it, which I think your IF will work.

– Gato de Schrödinger

2020/02/11 at 13:38
It is because vc is loading the monitoring file before the elements. When you try to run the line var bomba1 = document.querySelector('#bomba1') the element #bomba1 doesn’t exist yet.

– Sam

2020/02/11 at 13:38
i imported the script below any code and set VALUE for the bomba1 variable, even though it didn’t work I left the variable so: var bomba1 = document.querySelector('#bomba1').value

– Teuuz1994

2020/02/11 at 13:44
in the if I left so: if (bomba1.value == 1) {
 bomba1.innerHTML = 'Bomba ligada'
}

– Teuuz1994

2020/02/11 at 13:47
@Teuuz1994 you did the compile in the Handlebars?

– Mateus Daniel

2020/02/11 at 13:49
I haven’t used handlebars in a while, I even looked at the documentation but I didn’t understand it very well

– Teuuz1994

2020/02/11 at 14:04

Show 7 more comments

1 answer

Browser other questions tagged javascript dom handlebars.js

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

by Mateus Daniel • **537** points · Answer 1 · 2020-02-11T14:00:20+00:00

Apparently, what’s preventing your code from working is because you’re not using the method compile Handlebars. So the solution is simple:

First, try to bring your files from <script> always at the end of the body of your HTML. Then, what I did was assign a variable template the method compile of the library, as reported in the documentation:

var template = Handlebars.compile("{{result}}");

Then your code would look like this:

    var template = Handlebars.compile("{{result}}");

    var bomba1 = document.querySelector('#bomba1')

    if (bomba1.value = 1) {
        bomba1.innerHTML = "Bomba ligada";
    }

If you want more information, take a look at the Handlebars library documentation: https://handlebarsjs.com/guide/#what-is-handlebars

Hope I helped, hugs!