Error TypeError: inputCalle is null in JavaScript

0

Performing a System with PHP and JavaScript I am in the following problematic:

I have a select with an event onChange so depending on what I selected, I can enable or disable some fields, but the problem is that changing the value of select throws me the following error in console:

  

TypeError: inputCalle is null

My form code:

<label>Domicilio si es distinto al del alumno(a):</label><br>
<select class="select" name="domicilio" onchange="habilitarDomicilio(this);">
    <option value=""></option>
    <option value="si">Si</option>
    <option value="no">No</option>
</select><br>
<label>Calle:</label><br>
<input class="in-inp" type="text" name="calle" id="calle"  disabled></input><br>
<label>Número:</label><br>
<input class="in-inp" type="text" name="numero" id="numero" maxlength="5" disabled></input><br>
<label>Colonia:</label><br>
<input class="in-inp" type="text" name="colonia" id="colonia" maxlength="40" disabled></input><br>
<label>Código Postal:</label><br>
<input class="in-inp" type="number" name="cp" id="cp" min="5" max="5" disabled></input><br>
<label>Municipio:</label><br>
<input class="in-inp" type="text" name="municipio" id="municipio" maxlength="50" disabled></input><br>
<label>Estado:</label><br>
<input class="in-inp" type="text" name="estado" id="estado" maxlength="35" disabled></input><br>

JavaScript Code:

var inputCalle = document.getElementById("calle");
var inputNumero = document.getElementById('numero');
var inputColonia = document.getElementById('colonia');
var inputCP = document.getElementById('cp');
var inputMunicipio = document.getElementById('municipio');
var inputEstado = document.getElementById('estado');
function habilitarDomicilio(elemento) {
    d = elemento.value;
    if(d == "si"){
        inputCalle.disabled = false;
        inputCalle.required = true;

        inputNumero.disabled = false;
        inputNumero.required = true;

        inputColonia.disabled = false;
        inputColonia.required = true;

        inputCP.disabled = false;
        inputCP.required = true;

        inputMunicipio.disabled = false;
        inputMunicipio.required = true;

        inputEstado.disabled = false;
        inputEstado.required = true;
    }else{
        inputCalle.disabled = true;
        inputCalle.value = "";
        inputCalle.required = false;

        inputNumero.disabled = true;
        inputNumero.value = "";
        inputNumero.required = false;

        inputColonia.disabled = true;
        inputColonia.value = "";
        inputColonia.required = false;

        inputCP.disabled = true;
        inputCP.value = "";
        inputCP.required = false;

        inputMunicipio.disabled = true;
        inputMunicipio.value = "";
        inputMunicipio.required = false;

        inputEstado.disabled = true;
        inputEstado.value = "";
        inputEstado.required = false;
    }
}

I already tried changing the id's of the elements but I keep throwing the same error, just as I have other methods that do the same and if they work. What is the error?

    
asked by J. Castro 09.11.2018 в 18:02
source

0 answers