Change value attribute by class via JavaScript

Question

I have the following HTML:

<input class="vertical-tabs-active-tab" type="hidden" value="account" name="tabs__active_tab">

I need JavaScript that will change the value of "account" to "yolo".

I thought I could do this:

document.getElementsByClassName('vertical-tabs-active-tab').setAttribute("value", "yolo");

But that produces an error of:

document.getElementsByClassName(...).setAttribute is not a function

I'm not able to add an "id" to input, I have to change the value based on class.

if your'e so fresh to js, why aren't you easing your learning curve by using jQuery? — New Alexandria, Nov 05 '13 at 20:55
It smells like XY problem actually. And the solution is `dataset`. — raina77ow, Nov 05 '13 at 20:58
@NewAlexandria I think it should be the other way around - pure JS first and jQuery after. You have to understand basic JS concepts to use jQuery. — Yuriy Galanter, Nov 05 '13 at 20:58
@YuriyGalanter I do not need to understand how jQuery handles various response object formats in order to call `$.post()`. — New Alexandria, Nov 05 '13 at 21:07
@NewAlexandria u kidding? .post? what's ajax? what's JSON? what's async? — Yuriy Galanter, Nov 05 '13 at 21:08
@YuriyGalanter they are things that are easier to implement if you aren't worried about each browser's different flavor of them. — New Alexandria, Nov 05 '13 at 21:11
@NewAlexandria I was wrong. You *can* start studying JavaScript from jQuery. You can stumble upon small things like not knowing what an object, function or array is, but that shouldn't be a problem for a determined learner. — Yuriy Galanter, Nov 05 '13 at 21:16

score 19 · Accepted Answer · answered Nov 05 '13 at 20:55

19

document.getElementsByClassName('vertical-tabs-active-tab')[0].setAttribute("value", "yolo");

document.getElementsByClassName returns an array of elements, specify the index of the element you wish to change.

answered Nov 05 '13 at 20:55

tymeJV

103,943
14
161
157

This worked perfect for me! Thank you everyone for the quick response. This was my first time ever posting on here and I was very surprised at how fast the responses are. To give everyone more detail. I had to make a Next button for Drupal Vertical Tabs. So the tabs are all created dynamically from Drupal core and the CSS hidden class is used by Drupal to keep track of which tab is the current tab. The core generates that CSS hidden class too. So I had to write JS to tap into the Drupal core to make the dynamic Next button. Thank you tymeJV! – Cagey215 Nov 05 '13 at 21:22

score 8 · Answer 2 · answered Nov 05 '13 at 21:03

8

This may do what you want:

var elms = document.getElementsByClassName('vertical-tabs-active-tab')
for (var i = 0; i < elms.length; i++) {
  if (elms[i].getAttribute("value") === "account"){
   elms[i].setAttribute("value", "yolo");
  }
}

answered Nov 05 '13 at 21:03

Archangel33

496
8
22

1

**Archangel33**, I like the snippet above even though the solution above worked for me. I saved your snippet so I know how iterate through the array in the future. In case I need to target a different element. Thank you! – Cagey215 Nov 06 '13 at 15:03

score 1 · Answer 3 · answered Nov 05 '13 at 20:56

1

getElementsByClassName return a list/array of elements. Pick element through index and set value on it. You can also iterate over elements. getElementById return only one element.

answered Nov 05 '13 at 20:56

Anton Bessonov

9,208
3
35
38

Change value attribute by class via JavaScript

3 Answers3