Question

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>

Answer 1

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.net/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.