Adds a field to the Online Calculator

Question

Adds a field to the Online Calculator

Navigation

#1 by (2 votes)

2

Hello everyone I do not know much about javascript and I need a little help. In this script in the downlink in jsfiddle I need to add another field to perform the calculation. It pays the value of an input and multiplies it by another input and I need to add a dropdown to make a split. then it would look like this

  Hoje é assim
        <input type="text" name="qtd" /> x
        <input type="text" name="valor" value="10" /> =
        <input type="text" name="total" value="resultado" />

   Gostaria assim
      qtd    <input type="text" name="qtd" /> x
      valor  <input type="text" name="valor" value="10" /> / 
             <select name="mark[]"   id="mark" > 
                <option value="0.80">0.80</option>
                <option value="0.85">0.85</option>
                <option value="0.90">0.90</option>
                </select>
        =    <input type="text" name="total" value="resultado" />

  Então
 QTD x VALOR = resultado / dropdown  =  input "total"

link

javascript

asked by anonymous 22.09.2015 / 04:33

1 answer

How to manipulate margin of a Flat-UI video Doubt PostBackUrl

score 2 · Accepted Answer

Just use the code

var selectMark = parseFloat(document.getElementById("mark").value);

to get the value of the new select, and then use it to split it.

The link to the example code you passed is here updated .

Update to function as array

function getClosest(el, tagName) {
  while (el = el.parentNode) {
    if (el.tagName.toLowerCase() == tagName) return el;
  }
}

//como nao estamos usando jquery, devemos realizar o loop para cada item selecionado

var classQtd = document.getElementsByClassName("qtd");
for (var i = 0; i < classQtd.length; i++) {
  classQtd[i].addEventListener("keyup", function(e) {
    updateValue(e);
  });
}

var classValor = document.getElementsByClassName("valor");
for (var i = 0; i < classValor.length; i++) {
  classValor[i].addEventListener("keyup", function(e) {
    updateValue(e);
  });
}

var classMark = document.getElementsByClassName("mark");
for (var i = 0; i < classMark.length; i++) {
  classMark[i].addEventListener("change", function(e) {
    updateValue(e);
  });
}

//funcao para atualizar os valores
function updateValue(e) {
  var total = 0;
  var qtd = 0;
  var valor = 0;
  var mark = 0;

  // ir buscar o outro valor dentro da mesma linha
  var tr = getClosest(e.target, 'tr');
  valor = tr.querySelector('input[name="valor[]"]').value;
  qtd = tr.querySelector('input[name="qtd[]"]').value;
  mark = parseFloat(tr.querySelector('select[name="mark[]"]').value);

  total = (qtd * valor) / mark;
  tr.querySelector('input[name="total[]"]').value = total;
}

<table>
  <tr class="selectable">
    <td class="center">
      <input type="text" class="qtd" name="qtd[]" />
    </td>
    <td class="text-center">
      <input type="text" class="valor" name="valor[]" value="10" />
    </td>
    <td class="text-center">
      <select name="mark[]" class="mark">
        <option value="0.80">0.80</option>
        <option value="0.85">0.85</option>
        <option value="0.90">0.90</option>
      </select>
    </td>
    <td class="text-center">
      <input type="text" class="total" name="total[]" value="resultado" />
    </td>
  </tr>
  <tr class="selectable">
    <td class="center">
      <input type="text" class="qtd" name="qtd[]" />
    </td>
    <td class="text-center">
      <input type="text" class="valor" name="valor[]" value="10" />
    </td>
    <td class="text-center">
      <select name="mark[]" class="mark">
        <option value="0.80">0.80</option>
        <option value="0.85">0.85</option>
        <option value="0.90">0.90</option>
      </select>
    </td>
    <td class="text-center">
      <input type="text" class="total" name="total[]" value="resultado" />
    </td>
  </tr>
  <tr class="selectable">
    <td class="center">
      <input type="text" class="qtd" name="qtd[]" />
    </td>
    <td class="text-center">
      <input type="text" class="valor" name="valor[]" value="10" />
    </td>
    <td class="text-center">
      <select name="mark[]" class="mark">
        <option value="0.80">0.80</option>
        <option value="0.85">0.85</option>
        <option value="0.90">0.90</option>
      </select>
    </td>
    <td class="text-center">
      <input type="text" class="total" name="total[]" value="resultado" />
    </td>
  </tr>
</table>