Change innerHTML of element with JS eventlistener

Question

I am trying to add a event listener to a anchor tag with id of "rta". After getting the element by id I am trying to change the innerHTML of a element with class of "inner-content" but the change does work. What am I doing wrong? Thank you.

HTML Element

<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";
});

The full code is at this 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> 

Answer 1

1. it is document.querySelector
2. I answer because I can see this turning into a non-DRY solution - note the CSS for .header a too

 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>