JavaScript function is only working with 1 or 2 variables

Question

JavaScript function is only working with 1 or 2 variables

Navigation

#1 by (1 votes)

0

I'm using the following code to check if a radio is selected, if it is, perform such a function:

<script language="javascript">
  document.onclick = function setFries() {
    var apc = document.getElementById("10000_3").checked;
    var ape = document.getElementById("10000_5").checked;

    if (apc) {
      window.alert("teste 1");
    }
  }
</script>

But if I add more than 2 variables the script just does not work.

In total I will use 24 variables, so I did the following:

<script language="javascript">
  document.onclick = function setFries() {
    var apc = document.getElementById("10000_3").checked;
    var ape = document.getElementById("10000_5").checked;
    var aac = document.getElementById("10000_6").checked;
    var aae = document.getElementById("10000_7").checked;
    var cpc = document.getElementById("10000_8").checked;
    var cpe = document.getElementById("10000_9").checked;
    var cac = document.getElementById("10000_10").checked;
    var cae = document.getElementById("10000_11").checked;
    var dpc = document.getElementById("10000_12").checked;
    var dpe = document.getElementById("10000_13").checked;
    var dac = document.getElementById("10000_14").checked;
    var dae = document.getElementById("10000_15").checked;
    var hpc = document.getElementById("10000_16").checked;
    var hpe = document.getElementById("10000_17").checked;
    var hac = document.getElementById("10000_18").checked;
    var hae = document.getElementById("10000_19").checked;
    var lpc = document.getElementById("10000_20").checked;
    var lpe = document.getElementById("10000_21").checked;
    var lac = document.getElementById("10000_22").checked;
    var lae = document.getElementById("10000_23").checked;
    var ppc = document.getElementById("10000_24").checked;
    var ppe = document.getElementById("10000_25").checked;
    var pac = document.getElementById("10000_26").checked;
    var pae = document.getElementById("10000_27").checked;

    if (apc) {
      window.alert("teste 2");
    }
  }
</script>

But it did not work, I was excluding 1 in 1 variable, and only worked when I was 2.

Please, where is the error?

javascript

asked by anonymous 18.02.2017 / 20:55

1 answer

How can I make margin-top relative to a div? How to write to an .json file

score 1 · Accepted Answer

I tried to reproduce your current scenario based on your example posted in the comments.

Handlebars.registerHelper("inc", function(value, options) {
    return value + 1;
});
var data = [
  [3, 5], [6, 7], [8, 9], [10, 11], 
  [12, 13], [14, 15], [16, 17], [18, 19], 
  [20, 21], [22, 23], [24, 25], [26, 27]
];
var form = document.getElementById("form");
var source = document.getElementById("tmpl").textContent;
var template = Handlebars.compile(source);
form.innerHTML = template(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script><formid="form">

</form>
<script id="tmpl" type="text/x-handlebars-template">
{{#each this}}
<fieldset>
  <legend>
    Form {{inc @index}}
  </legend>
  <label>
    <input  id="10000_{{this.[0]}}" type="radio" class="poll_answer {{this.[0]}} twoglux_styled" value="{{this.[0]}}" name="options_{{inc @index}}" data-color="black" />
    Black
  </label>
  <label>
    <input  id="10000_{{this.[1]}}" type="radio" class="poll_answer {{this.[1]}} twoglux_styled" value="{{this.[1]}}" name="options_{{inc @index}}" data-color="blue" />
    Blue
  </label>
</fieldset>
{{/each}}
</script>

First you need to understand how input[type='radio'] works, it will keep a single input selected from all with the same name .

In the example above, Form 1 has inputs with name options_1 , Form 2 with options_2 , and so on, so when selecting an option on a Form other are not deselected.

Now see what happens when all inputs has the same name .

Handlebars.registerHelper("inc", function(value, options) {
    return value + 1;
});
var data = [
  [3, 5], [6, 7], [8, 9], [10, 11], 
  [12, 13], [14, 15], [16, 17], [18, 19], 
  [20, 21], [22, 23], [24, 25], [26, 27]
];
var form = document.getElementById("form");
var source = document.getElementById("tmpl").textContent;
var template = Handlebars.compile(source);
form.innerHTML = template(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script><formid="form">

</form>
<script id="tmpl" type="text/x-handlebars-template">
{{#each this}}
<fieldset>
  <legend>
    Form {{inc @index}}
  </legend>
  <label>
    <input  id="10000_{{this.[0]}}" type="radio" class="poll_answer {{this.[0]}} twoglux_styled" value="{{this.[0]}}" name="options" data-color="black" />
    Black
  </label>
  <label>
    <input  id="10000_{{this.[1]}}" type="radio" class="poll_answer {{this.[1]}} twoglux_styled" value="{{this.[1]}}" name="options" data-color="blue" />
    Blue
  </label>
</fieldset>
{{/each}}
</script>

But if for some reason, you need the inputs in distinct forms to have name distinct, then you can use the following version.:

Handlebars.registerHelper("inc", function(value, options) {
    return value + 1;
});
var data = [
  [3, 5], [6, 7], [8, 9], [10, 11], 
  [12, 13], [14, 15], [16, 17], [18, 19], 
  [20, 21], [22, 23], [24, 25], [26, 27]
];
var form = document.getElementById("form");
var source = document.getElementById("tmpl").textContent;
var template = Handlebars.compile(source);
form.innerHTML = template(data);

(function () {
  var options = form.querySelectorAll("input[name^='options']");
  var current = null;
  var onOptionClick = function (event) {
    var proposto = event.target;
    if (current && current.name != proposto.name) {
      current.checked = false;
    }
    current = proposto;
  };
  [].forEach.call(options, function (option, indice) {
    option.addEventListener("click", onOptionClick);
  });
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script><formid="form">

</form>
<script id="tmpl" type="text/x-handlebars-template">
{{#each this}}
<fieldset>
  <legend>
    Form {{inc @index}}
  </legend>
  <label>
    <input  id="10000_{{this.[0]}}" type="radio" class="poll_answer {{this.[0]}} twoglux_styled" value="{{this.[0]}}" name="options_{{inc @index}}" data-color="black" />
    Black
  </label>
  <label>
    <input  id="10000_{{this.[1]}}" type="radio" class="poll_answer {{this.[1]}} twoglux_styled" value="{{this.[1]}}" name="options_{{inc @index}}" data-color="blue" />
    Blue
  </label>
</fieldset>
{{/each}}
</script>