Question

How can I get the text value from an elements’s child?

Say I have this code on a page:

<div class='geshitop'>
  &#91; CODE &#93; &#91; <a href="#" onclick="javascript:copy(); return false;">PLAIN-TEXT</a> &#93;
</div>
<div class='geshimain'>
  <pre><div class="text" style="font-family:monospace;">Code goes here...</div></pre>
</div>

The function copy():

<script type="text/javascript">
function copy() {
    var text = this.parent.getElementsByName("text");
    var code = text[0].value;
    var popup = window.open("", "window", "resizeable,width=400,height=300");
    popup.document.write("<textarea name='code' cols='40' rows='15'></textarea>");
    popup.code.value = code;
}

How would I go about getting that child’s data: the <div class "text">. How can I get that from the parent?

---

I’m still having problems. If there is two codeboxes on one page, then it does not work. Remember, I am unable to use ID’s. It must be classes.

If I was able to use jQuery this would be easy.

Answer 1

Try this:

Change your HTML slightly. The “javascript:” prefix isn’t necessary inside an onclick handler. Also, pass a reference of “this” to your copy function:

<div class='geshitop'>
  &#91; CODE &#93; &#91; <a href="#" onclick="copy(this); return false;">PLAIN-TEXT</a> &#93;
</div>
<div class='geshimain'>
  <pre><div class="text" style="font-family:monospace;">Code goes here...</div></pre>
</div>

Having done that, alter your copy function to accept the new parameter. Then you just have to locate the correct node. From the question, I think you are looking for the next <div class=”text”> that is a child of the <div class=”geshimain”> that is the next sibling of the parent node that contains the link that was clicked. This function should accomplish that:

function copy(node) {
    node = node.parentNode; // <div class="geshitop">

    // Loop over adjacent siblings, looking for the next geshimain.
    while (node.nextSibling) {
        node = node.nextSibling;
        if (node.nodeName === 'DIV' && node.className === 'geshimain') {
            break;
        }
    }

    if (!node) {
        throw new Error("Could not locate geshimain");
    }

    // Locate the <div class="text">
    node = (function () {
        var divs = node.getElementsByTagName('div');
        for (var x = 0; x < divs.length; x++) {
            if (divs[x].className === 'text') {
                return divs[x];
            }
        }
        return null;
    }());

    if (!node) {
        throw new Error("Could not locate text");
    }

    node =
    '<textarea name="code" cols="40" rows="15">' + node.innerHTML + "</textarea>";
    popup = window.open("", "window", "resizeable,width=400,height=300");
    popup.document.write(node);
    popup.document.close();
}

Good luck!