Question

大家好，我试图通过id中的div获取function的{{1}}，像这样：

javascript

该函数位于我的<div id="txtHint" onload="getId(this);"></div>页面的</body>标签之前

html

在我的function getId(theId) { var name = document.getElementById(theId); }页面的正文中，我有一个html：

button

点击我会收到<button type="button" onclick="alert(getId())">get</button> undefined

我如何获得alert？有人可以帮忙吗？

Answer 1

尽管我不知道它的用例，但是您可以将id传递给函数，然后从函数中返回它：

function getId(theId) {
  var name = document.getElementById(theId);
  return name.id;
}

<div id="txtHint"></div>

<button type="button" onclick="alert(getId('txtHint'))">get</button>

更新：如果您想按标签获取所有ID，只需将标签传递给函数并获取这些元素的所有ID：

function getId(el) {
  var element = document.querySelectorAll(el);
  var id = [...element].map(i=>i.id).filter(i=>i);
  return id;
}

<div id="txtHint1">First</div>
<div id="txtHint2">Second</div>
<div id="txtHint3">Third</div>
<div id="txtHint4">Fourth</div>

<button type="button" onclick="alert(getId('div'))">get</button>

Answer 2

编写函数的唯一方法是拥有全局variable

var divId = null;
function getId(div) {
   divId = div.id;
}

function getId() {
  alert(divId);
}

这是我的建议

第一种方法是在onload事件中“标记” div，并使用此“标记”获取其ID。

function markDiv(thisDiv) {
  thisDiv.classList.add('mark')
}

function getMarkedDiv() {
  var div = document.querySelector('.mark');
  alert(div.id);
}

<div id="Mark" onload="markDiv(this)" class="mark"></div>

<button onclick="getMarkedDiv()">button</button>

另一种方法是将button和div包装在一个父对象中

function getMySiblingId(button) {
  alert(button.parentElement.firstElementChild.id);
}

<div id="Parent">
  <div id="Mark"></div>
  <button onclick="getMySiblingId(this)">Button</button>
</div>

或者最简单的方法是将按钮包装在所需的div中

function getId(btn) {
  alert(btn.parentElement.id);
}

<div id="Mark">
  <button onclick="getId(this)">Click me</button>
</div>
<div id="Alice">
  <button onclick="getId(this)">Click me</button>
</div>
<div id="Charlie">
  <button onclick="getId(this)">Click me</button>
</div>

当然，在所有这些情况下，我都不认为您要获取多个div的ID

Answer 3

所以我重新制作了代码

function divField(theDivFieldId) {
  var name = document.getElementById(theDivFieldId);
  return name.id;
}

html

<div id="txtHint" onload="alert(divField(this));"></div>

什么也没发生

通过引用这个来获取div的ID

3 个答案: