how to calculate a result of a javascript calculation?

Asked

Viewed 125 times

0

I have javascript code that makes a calculation as shown in the code below:

function calcular(){

    //1- 5S
    var valor1 = Number(document.getElementById('red1').value);
    var valor2 = Number(document.getElementById('red2').value);
    var valor3 = Number(document.getElementById('red3').value);
    var valor4 = Number(document.getElementById('red4').value);
    var valor5 = Number(document.getElementById('red5').value);

    var valor6 = Number(document.getElementById('yellow1').value);
    var valor7 = Number(document.getElementById('yellow2').value);
    var valor8 = Number(document.getElementById('yellow3').value);
    var valor9 = Number(document.getElementById('yellow4').value);
    var valor10 = Number(document.getElementById('yellow5').value);

    var valor11 = Number(document.getElementById('green1').value);
    var valor12 = Number(document.getElementById('green2').value);
    var valor13 = Number(document.getElementById('green3').value);
    var valor14 = Number(document.getElementById('green4').value);
    var valor15 = Number(document.getElementById('green5').value);

    document.getElementById('result1').value = Math.round((valor6 + valor7 + valor8 + valor9 + valor10 + valor11 + valor12 + valor13 + valor14 + valor15)/15 * 100)+"%";

    //2- 5S
    var valor16 = Number(document.getElementById('red6').value);
    var valor17 = Number(document.getElementById('red7').value);
    var valor18 = Number(document.getElementById('red8').value);
    var valor19 = Number(document.getElementById('red9').value);
    var valor20 = Number(document.getElementById('red10').value);
    var valor21 = Number(document.getElementById('red11').value);

    var valor22 = Number(document.getElementById('yellow6').value);
    var valor23 = Number(document.getElementById('yellow7').value);
    var valor24 = Number(document.getElementById('yellow8').value);
    var valor25 = Number(document.getElementById('yellow9').value);
    var valor26 = Number(document.getElementById('yellow10').value);
    var valor27 = Number(document.getElementById('yellow11').value);

    var valor28 = Number(document.getElementById('green6').value);
    var valor29 = Number(document.getElementById('green7').value);
    var valor30 = Number(document.getElementById('green8').value);
    var valor31 = Number(document.getElementById('green9').value);
    var valor32 = Number(document.getElementById('green10').value);
    var valor33 = Number(document.getElementById('green11').value);

    document.getElementById('result2').value =  Math.round((valor22 + valor23 + valor24 + valor25 + valor26 + valor27 + valor28 + valor29 + valor30 + valor31 + valor32 + valor33)/18 * 100)+"%";

    var valor34 = Number(document.getElementById('red12').value);
    var valor35 = Number(document.getElementById('red13').value);
    var valor36 = Number(document.getElementById('red14').value);
    var valor37 = Number(document.getElementById('red15').value);


    var valor38 = Number(document.getElementById('yellow12').value);
    var valor39 = Number(document.getElementById('yellow13').value);
    var valor40 = Number(document.getElementById('yellow14').value);
    var valor41 = Number(document.getElementById('yellow15').value);

    var valor42 = Number(document.getElementById('green12').value);
    var valor43 = Number(document.getElementById('green13').value);
    var valor44 = Number(document.getElementById('green14').value);
    var valor45 = Number(document.getElementById('green15').value);

    document.getElementById('result3').value =  Math.round((valor38 +  valor39 + valor40 + valor41 + valor42 + valor43 + valor44 + valor45)/12 * 100)+"%";

    var valor46 = Number(document.getElementById('red16').value);
    var valor47 = Number(document.getElementById('red17').value);
    var valor48 = Number(document.getElementById('red18').value);
    var valor49 = Number(document.getElementById('red19').value);


    var valor50 = Number(document.getElementById('yellow16').value);
    var valor51 = Number(document.getElementById('yellow17').value);
    var valor52 = Number(document.getElementById('yellow18').value);
    var valor53 = Number(document.getElementById('yellow19').value);

    var valor54 = Number(document.getElementById('green16').value);
    var valor55 = Number(document.getElementById('green17').value);
    var valor56 = Number(document.getElementById('green18').value);
    var valor57 = Number(document.getElementById('green19').value);

    document.getElementById('result4').value =  Math.round((valor50 +  valor51 + valor52 + valor53 + valor54 + valor55 + valor56 + valor57)/12 * 100)+"%";

    var valor58 = Number(document.getElementById('red20').value);
    var valor59 = Number(document.getElementById('red21').value);
    var valor60 = Number(document.getElementById('red22').value);
    var valor61 = Number(document.getElementById('red23').value);
    var valor62 = Number(document.getElementById('red24').value);
    var valor63 = Number(document.getElementById('red25').value);


    var valor64 = Number(document.getElementById('yellow20').value);
    var valor65 = Number(document.getElementById('yellow21').value);
    var valor66 = Number(document.getElementById('yellow22').value);
    var valor67 = Number(document.getElementById('yellow23').value);
    var valor68 = Number(document.getElementById('yellow24').value);
    var valor69 = Number(document.getElementById('yellow25').value);


    var valor70 = Number(document.getElementById('green20').value);
    var valor71 = Number(document.getElementById('green21').value);
    var valor72 = Number(document.getElementById('green22').value);
    var valor73 = Number(document.getElementById('green23').value);
    var valor74 = Number(document.getElementById('green24').value);
    var valor75 = Number(document.getElementById('green25').value);


    document.getElementById('result5').value =  Math.round((valor64 +  valor65 + valor66 + valor67 + valor68 + valor69 + valor70 + valor71 + valor72 + valor73 + valor74 + valor75)/18 * 100)+"%";

    var result1 = Number(document.getElementById('result1').value);
    var result2 = Number(document.getElementById('result2').value);
    var result3 = Number(document.getElementById('result3').value);
    var result4 = Number(document.getElementById('result4').value);
    var result5 = Number(document.getElementById('result5').value);

    document.getElementById('result').value = (result1 + result2 + result3 + result4 + result5)+"%";
}

The variables result1, result2... are the result of the first calculation.

I would like to add the result of this calculation however and print a value NaN i put Number.isNan(document.getElementById('result1').value); and the value appears 0, but does not sum up the values.

Could someone help me?

html code has four more of that code, the idea is to add the value of the yellow and green fields and divide with the value that is in javascript times 100 to bring a percentage, I will do for each result this calculation goes to the field with the id result1, and the other goes to the result2 and so on having that result I would like to add them up for example:

the user type in one of the fields in yellow 2 and one of the fields in green 3 that 5 divide by the amount of field that in this html is 15 and multiplied by 100 that rounding 34% what I want to do is add that 34% by the following results.

<tr>
    <td width="20%" height="50px">1- Existem materiais e/ou equipamentos que não estão sendo utilizados sobre as bancadas?</td>
    <td height="50px">
        <input type="text" name="red1" id="red1" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="yellow1" id="yellow1" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="green1" id="green1" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="na1" id="na1" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td colspan="2" height="50px">
        <input type="text" style="height: 100%; width: 99%;" />
    </td>
</tr>
<tr>
    <td width="20%" height="50px">2- Existem objetos desnecessários debaixo das bancadas (caixas de papelão, etc.)</td>
    <td height="50px">
        <input type="text" name="red2" id="red2" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="yellow2" id="yellow2" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="green2" id="green2" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="na2" id="na2" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td colspan="2" height="50px">
        <input type="text" style="height: 100%; width: 99%;" />
    </td>
</tr>
<tr>
    <td width="20%" height="50px">3- Os gabaritos não utilizados, ferramentas ou utensílios estão devidamente segregados e removidos da área de trabalho?</td>
    <td height="50px">
        <input type="text" name="red3" id="red3" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="yellow3" id="yellow3" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="green3" id="green3" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="na3" id="na3" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td colspan="2" height="50px">
        <input type="text" style="height: 100%; width: 99%;" />
    </td>
</tr>
<tr>
    <td width="20%" height="50px">4- Verificar se há fios de eletricidade, telefônicos espalhados pelo chão ou mesmo mal fixados nas paredes, proporcionando risco de acidentes ou demonstrando desorganização.</td>
    <td height="50px">
        <input type="text" name="red4" id="red4" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="yellow4" id="yellow4" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="green4" id="green4" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="na4" id="na4" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td colspan="2" height="50px">
        <input type="text" style="height: 100%; width: 99%;" />
    </td>
</tr>
<tr>
    <td width="20%" height="50px">5- Existem objetos pessoais no local de trabalho?</td>
    <td height="50px">
        <input type="text" name="red5" id="red5" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="yellow5" id="yellow5" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="green5" id="green5" onkeyup="calcular()" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td height="50px">
        <input type="text" name="na5" id="na5" style="height: 100%; width: 96%; text-align:center" />
    </td>
    <td colspan="2" height="50px">
        <input type="text" style="height: 100%; width: 99%;" />
    </td>
</tr>
<tr>
    <td><b>Pontuação = Soma das notas divido pela quantidade de itens aplicáveis.</b></td>
    <td height='50px'>
        <input type="text" name="result1" id="result1" value="" style="width: 96%; height: 100%; text-align:center" />
    </td>
    <td colspan="5" height='50px'></td>
</tr>
  • Is there a reason you don’t use arrays or loops?

  • Can you edit the question to insert an HTML that contains all the elements you refer to? Also, what is the logic of the calculation? Is to add the green and yellow elements of some grouping, but not add the red ones?

  • This code needs to be improved... what is the default in HTML to know which lines are summed in which input? I noticed that some are 4 in 4 others 5 in 5. After inputs there is always a <tr> with score for previous inputs?

No answers

Browser other questions tagged

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