How to make a javascript function run correctly with <option> and <select> tag?

Question

I’ve tried anyway and can’t get the javascript function compute 3 execute correctly. The result comes out with only one decimal and does not obey the option selected. Detail: the code needs to be in pure javascript. If anyone can help, I’m immensely grateful. Follows the code:

function calcular3() {
  var x = parseFloat(document.getElementById("x").value);
  var y = parseFloat(document.getElementById("y").value);
  var t = parseFloat(document.getElementById("t").value);
  var z = x + y * t;
  var decimais = document.getElementById("decimais");
  if (decimais = 0) {
    var z = z.toFixed(0);
  } else {
    if (decimais = 1) {
      var z = z.toFixed(1);
    } else {
      if (decimais = 2) {
        var z = z.toFixed(2);
      } else {
        if (decimais = 3) {
          var z = z.toFixed(3);
        } else {
          if (decimais = 4) {
            var z = z.toFixed(4);
          } else {
            if (decimais = 5) {
              var z = z.toFixed(5);
            } else {
              if (decimais = 6) {
                var z = z.toFixed(6);
              } else {
                if (decimais = 7) {
                  var z = z.toFixed(7);
                } else {
                  if (decimais = 8) {
                    var z = z.toFixed(8);
                  } else {
                    if (decimais = 9) {
                      var z = z.toFixed(9);
                    } else {
                      if (decimais = 10) {
                        var z = z.toFixed(10);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  document.getElementById("resultado").innerHTML = z;
}

<p>
  <label>variável x</label>
  <input id="x" type="number" placeholder="x">
</p>
<p>
  <label>variável y</label>
  <input id="y" type="number" placeholder="y">
</p>
<p>
  <label>variável z</label>
  <input id="t" type="number" placeholder="t">
</p>
<p>Resultado: x + y*t = <span id="resultado"></span></p>

<select id="decimais" onchange="calcular3();return false;">
  <option value="0">0 decimal</option>
  <option value="1">1 decimal</option>
  <option value="2" selected>2 decimais</option>
  <option value="3">3 decimais</option>
  <option value="4">4 decimais</option>
  <option value="5">5 decimais</option>
  <option value="6">6 decimais</option>
  <option value="7">7 decimais</option>
  <option value="8">8 decimais</option>
  <option value="9">9 decimais</option>
  <option value="10">10 decimais</option>
</select>

Answer 1

In a comparison it should be used == and not =

• = - Attribution, a = 'b', assigns the variable to the value b
• == - Comparison, a == 'b', compares variable a with value b

Their if else are terrible*, instead of doing what you did you should do something like this:

if (decimais = 0) {
    var z = z.toFixed(0);
} else if (decimais = 1) {
    var z = z.toFixed(1);
}
// ...

That is, instead of creating a if within the else should be along

You also forgot to take the value of select

• document.getElementById("decimais"); - Reference of the HTML element
• document.getElementById("decimais").value; - attribute value value of the HTML element

Another detail, which does not cause error, but does not do so:

var z = 'texto';
if(true) {
    var z = 'imagem';
}

z has already been declared as variable it is not necessary to use the keyword var again

Besides all this, you’re doing it the hard way, you could just pass the value of the select to the toFixed()

function calcular3() {
  var x = parseFloat(document.getElementById("x").value);
  var y = parseFloat(document.getElementById("y").value);
  var t = parseFloat(document.getElementById("t").value);
  var z = x + y * t;
  var decimais = document.getElementById("decimais").value;
  z = z.toFixed(decimais);
  
  document.getElementById("resultado").innerHTML = z;
}

<p>
  <label>variável x</label>
  <input id="x" type="number" placeholder="x">
</p>
<p>
  <label>variável y</label>
  <input id="y" type="number" placeholder="y">
</p>
<p>
  <label>variável z</label>
  <input id="t" type="number" placeholder="t">
</p>
<p>Resultado: x + y*t = <span id="resultado"></span></p>

<select id="decimais" onchange="calcular3();return false;">
  <option value="0">0 decimal</option>
  <option value="1">1 decimal</option>
  <option value="2" selected>2 decimais</option>
  <option value="3">3 decimais</option>
  <option value="4">4 decimais</option>
  <option value="5">5 decimais</option>
  <option value="6">6 decimais</option>
  <option value="7">7 decimais</option>
  <option value="8">8 decimais</option>
  <option value="9">9 decimais</option>
  <option value="10">10 decimais</option>
</select>

* Terrible in the sense of:

• They take up more space than they should, otherwise the code gets cleaner (clean)
• Less readable, the second form becomes clearer the intention