Two array types into one function

Question

I have a form where you click a button and a collection of elements need the opacity changed and the radio or checkbox selected. I have a bunch of these in the form so I need assistance with creating this type of array. Some of the IDs are dp001, dp002 …. dp050 so there needs to be a condition appending the prefix to it when it gets to dp010. This collection of elements I want to change the opacity. The other collection of elements isn't in any particular order but I want to collect them and make them checked. Somewhere I created a FUBAR :)

Fiddle won't work … really pi$$ing me off don't know why jsfiddle refuses to load javascript for me. Is This Fiddle FUBAR?

On my web server the alert works fine the doesn't do what I want. Javscript works on my server check it out.

HTML

<div id="dp001">Item #1 <input type="radio" id="abc005"></div>
<div id="dp002">Item #2 <input type="radio" id="abc008"></div>
<div id="dp003">Item #3 <input type="checkbox" id="abc010"></div>
<div id="dp004">Item #4 <input type="checkbox" id="abc020"></div>
<div id="dp005">Item #5</div>
<div id="dp006">Item #6</div>
<div id="dp007">Item #7</div>
<div id="dp008">Item #8</div>
<div id="dp009">Item #9</div>
<div id="dp010">Item #10</div>
<div id="dp011">Item #11</div>
<button type="button" onclick="DoStuff();">Click</button>

JAVASCRIPT

  function DoStuff() {
   var items = null;
   var checkMe = ["abc005" , "abc0008" , "abc010" , "abc020"];
   for (i=1 ; i < 12 ; i++) {
   if (i < 10) {
   items = 'dp00' + i;
   } else {
   items = 'dp0' + i;
   }
  }
   alert("ding");
   document.getElementById("items").style.opacity="0.5";
   document.getElementById("checkMe").checked = true;

 }

(In jsFiddle, if you're using inline JS function calls, you have to make them global. Your fiddle defines DoStuff in an onload wrapper = not global, so the inline event handler doesn't know DoStuff. Fix = use No wrap - in body.) — Rudie
– Rudie, Commented May 13, 2014 at 23:06
Thanks Rudie no wrap - in body is the fix it was driving me nuts. — DivineChef
– DivineChef, Commented May 13, 2014 at 23:16

Oriol · Accepted Answer · 2014-05-13 22:52:58Z

1

I think you need

function DoStuff() {
    var checkMe = ["abc005" , "abc0008" , "abc010" , "abc020"];
    for (var i=1; i < 12; i++) {
        var items = 'dp0' + (i<10 ? '0' : '') + i;
        document.getElementById(items).style.opacity = 0.5;
    }
    for (var i=0, l=checkMe.length; i<l; ++i)
        document.getElementById(checkMe[i]).checked = true;
}

Problems with your code:

"items" is a literal string, not the variable items. Same for "checkMe".
You must change each element inside the loop, not outside.
You don't declare variable i
You can use the ternary conditional to simplify code (optional)

edited May 13, 2014 at 22:52

answered May 13, 2014 at 22:46

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DivineChef Over a year ago

Great it works except I want all the checkboxes and radio buttons checked it only checks the first one for me.

Oriol Over a year ago

@user3362232 In html you have id="abc008" but in the array "abc0008". Then getElementById returns null, and trying to set checked property throws an error that stops the loop.

DivineChef Over a year ago

Yes you are correct thanks for the help and correction/explanations.

Collectives™ on Stack Overflow

Two array types into one function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related