I have the following HTML:

<button name="darkBlue" onclick="setThemeColor(this.name)">Blue</button>
<button name="black" onclick="setThemeColor(this.name)">Black</button>

and this script:

if (localStorage.buttonColor) {
   var themeButtons = document.querySelectorAll(".theme");
   for (var button in themeButtons) {
      themeButtons[buttons].removeAttribute("disabled");
   }
   // I need here to disable the button with the name that matches localstorage name
}

I already have in place a way to remove the disabled from all the buttons. But how can I after that disable the button which has the same name as the localStorage.buttonColor without using jQuery?

Also could I do all this in the for (var button in themeButtons) loop? If I could do that it might be even more clean of a solution.

I have the following HTML:

<button name="darkBlue" onclick="setThemeColor(this.name)">Blue</button>
<button name="black" onclick="setThemeColor(this.name)">Black</button>

and this script:

if (localStorage.buttonColor) {
   var themeButtons = document.querySelectorAll(".theme");
   for (var button in themeButtons) {
      themeButtons[buttons].removeAttribute("disabled");
   }
   // I need here to disable the button with the name that matches localstorage name
}

I already have in place a way to remove the disabled from all the buttons. But how can I after that disable the button which has the same name as the localStorage.buttonColor without using jQuery?

Also could I do all this in the for (var button in themeButtons) loop? If I could do that it might be even more clean of a solution.

• javascript

Share Improve this question Follow asked Oct 11, 2013 at 10:23 user1943020user1943020 1

• 2 document.getElementsByName? – putvande Commented Oct 11, 2013 at 10:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

If there's only one button:

document.querySelector('button[name="' + localStorage.buttonColor + '"]').disabled = true;

Or:

var el = document.getElementsByName(localStorage.buttonColor);
if (el) {
    el[0].disabled = true;
}

If there are multiple elements:

var all = document.querySelectorAll('button[name="' + localStorage.buttonColor + '"]');
for (var i = 0, len = all.length; i<len; i++){
    all[i].disabled = true;
}

If there are multiple buttons, and you need to enable the ones that don't share the name of the localStorage.buttonColor:

var buttons = document.getElementsByTagName('button'),
    buttonsQSA = document.querySelectorAll('button');

// iterate over whichever collection you prefer to use
for (var i = 0, len = buttonsQSA.length; i<len; i++){
    buttonsQSA[i].disabled = buttonsQSA[i].name == localStorage.buttonColor;
}