Add One More Field to Inline Calculator

Question

I don’t know much about javascript and I need a little help. In this script at the bottom link in jsfiddle I need to add another field to perform the calculation. It pays the value of an input and multiplies by another input and I need to add a dropdown to realign a division. 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" 

http://jsfiddle.net/mxjfLu1x/

Answer 1

Just use the code

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

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

the example code link you passed, is here updated

Update to work as an 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>