Doubt to automate function in javascript

Question

Doubt to automate function in javascript

Navigation

#1 by (2 votes)

1

I am using a Javascript function to show / hide a div according to the choice of a radio , but now they have become many, so I am trying to automate this in the way I am learning in codeacademy. p>

From the code I already used, I created a variable as a function, and assign two parameters, one for each id (of radio , which must be checked, and div , which should appear). I then put it in HTML the same way I used it (within onclick ), but it is not working.

Here's how I'm trying:

FIDDLE .

JS:

var esconderradio = function(var1, var2) {

    if (document.getElementById(var1).checked) {
        document.getElementById(var2).style.display = "";
    }
    else {
        document.getElementById(var2).style.display = "none";
    }
};

From there in the HTML I put it like this:

<label class="radio" for="Csaldsim">
    Sim
    <input type="radio" id="Csaldsim" onclick="esconderradio('Csaldim', 'salvenc')"></label>
<label class="radio" for="Csaldnao">
    Não
    <input type="radio" id="Csaldnao" onclick="onclick="esconderradio('Csaldim', 'salvenc')"></label>

And so is the code I'm using (I've adapted 2 cases to show how I'm doing, but they're already 33):

FIDDLE .

    function HabCampos33() {
        if (document.getElementById('Csaldsim').checked) {
            document.getElementById('salvenc').style.display = "";
        }  else {
            document.getElementById('salvenc').style.display = "none";
        }
    }


    function HabCampos32() {
        if (document.getElementById('Csaldsim2').checked) {
            document.getElementById('salvenc2').style.display = "";
        }  else {
            document.getElementById('salvenc2').style.display = "none";
        }
    }

<label class="radio" for="Csaldsim">
    Sim
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldsim" onclick="HabCampos33()"></label>
<label class="radio" for="Csaldnao">
    Não
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldnao" onclick="HabCampos33()"></label>

<br>
<label class="radio" for="Csaldsim2">
    Sim
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldsim2" onclick="HabCampos32()"></label>
<label class="radio" for="Csaldnao2">
    Não
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldnao2" onclick="HabCampos32()"></label>

<br>

<div  class=" col-md-3 panel panel-default" id="salvenc" style="display:none;">
    <label class="btn" for="Csalvenc">
        <input type="number" class="form-control" name="Tsalvenc" id="Csalvenc"></label>
</div>
<br>
<div  class=" col-md-3 panel panel-default" id="salvenc2" style="display:none;">
    <label class="btn" for="Csalvenc">
        <input type="number" class="form-control" name="Tsalvenc" id="Csalvenc2"></label>
</div>

javascript html html5

asked by anonymous 09.06.2015 / 01:39

1 answer

Error passing JS array values to simple PHP menu not fixed when scrolling the page

score 2 · Accepted Answer

I've changed its function, take a look:

function manipulaDiv(checked, idDiv) {
    if (checked) {
        document.getElementById(idDiv).style.display = "";
    }  else {
        document.getElementById(idDiv).style.display = "none";
    }
}

<label class="radio" for="Csaldsim">
    Sim
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldsim" onclick="manipulaDiv(true, 'salvenc')"></label>
<label class="radio" for="Csaldnao">
    Não
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldnao" onclick="manipulaDiv(false, 'salvenc')"></label>

<br>
<label class="radio" for="Csaldsim2">
    Sim
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldsim2" onclick="manipulaDiv(true, 'salvenc2')"></label>
<label class="radio" for="Csaldnao2">
    Não
    <input type="radio" data-toggle="radio" name="Tsald" id="Csaldnao2" onclick="manipulaDiv(false, 'salvenc2')"></label>

<br>
<br>

<div  class=" col-md-3 panel panel-default" id="salvenc" style="display:none;">
    <label class="btn" for="Csalvenc">
        <input type="number" class="form-control" name="Tsalvenc" id="Csalvenc"></label>
</div>
<br>
<div  class=" col-md-3 panel panel-default" id="salvenc2" style="display:none;">
    <label class="btn" for="Csalvenc">
        <input type="number" class="form-control" name="Tsalvenc" id="Csalvenc2"></label>
</div>
<br>