Accessing the content value from within 3 classes in Javascript

Question

So I have a dropdown box with values "No" and "Yes" but it will not property display it when selected. It just comes up as blank. No matter what I choose, I want it to display what I have chosen, either "Yes" or "No".

So I got the class names for everything that I need.

For the selected value that is being displayed in the dropdown box is:

<a class="select2-choice" tabindex="-1" onclick="return false;" href="javascript:void(0)">
    <span class="select2-chosen">No</span>
    <abbr class="select2-search-choice-close"></abbr>
    .....
</a>

The dropdown box html code is:

<ul class="select2-results">
    <li class="select2-results-dept-0 select2-result select2-result-selectable">
          <div class="select2-result-label">No</div>
    </li>
    <li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted">
          <div class="select2-result-label">Yes</div>
    </li>
</ul>

So I want to access the values of select2-result-label and set them to the select2-chosen content value. I tried doing it, but it's giving me an error in FireBug.

Here's what I did so far... What am I doing wrong?

function testFunc() {
    var x = document.getElementsByClassName("select2-chosen");
    var y = document.getElementsByClassName("select2-results-dept-0 select2-result select2-result-selectable select2-highlighted")
            .getElementsByClassName("select2-result-label");
    x[0].innerHTML = y;
}

Answer 1

You are using getElementsByClassName in the wrong context. This function merely returns all elements that have any of the specified class names.

As select2-highlighted is only assigned to a selected element, it's the only class you should care about. Making these changes should help:

function testFunc() {
  var x = document.getElementsByClassName("select2-chosen");
  var y = document.getElementsByClassName("select2-highlighted")[0].getElementsByClassName("select2-result-label");
  x[0].innerHTML = y[0].innerHTML;
}

Answer 2

It should work with

x[0].innerHTML = y[0].innerHTML;

But why did you make it so f=difficult for yourself? Why didn't you use radio buttons, for instance? And why didn't you use id's?

Answer 3

EDIT replace

"var y = document.get..."

with

"var y = document.getElementsByClassName("select2-results-dept-0 select2-result select2-result-selectable select2-highlighted")[0].children[0].innerHTML;"

========================================================================= Try something like this to make use of radio buttons, as Sylvia suggested:

window.setAnswer = function(dom) {
    var els = document.getElementsByTagName('input');
    for (el in els)
    {
        if (els[el].checked)
        {
            document.getElementsByTagName('h1')[0].innerHTML = els[el].nextSibling.nodeValue;               
            break;
        }
    }
}

<input type="radio" name="radio" onclick="setAnswer()">Yes</input><br>
<input type="radio" name="radio" onclick="setAnswer()">No</input><br>
<h1></h1>