尝试使用 document.getElementById 获取父 ID 和子 ID。尝试同时 select 时出错

Question

我正在使用 switch 语句根据下拉菜单 selection 更改标签的显示。

我有一个 ID 为 'TitleBox' 的 div 和一个 ID 为 'generatePId' 的嵌套 'a'。在我的 switch 语句中，当我 select 'TitleBox' 使用 document.getElementById 时，它找不到 'generatePId'，我得到

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

当我删除行 selecting '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

这是因为您正在用 link 覆盖 div。您应该在 TitleBox div 内创建一个跨度并设置跨度的 innerHtml 而不是 div.

Answer 2

做的时候

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

您正在用 "Number" 替换 TitleBox 的内部 HTML。但是，内部 HTML 恰好是您的 "generatePId" 锚元素。附加 "Number" 文本的解决方法可能是：

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

您可以在 "a" 上使用 class 查找嵌套元素，因此您首先找到 div，然后是 class 对象。 getElementsByClassName returns 一个元素列表，因为你只有 "a"，索引将为 0 :

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

希望对您有所帮助！！

尝试使用 document.getElementById 获取父 ID 和子 ID。尝试同时 select 时出错

Trying to get parent id and child id using document.getElementById. Error when trying to select both

html

javascript

getelementbyid

getelementsbyclassname