Javascript function is only working with 1 or 2 variables

Asked

Viewed 62 times

0

I am using the following code to check if a radio is selected, if you are, to 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 simply doesn’t work.

In total I will use 24 variables, so I did it as follows:

<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 didn’t work, I was excluded 1 in 1 variable, and it only worked when I was 2.

Please, where is the error?

javascript

  • Do these HTML elements exist? Can you explain what you are trying to do? Writing all this by hand seems a bad idea... I think you can optimize a lot.

  • Where does the A3 variable come from in the first code snippet? How about running the setFries function inside the click event.

  • Wesley, as @Sergio pointed out, it seems to me that you had a lot of effort to do something simple, take a look at the following fiddle.: Jsfiddle

  • @Maurivan thanks for the remark, I forgot to change it on how much I wrote the question here on the site, would be 'apc'

  • @Sergio thanks for the remark, I was working with nonexistent references, I’m readjusting to see if the problem was just this.

  • @Can Tobias please move to a chat? I don’t know if I should be commenting or editing the question. ps: don’t know how to move to a chat

  • @Wesley you still haven’t explained what you want to do...

  • @Sergio olá Sergio, I went to Fiddle to illustrate my need https://jsfiddle.net/h3hkduym/6/ There are 12 forms on the same page, each of them have 2 radio input to choose either option. The function called by onclick on the Submit button should display an alert for the user (according to the selection will be a different Alert). What I couldn’t do: Have the function clear the user selection in the other forms, as each one has 2 selection options and 1 Submit button. Example, form 1, selected 1st radio, when submitting reset other selections.

  • @Tobiasmesquita Tobias, is it possible to modify your code so that when you click on a radio, the others are deselected? https://jsfiddle.net/6dkenu99/4/ as I did, it is not possible to choose the radios of form 2 or 3.

Show 4 more comments

1 answer

1


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>
<form id="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 the input[type='radio'] works, it will keep a single input selected from all with the same name.

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

now see what happens when all the 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>
<form id="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 different formats to have name distinct, so 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>
<form id="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>

  • It worked, thanks! I used the third example, because I need a different name for each form.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.