如何事件侦听在页面内单击的任何 html 标记，以及 output 其 id 属性的值

Question

我希望能够修改/输出到特定 header 标记的内容，其中任何一个锚点/链接的 id 属性值都被单击。

目前，我只能使用第一个 id 的值更改文本“City”（在下面的示例中为“New York”） - 因为文本位于嵌套的 div 标签之外，但仍在锚标签内。 所以第一个链接有效，但第二个和第三个链接传递空字符串/不提供 output。 我希望文本/内容保留在 div 标签中，如第二个和第三个链接中一样。

<base target=splash>

<H3 id=myTitle onclick="myFunction()">City</H3>

<a class="clickable" href="myPage.htm?id=108" id="New+York">New York
    <div class=cityWrap>
        <DIV class=cityNo>108</DIV>
        <DIV class=cityName>New York</DIV>
        <DIV class=country>USA</DIV>
    </div>
</a>

<a class="clickable" href="myPage.htm?id=110" id="Shanghai">
    <div class=cityWrap>
        <DIV class=cityNo>110</DIV>
        <DIV class=cityName>Shanghai</DIV>
        <DIV class=country>China</DIV>
    </div>
</a>

<a class="clickable" href="myPage.htm?id=112" id="Damascus">    
    <div class=cityWrap>
        <DIV class=cityNo>112</DIV>
        <DIV class=cityName>Damascus</DIV>
        <DIV class=country>Syria</DIV>
    </div>
</a>

<IFRAME src="myPage.htm" name=splash></IFRAME>


    <script>
window.addEventListener('load', () => {

let myFunction = event => {
let clickedElem = event.target;
document.getElementById('myTitle').innerHTML = clickedElem.id;
};

for (let elem of document.getElementsByClassName('clickable')) elem.addEventListener('click', myFunction);

});
   </script>

Answer 1

你可以为每个链接尝试这样的事情

<a onclick="getElementById('myTitle').innerHTML = your title here">your value here</a>

否则尝试搜索 w3schools onclick 活动希望这会有所帮助：>

Answer 2

第 1 步：将侦听器添加到所有必需的元素

你有几个选择。

您可以详尽列出 javascript 中的所有可点击 ID：

let ids = [ 'New York', 'Shanghai', 'Damascus' /* ... */ ];
for (let id of ids) document.getElementById(id).addEventListener('click', myFunction);

您可以通过它们都是元素来定位a点击元素：

for (let elem of document.getElementsByTagName('a')) elem.addEventListener('click', myFunction);

您可以为所有需要a元素附加一个通用 class ，并使用document.getElementsByClassName ：

html:

<a class="clickable" href="myPage.htm?id=New York" id="New York">New York</A>
<a class="clickable" href="myPage.htm?id=Shanghai" id="Shanghai">Shanghai</A>
<a class="clickable" href="myPage.htm?id=Damascus" id="Damascus">Damascus</A>

js:

for (let elem of document.getElementsByClassName('clickable')) elem.addEventListener('click', myFunction);

第 2 步：确定在myFunction中单击了哪个元素：

现在，无论单击哪个元素，都会调用相同的 function myFunction 。 我们必须弄清楚点击了哪个特定元素，以确定要显示哪个 id。

幸运的是Event.target为我们做到了这一点。 我们可以将myFunction重写为如下所示：

let myFunction = event => {

  // Get the <a> element that was clicked
  let clickedElem = event.target;

  // Apply that element's id as the innerHTML of the #myTitle element
  document.getElementById('myTitle').innerHTML = clickedElem.id;

};

最终代码

可能看起来像这样：

 window.addEventListener('load', () => { let myFunction = event => { let clickedElem = event.target; document.getElementById('myTitle').innerHTML = clickedElem.id; event.preventDefault(); // Important to prevent page navigation }; for (let elem of document.getElementsByTagName('a')) elem.addEventListener('click', myFunction); });

 [href$="=108"], [href$="=108"] * { background-color: #ffa0a0; } [href$="=110"], [href$="=110"] * { background-color: #a0ffa0; } [href$="=112"], [href$="=112"] * { background-color: #a0a0ff; } a > div { pointer-events: none; }

 <h3 id=myTitle>City</H3> <a href="myPage.htm?id=108" id="New+York">New York <div class=cityWrap> <DIV class=cityNo>108</DIV> <DIV class=cityName>New York</DIV> <DIV class=country>USA</DIV> </div> </a> <a href="myPage.htm?id=110" id="Shanghai"> <div class=cityWrap> <DIV class=cityNo>110</DIV> <DIV class=cityName>Shanghai</DIV> <DIV class=country>China</DIV> </div> </a> <a href="myPage.htm?id=112" id="Damascus"> <div class=cityWrap> <DIV class=cityNo>112</DIV> <DIV class=cityName>Damascus</DIV> <DIV class=country>Syria</DIV> </div> </a>