Change value of all elements with same class won't work

Question

Problem is I want to change all elements with same class. Example here:

<select class="dntselect"  onchange="go(this); return false;">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    <option value="4">test4</option>
</select>

<form>
    <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
    <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
    <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

So I want to replace that "XXX" value in input with selected option for example. Replace "XXX" value with "test1"

I tried some tutorials and some of my own work but it won't work. And I can't figure how to do it.

<script>
    function go(x) {
        var elements = document.getElementsByClassName('ppselect').value;
        for (var i = 0; i < elements.length; i++) {
            elements[i].x.options[x.selectedIndex].text;
        }
    }
</script>

It is not duplicate - because i am inspired by these "duplicates" but i cant figure how to do it in this case.

IDs **must** be unique. You're using `getElementsByClassName` which is to be used with classes, yet you have none on your inputs — j08691, Feb 09 '18 at 16:41
Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Heretic Monkey, Feb 09 '18 at 16:45
Yeah i used those tutorials but i cant figure out what to do with my problem. Because i have nearly zero experience with js. — , Feb 09 '18 at 16:47
Also of interest here is https://stackoverflow.com/questions/24427621/innertext-vs-innerhtml-vs-label-vs-text-vs-textcontent-vs-outertext — Mark Schultheiss, Feb 09 '18 at 18:04

caramba · Accepted Answer · 2018-02-09T17:06:32.507

Let's ignore the case that you use multiple <form> elements which in this case make no sense just as using type=hidden if you want to see whats going on.

So to answer the question. Why not use document.querySelectorAll() which has the .forEach() option to use like so:

function go(x) {
    var text = x.options[x.selectedIndex].text;
    var elements = document.querySelectorAll('.ppselect');
    elements.forEach(function(element){
        element.value = text;
    });
};

<select class="dntselect"  onchange="go(this); return false;">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
  <option value="4">test4</option>
</select>

<input type="text" class="ppselect" name="item_name" value="XXX">
<input type="text" class="ppselect" name="item_name" value="XXX">

<input type="text" class="ppselect" name="item_name" value="XXX">

rather then pretty much the same thing with using Document.getElementsByClassName() where your have to write the for loop

function go(x) {
    var text = x.options[x.selectedIndex].text;
    var elements = document.getElementsByClassName('ppselect');
    for(var i=0; i < elements.length; i++){
        elements[i].value = text;
    }
};

<select class="dntselect"  onchange="go(this); return false;">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
  <option value="4">test4</option>
</select>

<input type="text" class="ppselect" name="item_name" value="XXX">
<input type="text" class="ppselect" name="item_name" value="XXX">

<input type="text" class="ppselect" name="item_name" value="XXX">

Mark Schultheiss · Answer 2 · 2018-02-09T18:03:38.650

Your script makes little sense to me however perhaps you intended to use the class instead of an id which you duplicated and is invalid.

I modified your function a bit so it would work but that actually still makes little sense to me (setting values of all hidden elements to the selection).

function go(x) {
  var el = document.getElementsByClassName('ppselect');
  for (var i = 0; i < el.length; i++) {
    el[i].value = x.options[x.selectedIndex].innerText;
  }
}

<select class="dntselect" onchange="go(this); return false;">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
  <option value="4">test4</option>
</select>

<form>
  <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
  <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
  <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

NOTE: 3 hidden forms? that is also odd to me. – Mark Schultheiss Feb 09 '18 at 16:51 — Mark Schultheiss, Feb 09 '18 at 16:51

score 0 · Answer 3 · answered Feb 09 '18 at 16:51

this is because document.getElementsByClassName('ppselect').value is undefined

your function should be

function go(x)
{
var elements = document.getElementsByClassName('ppselect'); 
for (var i = 0; i < elements.length; i++) {
        elements[i].value=x.options[x.selectedIndex].innerHTML;
    }
}

Change value of all elements with same class won't work

3 Answers3