Estou desenvolvendo uma espécie de calculadora, onde o cliente coloca algumas informações listadas em elementos "select" e calcula o valor do serviço a ser contratado. Nessa calculadora, há a opção de selecionar o tipo de serviço ao qual o cliente quer calcular os preços, isso é, os parâmetros "name" e "id" mudam de acordo com a seleção do serviço do parte do cliente. Segue abaixo os códigos
HTML
<section class="wrapper style1 align-center">
<div class="inner">
<h2>Calcule Preços de Planos</h2>
<p id="ccl">Simule valores para contratar avulso ou planos periódicos. </p>
<h3>Calculando para:</h3>
<div class="items style1 medium sem-borda no-padding-top">
<div class="field third">
<input type="radio" id="ph" name="setserv" value="ph" onClick="setCalc()" checked />
<label for="ph">Diarista Por Hora</label>
</div>
<div class="field third">
<input type="radio" id="po" name="setserv" value="po" onClick="setCalc()" />
<label for="po">Limpeza Pós Obra</label>
</div>
</div>
<div class="items style1 medium onscroll-fade-in calculadora">
<section id="calc-tit-desc">
</section>
<section id="calc-parametros">
</section>
<section class="calc-preco">
<div class="preco">
<h2 id="calc-preco" class=""></h2>
</div>
<ul class="actions">
<li>
<span class="button special">Quero Contratar!</span>
</li>
</ul>
</section>
</div>
</div>
JAVASCRIPT
function setCalcPO() {
ctd.innerHTML = calcTitDescPO;
cpa.innerHTML = calcParametrosPO;
calcPreco.innerHTML = "R$0,00";
}
function setCalcPH() {
ctd.innerHTML = calcTitDescPH;
cpa.innerHTML = calcParametrosPH;
calcPreco.innerHTML = "R$0,00";
}
function setCalc() {
if (isEasy()) {
setCalcEasy();
} else if (isPO()) {
setCalcPO();
} else if (isPH()) {
setCalcPH();
}
}
$(document).ready(function() {
setCalc();
});
As funções acima inserem um bloco HTML nas section #calc-tit-desc e #calc-paramentros que são os textos que descrevem o serviço que está sendo calculado e os parâmetros (elementos select) a serem escolhidos pelo cliente. O problema surge do fato de que após a inserção do conteúdo HTML pelo javascript, os valores do select não podem ser acessados, dado que o erro aparece como "não é possível encontrar um valor de um nulo", ou seja, o javascript não consegue encontrar aquele select inserido depois de carregado a página.
Código que é inserido pelo dinâmicamente
var calcTitDescPO = '<h3 id="calc-tit">Calculando Para Pós Obra</h3>'+
'<p id="calc-desc">Calcule o valor do serviço de acordo com o tamanho do ambiente e do nível de contaminação por cimento, tinta, argamassa etc.</p>';
var calcParametrosPO = '<div class="select-wrapper">'+
'<select name="tamanho-obra" id="tamanho-obra" >'+
'<option value="1">- TAMANHO M² -</option>'+
'<option value="50">Até 50 m²</option>'+
'<option value="100">De 50 à 100 m²</option>'+
'<option value="150">De 100 à 150 m²</option>'+
'<option value="200">De 150 à 200 m²</option>'+
'<option value="maior200">Acima de 200</option>'+
'</select><br />'+
'</div>'+
'<div class="select-wrapper">'+
'<select name="contaminacao" id="contaminacao">'+
'<option value="1">- CONTAMINAÇÃO -</option>'+
'<option value="sem">Sem contaminação</option>'+
'<option value="baixo">Baixo</option>'+
'<option value="medio">Médio</option>'+
'<option value="alto">Alto</option>'+
'<option value="critico">Crítico</option>'+
'</select>'+
'</div>'+
'<ul class="actions margintop">'+
'<li>'+
'<span class="button" id="calc-botao" onclick="calcularObra()">Calcular</span>'+
'</li>'+
'</ul>';
Selecionando os valores dos seletores
var obraTamanho = document.getElementById("tamanho-obra");
var contaminacao = document.getElementById("contaminacao");
function calcularObra() {
$(document).ready(function() {
if(obraTamanho.value !== 0 && contaminacao.value === 0) {
cpe.innerHTML = "Falta informar o nível de contaminação";
} else if (obraTamanho.value === 0 && contaminacao.value !== 0) {
cpe.innerHTML = "Falta informar o tamanho do local";
}
});
}
E ai usando else if sucessivamente para os dados escolhidos
Alguém sabe como posso contornar isso?
Grato desde já