Javascript table to fetch data

Question

I’m making a page where I want to make a kind of simulator and I’m having difficulty in one of the table zones select a name and in the following column appear a price that I put.

https://jsfiddle.net/vo3re2fg/

All this and then in the end give me a final result.

Thank you

Answer 1

you need to store the value of the destination somewhere, for such advise you to use custom attributes (a.ka.. data-*)

<select name="destino">
  <option />
  <option data-custo-ini="2000" data-custo-adi="1500">Destino 01</option>
  <option data-custo-ini="1500" data-custo-adi="1200">Destino 02</option>
  <option data-custo-ini="2500" data-custo-adi="1900">Destino 03</option>
  <option data-custo-ini="1000" data-custo-adi="800">Destino 04</option>
</select>

to recover this value, use the dataset property:

var destino = document.querySelector("[name='destino']");
var option = destino.options[destino.selectedIndes];

var custoInicial = option.dataset.custoIni;
var custoFinal = option.dataset.custoAdi;

Node that in Javascript, you remove the data and turns the name of the variable to camelCase, then data-custo-ini should be accessed as custoIni.

Finally, a much more complex example will perhaps help you understand the linking and manipulation of DOM.

var tmplDestino = document.getElementById("tmplDestino").content;
var destinosTBody = document.querySelector("#destinos tbody");
var addDestino = document.getElementById("addDestino");
var spanOrcamento = document.getElementById("orcamento");
var formater = new Intl.NumberFormat('pt-PT', { style: 'currency', currency: 'EUR' });
var destinos = [];

var Destino = function () {
  var that = this;
  this.dom = {};  
  this.dom.linha = document.importNode(tmplDestino, true);
  this.dom.qtdAdultos = this.dom.linha.querySelector("[name='qtdAdultos']");
  this.dom.destino = this.dom.linha.querySelector("[name='destino']");
  this.dom.custoInicial = this.dom.linha.querySelector("[name='custoInicial']");
  this.dom.custoAdicional = this.dom.linha.querySelector("[name='custoAdicional']");
  this.dom.custoTotal = this.dom.linha.querySelector("[name='custoTotal']");
  destinosTBody.appendChild(this.dom.linha);
  
  this.dom.qtdAdultos.addEventListener("input", function () {
    that.onQuantidadeInput();
  })
  
  this.dom.destino.addEventListener("change", function () {
    that.onDestinoChange();
  })
}

Object.defineProperty(Destino.prototype, "qtdAdultos", {
  get: function () {
    var qtd = this.dom.qtdAdultos.valueAsNumber;
    var min = this.dom.qtdAdultos.min;
    var max = this.dom.qtdAdultos.max;
    if (qtd && qtd >= min && qtd <= max) {
      return qtd;
    } else {
      return 0;
    }
  },
  set: function (value) {
    this.dom.qtdAdultos.value = value;
  }
})

Object.defineProperty(Destino.prototype, "destino", {
  get: function () {
    var option = this.dom.destino.options[this.dom.destino.selectedIndex];
    return option.innerHTML;
  }
})

Object.defineProperty(Destino.prototype, "custoInicial", {
  get: function () {
    if (this.dom.destino.selectedIndex == 0)
      return 0;
    var option = this.dom.destino.options[this.dom.destino.selectedIndex];
    return parseInt(option.dataset.custoIni);
  }
})

Object.defineProperty(Destino.prototype, "custoAdicional", {
  get: function () {
    if (this.dom.destino.selectedIndex == 0)
      return 0;
    var option = this.dom.destino.options[this.dom.destino.selectedIndex];
    return parseInt(option.dataset.custoAdi);
  }
})

Object.defineProperty(Destino.prototype, "custoTotal", {
  get: function () {
    if (this.qtdAdultos == 0)
      return 0;
    return this.custoInicial + (this.custoAdicional * (this.qtdAdultos - 1));
  }
})

Destino.prototype.onQuantidadeInput = function () {  
  this.updateTotal();
}

Destino.prototype.onDestinoChange = function () {  
  this.dom.custoInicial.innerHTML = formater.format(this.custoInicial);
  this.dom.custoAdicional.innerHTML = formater.format(this.custoAdicional);
  this.updateTotal();
}

Destino.prototype.updateTotal = function () {  
  this.dom.custoTotal.innerHTML = formater.format(this.custoTotal);
  Destino.updateOrcamento();
}

Destino.updateOrcamento = function () {
  var orcamento = 0;
  destinos.forEach(function (destino, indice) {
    orcamento += destino.custoTotal;
  });
  spanOrcamento.innerHTML = formater.format(orcamento)
}

addDestino.addEventListener("click", function () {
  var destino = new Destino();
  destinos.push(destino);
});

td {
  padding: 5px;
}

td input, td select {
  width: 100%;
}

<input id="addDestino" type="button" value="adicionar Destino" />
<table id="destinos">
  <thead>
    <tr>
      <th>Número de Adultos</th>
      <th>Destino da Viagem</th>
      <th>Custo Inicial Euros</th>
      <th>Custo Adicional Euros</th>
      <th>Total</th>      			
    </tr>
  </thead>
  <tbody></tbody>
  <tfoot>
    <tr>
      <td colspan="3"></td>
      <td>Total</td>
      <td><span id="orcamento"></span></td>      			
    </tr>
  </tfoot>
</table>

<template id="tmplDestino">
  <tr>
    <td>
      <input type="number" name="qtdAdultos" min="1" max="12" />
    </td>
    <td>
      <select name="destino">
        <option />
        <option data-custo-ini="2000" data-custo-adi="1500">Destino 01</option>
        <option data-custo-ini="1500" data-custo-adi="1200">Destino 02</option>
        <option data-custo-ini="2500" data-custo-adi="1900">Destino 03</option>
        <option data-custo-ini="1000" data-custo-adi="800">Destino 04</option>
      </select>
    </td>
    <td><span name="custoInicial"></span></td>
    <td><span name="custoAdicional"></span></td>
    <td><span name="custoTotal"></span></td>      			
  </tr>
</template>