Igor Sílva Igor Sílva - 8 days ago 7
HTML Question

Why is my javascript script not outputing?

EDIT: I'm still learning javascript, that's why there are so many simple mistakes.

I'm trying to make an online calculator for a friend's company, it has 2 types of employees and he needs to choose which one it is enter the money that they made and then the script makes the calculations.

For some reason my script isn't outputting anything, what am I doing wrong?

Here is my code:

<HTML>

<HEAD>
<TITLE>Sum</TITLE>
<style>
input,
label {
display: block;
}
</style>
<script type="text/javascript">
function sum()
{

var num1 = document.myform.ordenado.value;
var num2 = document.myform.valor.value;

if(ordenado=tipo1){
if(valor>650){
var res= parseFloat(valor) * parseFloat(0.45);
}else{
var res= parseFloat(valor) * parseFloat(0.4);
}
}else{
if(valor>650){
var res= parseFloat(valor) * parseFloat(0.45);
}else if(valor<500){
var res= parseFloat(valor) * parseFloat(0.35);
}else{
var res= parseFloat(valor) * parseFloat(0.4);
}
}

document.getElementById('add').value = res;
}
</script>

<h2>Ordenados</h2>
</HEAD>

<BODY>
<FORM NAME="myform">
<div style="float:left;margin-right:20px;">
<label for="ordenado">Tipo de empregado</label>
<select name="ordenado" id="ordenado">
<option value="tipo1">40% - 45%</option>
<option value="tipo2">35% - 40% - 45%</option>
</select>
</div>
<div style="float:left;margin-right:20px;">
<label for="valor">Valor Semanal</label>
<INPUT TYPE="text" NAME="valor" ID="valor" VALUE="" />
</div>
<div style="float:left;margin-right:20px;">
<label for="button">&nbsp;</label>
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()" />
</div>
<div style="float:left;margin-right:20px;">
<label for="result">Resultado</label>
<INPUT TYPE="text" ID="add" NAME="result" VALUE="" />
</div>
</FORM>

</BODY>

</HTML>

Answer

Quite a few mistakes, here's the fix

      function sum()
      {

         var num1 = document.myform.ordenado.value;
         var valor = parseFloat(document.myform.valor.value);
        if(num1=='tipo1'){
            if(valor>650){
                var res= valor * parseFloat(0.45);
            }else{
                var res= valor * parseFloat(0.4);
            }
        }else{
            if(valor>650){
                var res= valor * parseFloat(0.45);
            }else if(valor<500){
                var res= valor * parseFloat(0.35);
            }else{
                var res= valor * parseFloat(0.4);
            }
        }

         document.getElementById('add').value = res;
      }
    input,
    label {
        display: block;
    }
<HTML>

<HEAD>
<TITLE>Sum</TITLE>
<h2>Ordenados</h2>
</HEAD>

<BODY>
<FORM NAME="myform">
    <div style="float:left;margin-right:20px;">
        <label for="ordenado">Tipo de empregado</label>
        <select name="ordenado" id="ordenado">
                    <option value="tipo1">40% - 45%</option>
                    <option value="tipo2">35% - 40% - 45%</option>
                </select>
    </div>
    <div style="float:left;margin-right:20px;">
        <label for="valor">Valor Semanal</label>
        <INPUT TYPE="text" NAME="valor" ID="valor" VALUE="" />
    </div>
    <div style="float:left;margin-right:20px;">
        <label for="button">&nbsp;</label>
        <INPUT TYPE="button" NAME="button" Value="=" onClick="sum()" />
    </div>
    <div style="float:left;margin-right:20px;">
        <label for="result">Resultado</label>
        <INPUT TYPE="text" ID="add" NAME="result" VALUE="" />
    </div>
</FORM>

</BODY>

</HTML>    

Missing quotes, ordenado undefined, tipo1 and value reference errors, and num2 not used.

The main issue from a "comprehension" point of view was you trying to assign a variable in a if statement.

if(ordenado=tipo1) // the = operator is used for assignment, not comparison

To compare variables, you need to use comparison operators, == (without type checking), or === (type checking). I recommend you go through this link to learn more.

Apart from that, be careful how you name your variables, don't call a var num1, then later try to use it by calling ordenado.

I ordered it all, but a quick look at your console would have enabled you to do the same. Good Luck !