Question

161

Javascript - Get child's text value

rated 0 times [ 162] [ 1] / answers: 1 / hits: 33796 / 15 Years ago, mon, july 6, 2009, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isaacvalentinn

Add To Favorites

Follow

Total Points: 325

Total Questions: 120

Total Answers: 131

Location: North Korea

Member since Tue, Jun 16, 2020

4 Years ago

isaacvalentinn questions

1 BrowserAuthError: interaction_in_progress - Unable to fix, regardles of solutions found

Tue, Aug 10, 21, 00:00, 3 Years ago

1 How to transform a Luxon DateTme object to a date

Mon, Jan 18, 21, 00:00, 3 Years ago

1 __dirname is not defined

Mon, Nov 23, 20, 00:00, 4 Years ago

1 How to get status code in angular observable

Wed, Sep 23, 20, 00:00, 4 Years ago

1 running node with loader ts-node/esm.js requires imports to have the .js extension

Wed, Sep 9, 20, 00:00, 4 Years ago

View All

answered 15 Years ago mitchell · Accepted Answer

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!