时间戳

首页 > 解决方案 > 使用 JS 事件监听器更改元素的 innerHTML

javascript - 使用 JS 事件监听器更改元素的 innerHTML

问题描述

我正在尝试将事件侦听器添加到 id 为“rta”的锚标记。通过 id 获取元素后，我试图更改具有“内部内容”类的元素的 innerHTML，但更改确实有效。我究竟做错了什么？谢谢你。

HTML 元素

<div><a href="#" id="rta"><img src="https://i.imgur.com/whoLELi.png" class="header-img"></a></div>

JS

var rta = document.getElementById("rta");

rta.addEventListener("click", function() {
  querySelector(".inner-content").innerHTML = "RTA Content";
});

完整代码在这个codepen：https ://codepen.io/centem/pen/oNvZLgP

// change inner content with even handler
var rta = document.getElementById("rta");

rta.addEventListener("click", function() {
  querySelector(".inner-content").innerHTML = "RTA Content";
});
html, body {
  margin: 10 auto;
  font-size: 20px;
  height: 100%;
  background-color: #606060;
}

p {
  color: #96ceb4;
  text-align: center;
}

ul {
  list-style: none;
  padding-left: 2%;
}

li {
  padding: 5px;
}

.inner-menu > ul {
  list-style: none;
  margin: 0 auto;
}

.logo {
  height: 100px;  
}

img {
	height: 30px;
}

.header-img {
  height: 60px;
}

a {
  text-decoration: none;
  width: 100%;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

a:hover {
  background-color: blue;
  color: white;
  padding: 0;
}


.flexbox-header > div {
  display: flex;
  font-size: 1em;
  padding: 10px 20px;
}

.header :nth-child(2) {
    padding: 0 40px;
}

.grid-page > div {
    color: #ffeead;
    display: flex;
    align-items: center;
    padding: 0px 20px;
}

.flexbox-header {
  display: flex;
  background-color: #000000;
  color: #ffeead;
}

.flexbox-header :nth-child(3) {
    margin-left: auto;
}

.grid-page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 80px 600px 80px;
}

.header {
  grid-column: span 12;
  display: flex;
  background-color: #D5D8DC;	
}

.menu {
  grid-column: span 1;
  background-color: #3C5197;
}

.content {
  grid-column: span 11;
  background-color: #ffcc5c;
}

.footer {
  grid-column: span 12;
  background-color: #000000;
}

.header > div {
  padding: 0 40px;
}

.inner-grid-page > div {
    color: #606060;
    display: flex;
    align-items: center;
    padding: 0px 20px;
}

.inner-grid-page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 35px 100% 20px;
	width: 100%;
	height: 100%;
}

.inner-header {
  grid-column: span 12;
  display: flex;
  background-color: #ffeead;
  padding: 0 40px;
}

.inner-header > div {
  padding: 60px;
  border-right: 1px solid black;
}

.inner-menu {
  grid-column: span 2;
  background-color: #ffffff;
}

.inner-content {
  grid-column: span 10;
  background-color: #ffcc5c;
}

.inner-footer {
  grid-column: span 12;
  background-color: #88d8b0;
}

#rta-img {
  height: 65px;
}

a#rta {
 display: block;
 height: 100%;
 width: 100%;
 text-decoration: none;
}

a#csi {
 display: block;
 height: 100%;
 width: 100%;
 text-decoration: none;
}

a#fusion {
 display: block;
 height: 100%;
 width: 100%;
 text-decoration: none;
}

a#docs {
 display: block;
 height: 100%;
 width: 100%;
 text-decoration: none;
}
<div class="flexbox-header">
  <div>HOME</div>
  <div>SEARCH</div>
  <div>LOGOUT</div>
</div>
<br>
<div class="grid-page">
  <div class="header">
    <div><a href="#" id="rta"><img src="https://i.imgur.com/whoLELi.png" class="header-img"></a></div>
    <div><a href="#" id="csi"><img src="https://i.imgur.com/XyOCkuy.png" class="header-img"></a></div>
    <div><a href="#" id="fusion"><img src="https://i.imgur.com/E08OPQ4.png" class="header-img"></a></div>
    <div><a href="#" id="docs"><img src="https://i.imgur.com/tt5zNZ0.png" class="header-img"></a></div>
  </div>
  <div class="menu">
    <ul>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
  </div>
  <div class="content">
    <div class="inner-grid-page">
      <div class="inner-header">
        <a href="#"><div>ITEM1</div></a>
        <a href="#"><div>ITEM2</div></a>
        <a href="#"><div>ITEM3</div></a>
        <a href="#"><div>TIEM4</div></a>
        <a href="#"><div>TIEM5</div></a>
      </div>
      <div class="inner-menu">
        <ul>
          <li><img src="https://i.imgur.com/6TBaHEI.jpg" class="logo"></li><br>
          <li><img src="https://i.imgur.com/rgLRv9g.jpg" class="logo"></li><br>
          <li><img src="https://i.imgur.com/FPpRLQP.jpg?1" class="logo"></li>
        </ul>
      </div>
      <div class="inner-content">
        CONTENT
      </div>
      <div class="inner-footer">FOOTER</div>
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>

标签： javascript

解决方案

  1. 这是document.querySelector
  2. .header a我回答是因为我可以看到这变成了一个非 DRY 解决方案 - 请注意 CSS

var content = {
  "rta"   : "This is <b>RTA</b> Content",
  "csi"    : "This is <b>CSI</b> Content",
  "fusion" : "This is <b>fusion</b> Content",
  "docs"   : "This is <b>docs</b> Content"
}
// change inner content with even handler


document.querySelector(".header").addEventListener("click", function(e) {
  e.preventDefault();
  var target = e.target;
  console.log(target.tagName)
  if (target.tagName==="IMG") {
    document.querySelector(".inner-content").innerHTML = content[target.parentNode.id]
  }  
});
html, body {
  margin: 10 auto;
  font-size: 20px;
  height: 100%;
  background-color: #606060;
}

p {
  color: #96ceb4;
  text-align: center;
}

ul {
  list-style: none;
  padding-left: 2%;
}

li {
  padding: 5px;
}

.inner-menu > ul {
  list-style: none;
  margin: 0 auto;
}

.logo {
  height: 100px;  
}

img {
	height: 30px;
}

.header-img {
  height: 60px;
}

a {
  text-decoration: none;
  width: 100%;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

a:hover {
  background-color: blue;
  color: white;
  padding: 0;
}


.flexbox-header > div {
  display: flex;
  font-size: 1em;
  padding: 10px 20px;
}

.header :nth-child(2) {
    padding: 0 40px;
}

.grid-page > div {
    color: #ffeead;
    display: flex;
    align-items: center;
    padding: 0px 20px;
}

.flexbox-header {
  display: flex;
  background-color: #000000;
  color: #ffeead;
}

.flexbox-header :nth-child(3) {
    margin-left: auto;
}

.grid-page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 80px 600px 80px;
}

.header {
  grid-column: span 12;
  display: flex;
  background-color: #D5D8DC;	
}

.menu {
  grid-column: span 1;
  background-color: #3C5197;
}

.content {
  grid-column: span 11;
  background-color: #ffcc5c;
}

.footer {
  grid-column: span 12;
  background-color: #000000;
}

.header > div {
  padding: 0 40px;
}

.inner-grid-page > div {
    color: #606060;
    display: flex;
    align-items: center;
    padding: 0px 20px;
}

.inner-grid-page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 35px 100% 20px;
	width: 100%;
	height: 100%;
}

.inner-header {
  grid-column: span 12;
  display: flex;
  background-color: #ffeead;
  padding: 0 40px;
}

.inner-header > div {
  padding: 60px;
  border-right: 1px solid black;
}

.inner-menu {
  grid-column: span 2;
  background-color: #ffffff;
}

.inner-content {
  grid-column: span 10;
  background-color: #ffcc5c;
}

.inner-footer {
  grid-column: span 12;
  background-color: #88d8b0;
}

#rta-img {
  height: 65px;
}

.header a {
 display: block;
 height: 100%;
 width: 100%;
 text-decoration: none;
}
<div class="flexbox-header">
  <div>HOME</div>
  <div>SEARCH</div>
  <div>LOGOUT</div>
</div>
<br>
<div class="grid-page">
  <div class="header">
    <div><a href="#" id="rta"><img src="https://i.imgur.com/whoLELi.png" class="header-img"></a></div>
    <div><a href="#" id="csi"><img src="https://i.imgur.com/XyOCkuy.png" class="header-img"></a></div>
    <div><a href="#" id="fusion"><img src="https://i.imgur.com/E08OPQ4.png" class="header-img"></a></div>
    <div><a href="#" id="docs"><img src="https://i.imgur.com/tt5zNZ0.png" class="header-img"></a></div>
  </div>
  <div class="menu">
    <ul>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
  </div>
  <div class="content">
    <div class="inner-grid-page">
      <div class="inner-header">
        <a href="#"><div>ITEM1</div></a>
        <a href="#"><div>ITEM2</div></a>
        <a href="#"><div>ITEM3</div></a>
        <a href="#"><div>TIEM4</div></a>
        <a href="#"><div>TIEM5</div></a>
      </div>
      <div class="inner-menu">
        <ul>
          <li><img src="https://i.imgur.com/6TBaHEI.jpg" class="logo"></li><br>
          <li><img src="https://i.imgur.com/rgLRv9g.jpg" class="logo"></li><br>
          <li><img src="https://i.imgur.com/FPpRLQP.jpg?1" class="logo"></li>
        </ul>
      </div>
      <div class="inner-content">
        CONTENT
      </div>
      <div class="inner-footer">FOOTER</div>
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>

推荐阅读