Попытка получить идентификатор родителя и дочерний идентификатор с помощью document.getElementById. Ошибка при попытке выбрать оба

Question

Я использую оператор switch, чтобы изменить отображение метки на основе выпадающего списка.

У меня есть div с id 'TitleBox' и вложенный 'a' с id 'generatePId'. В моем заявлении переключателя, когда я выбираю «TitleBox» с помощью document.getElementById, она не может найти «generatePId», и я получаю

Unable to get property 'style' of undefined or null reference 

Когда я удалить строку выбирающего «TitleBox», затем «generatePId» будет найден.

<div id="TitleBox" class="CellTitle" style="width:40px"> <a href="javascript:generateP();" title="xxx." id="generatePId" name= 
        "generatePId">Generate</a></div> 


function onSelectCombo(){ 
var txt = var.getSelectedText(); 
switch(txt) { 
    case "A": 
document.getElementById('generatePId').style.display='none'; 
     break; 
    case "B": 
document.getElementById('generatePId').style.display='none'; 
     break; 
    case "C": 
document.getElementById('TitleBox').innerHTML = "Number"; 
document.getElementById('generatePId').style.display='inline'; 
break; 
    default: 
document.getElementById('generatePId').style.display='inline'; 
    } 
    } 

Answer 1

Его потому что вы переписываете div по ссылке. Вы должны создать пролет внутри div TitleBox и установить innerHtml диапазона, а не div.

Answer 2

При выполнении

document.getElementById('TitleBox').innerHTML = "Number"; 

вы заменяете внутреннюю HTML от TitleBox с "Номер". Тем не менее, этот внутренний HTML является вашим якорь-элементом «generatePId». Обходной для добавления «Номер» текст может быть:

document.getElementById('TitleBox').innerHTML += "Number"; 

Answer 3

document.getElementById('TitleBox').innerHTML = "Number"; //this line 
//changes your DOM to <div foo='bar' ...> Number </div>, so 
//the below line will never work as you expect. 
//you should do x.innerHTML += "Number"; if it fits your needs 
document.getElementById('generatePId').style.display='inline'; 

Answer 4

Вы можете найти вложенный элемент, используя класс на «а», так что вы нашли DIV, а затем объект класса. getElementsByClassName возвращает список элементов, а так же у вас есть только «а», то индекс будет 0:

var targetDiv = document.getElementById("TitleBox").getElementsByClassName("classfora")[0]; 

Надеется, что это помогает !!