Select dynamically inserted HTML elements with Javascript

Question

I’m developing a kind of calculator, where the client puts some information listed in "select" elements and calculates the value of the service to be hired. In this calculator, there is the option to select the type of service to which the customer wants to calculate prices, that is, the parameters "name" and "id" change according to the selection of the customer’s service. Follow below the codes

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();

});

The above functions insert an HTML block into the #Calc-tit-desc and #Calc-paramenters Section that are the texts describing the service being calculated and the parameters (select elements) to be chosen by the client. The problem arises from the fact that after entering the HTML content by javascript, the values of select cannot be accessed, since the error appears as "cannot find a null value", that is, javascript cannot find that select inserted after loading the page.

Code that is inserted by dynamically

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>';

Selecting the values of the selectors

var obraTamanho = document.getElementById("tamanho-obra");
var contaminacao = document.getElementById("contaminacao");

Function calculator() {

$(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";
    }


});

}

And there using if Else successively for the chosen data

Does anyone know how I can get around this?

Grateful from now on

Answer 1

I believe you didn’t post all the code, but I’ve been through a similar problem, when creating a button dynamically the "click" event didn’t work on the buttons created.

I tried to take the event the following way:

$("#idBotao").click(function() {

});

So I changed the way I caught the event and it worked:

$("#idBotao").on( "click", function() {

});