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.

Biggs

document.getElementsByClassName(...)[0].setAttribute... – Mcferren

if your'e so fresh to js, why aren't you easing your learning curve by using jQuery? – Cursed

CSS Class on a hidden field - that's new. – Sherman

It smells like XY problem actually. And the solution is dataset. – Combustible

@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. – Sherman

@YuriyGalanter I do not need to understand how jQuery handles various response object formats in order to call $.post(). – Cursed

@NewAlexandria u kidding? .post? what's ajax? what's JSON? what's async? – Sherman

@YuriyGalanter they are things that are easier to implement if you aren't worried about each browser's different flavor of them. – Cursed

@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. – Sherman

Answer 1

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.

Chengtu

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! – Biggs

Answer 2

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");
  }
}

Hsining

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! – Biggs

Answer 3

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.

Sabba