Write inside a div with a function

Asked

Viewed 525 times

-2

I have a function that takes values from a document via parser:

    var soma = 0;

    $(document).ready(function () {

    $.get(file, function (data) {
        ivps = parseDataToIvp(data);        
        let fIvps = ivps.filter(i => i.idleTime < -60)                
        fIvps.map(i => console.log(i.idleTime))
        soma = fIvps.map(i => i.idleTime).reduce((a,b) => a + b);

        console.log(soma);
    });

});

I would like to write this "sum" result inside my div in HTML, but I’m not getting, anyone has any idea?

<div class="count"></div>
javascript html

  • Felipe Deolindo, take a test using the code I added as an answer and tell me if that’s what you wanted.

4 answers

2


To fit your code, you can use the command .innerHTML to enter the value of your variable soma giving a document.getElementsByClassName to capture the desired element.

Adapt your code with the following code:

var soma = 0;

$(document).ready(function () {

    $.get(file, function (data) {
        ivps = parseDataToIvp(data);        
        let fIvps = ivps.filter(i => i.idleTime < -60)                
        fIvps.map(i => console.log(i.idleTime))
        soma = fIvps.map(i => i.idleTime).reduce((a,b) => a + b);

        console.log(soma); //Caso você queira apenas inserir o valor na sua <div>, remover essa linha.
        document.getElementsByClassName("count")[0].innerHTML = soma;

    });


});

  • André did this, but this value that I’m taking from an excel spreadsheet is dynamic, it every day adds all the values and will generate me a result, with this code the value that shows me is always 0, because it is the value that is declared up there

  • The variable is declared up there by 0, but the innerHTML is adding the value returned from that function:fIvps.map(i => i.idleTime).reduce((a,b) => a + b); that is probably returning 0.

  • @Felipedeolindo, what is your value console.log display?

  • the value my console is showing, the total value adding up all of them is -1674 , it shows me all the values that are being taken and at the end it shows the total of them, but tomorrow this value will be another, so on, every day this final value changes

  • It worked, man, one was missing ; in the end, I didn’t notice, thank you very much

  • not wanting to abuse, but I read that if use that math.abs I can make that negative number turn positive, you know where I can use the math.abs within that function?

  • Case the variable soma returns a negative value, for example: -15. you wish to return 15 ? If that’s what you want, you just need to change the code: = soma; for = abs(soma);. It is worth remembering that the function abs only accepts numerical values as a parameter.

Show 2 more comments

1

To insert you want to insert some content into the div, you can do it in the following ways:

HTML content:

  • $('div.count').html('Seu código HTML aqui');
  • document.querySelector('div.count').innerHTML = 'Seu código HTML aqui';

Plain text content:

  • $('div.count').text('Seu texto aqui');
  • document.querySelector('div.count').innerText = 'Seu texto aqui';

Above shows how you can do this insertion, both with Jquery, and only with Javascript.

0

var soma = 0;

$(document).ready(function () {

$.get(file, function (data) {
    ivps = parseDataToIvp(data);        
    let fIvps = ivps.filter(i => i.idleTime < -60)                
    fIvps.map(i => console.log(i.idleTime))
    soma = fIvps.map(i => i.idleTime).reduce((a,b) => a + b);

    console.log(soma);
});

document.getElementById("result").innerHTML = soma;

});

  <div class="count" id="result"></div>

or

  <div>
        <p id="result">Calculando valores....</p>
  </div>

0

Tried that?

$("#div_id").html("seu texto aqui");

Note: code using jQuery

  • 1

    @Andréfilipe in this case you would replace this ID with your div ID. I recommend using the "id" attribute for selection, as it is an identifier.

Browser other questions tagged javascript html

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