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

Question

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

Navigation

#1 by (3 votes)

1

I've tried it anyway and I can not get the javascript compute3 function to run correctly. The result is only one decimal place and does not obey the option selected. Detail: The code must be in pure javascript . If anyone can help I am immensely grateful. Here is 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>

javascript html-select html-option option selected-option

asked by anonymous 02.06.2018 / 20:33

1 answer

How to increase the number of iterations of a function in R? How do I create a CSV in C by incrementing the first number?

score 3 · Accepted Answer

In a comparison, use == and not =

= - Assignment, a = 'b' , assigns variable to value b
== - Comparison, a == 'b' , compares variable a with value b

Your if else are awful *, instead of doing what you did 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 else should be together

You also forgot to get the value of select

document.getElementById("decimais") ; - HTML element reference
document.getElementById("decimais").value ; - value of attribute value of HTML element

Another detail, that does not cause error, but it is not done like this:

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

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

On top of all this, you're doing it the hard way, you could simply pass the value from select to 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>

* Sorry for:

They take up more space than they should, otherwise the code gets cleaner
Less readable, the second form becomes clearer intent