You need to store the value of the destination somewhere, for this I advise you to use custom attributes
(a.k.a. 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 retrieve 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 data
and transform the variable name to camelCase
, so data-custo-ini
should be accessed as custoIni
.
Finally, a more complex example will perhaps help you understand DOM language and manipulation.
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>