I encountered a problem while practicing html. When I used parentNode in JavaScript, I thought it is not hard to treat.

But to get some element under parentNode using getElementById or another function is not working as my thinking.

var this_question = selectObj.parentNode.parentNode;
    alert(this_question); //it is working perfectly
    alert(this_question.getElementById('question'))

It's not working. I can't understand...

<script>
function addQuestion(selectObj) {
    var this_question = selectObj.parentNode.parentNode;
    alert(this_question); //it is working perfectly
    alert(this_question.getElementById('question')) //It's not working. I can't understand..
}
</script>

<ol id="question_list">
    <li>
        <textarea class="question" name="question" id="question"></textarea>
        <select name="question_type" id="question_type" onChange="javascript:selectEvent(this)">
            <option>-----</option>
            <option value="text" >단답형</option>
            <option value="paragraph" >서술형</option>
            <option value="multiple_choice">다지선</option>
            <option value="checkbox">다중선택</option>
            <option value="scale">scale</option>
        </select>   

        <div id='answer_div'><p>부가설명:<input name='top_label' id='top_label' type='paragraph' /></p> <p>답변:<input name='answer_text' id='answer_text' type='text' /></p></div>

        <p>
            <input type="button" value="Add Question" onclick="javascript:addQuestion(this)"/>
            <input type="button" value="Done" onclick="javascript:finish()"/>
         </p>
    </li>
</ol>

I encountered a problem while practicing html. When I used parentNode in JavaScript, I thought it is not hard to treat.

But to get some element under parentNode using getElementById or another function is not working as my thinking.

var this_question = selectObj.parentNode.parentNode;
    alert(this_question); //it is working perfectly
    alert(this_question.getElementById('question'))

It's not working. I can't understand...

<script>
function addQuestion(selectObj) {
    var this_question = selectObj.parentNode.parentNode;
    alert(this_question); //it is working perfectly
    alert(this_question.getElementById('question')) //It's not working. I can't understand..
}
</script>

<ol id="question_list">
    <li>
        <textarea class="question" name="question" id="question"></textarea>
        <select name="question_type" id="question_type" onChange="javascript:selectEvent(this)">
            <option>-----</option>
            <option value="text" >단답형</option>
            <option value="paragraph" >서술형</option>
            <option value="multiple_choice">다지선</option>
            <option value="checkbox">다중선택</option>
            <option value="scale">scale</option>
        </select>   

        <div id='answer_div'><p>부가설명:<input name='top_label' id='top_label' type='paragraph' /></p> <p>답변:<input name='answer_text' id='answer_text' type='text' /></p></div>

        <p>
            <input type="button" value="Add Question" onclick="javascript:addQuestion(this)"/>
            <input type="button" value="Done" onclick="javascript:finish()"/>
         </p>
    </li>
</ol>

• javascript
• html
• dom

• Which element are you trying to get a reference to? – meouw Commented Oct 2, 2011 at 7:59

3 Answers 3

getElementById() is a method of documents, not available in elements.

You may use:

this_question.getElementsByTagName('textarea')[0]

getElementsByTagName() is available in elements.

You have two elements with the same id attribute but id attributes must be unique:

1. <ol id="question">
2. <textarea class="question" name="question" id="question"></textarea>

When you duplicate id attributes strange things happen. If you change the <textarea> to have id="question_text", for example, things start working better:

http://jsfiddle/ambiguous/67DZr/

From the HTML4 specification:

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

and from the HTML5 specification:

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character.

You can use:

baseElement.querySelector('#' + id)

It returns:

The first descendant element of baseElement which matches the specified group of selectors.

See:

https://developer.mozilla/en-US/docs/Web/API/Element/querySelector