时间戳

首页 > 解决方案 > 如何事件监听页面内点击的任何 html 标签，并输出其 id 属性的值

javascript - 如何事件监听页面内点击的任何 html 标签，并输出其 id 属性的值

问题描述

我希望能够使用单击的任何锚点/链接的 id 属性值来修改/输出到特定标头标记的内容。

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

标签： javascripthtmldomaddeventlistener

解决方案

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

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

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

推荐阅读