javascriptdominnerhtml

innerHtml Not Working On Div

I am making a website here and I have circular divs on the main page. Now I've set javascript to shrink their size and relocate them whenever the window's width goes under 743 pixels. I also want the div's contents to be replaced by a simple Header. Using innerHtml is not working. When the size of the window goes under 743 the divs shrink but the contents of the first one remain there.

Here is my html:

<!DOCTYPE html>
<html>
<head>
   <link type="text/css" rel="stylesheet" href="Portfolio.css"/>
   <script type="text/javascript" src="Portfolio.js"></script>
</head>
<body>
<div class="menuIcon" id="menuIcon">
    <div class="menuIcon1"></div>
    <div class="menuIcon2"></div>
    <div class="menuIcon3"></div>
</div>

<div class="circleBase type1" id="circle1">
    <h2>About me</h2>
    <div class="circleBase insideText" id="insideText">
    <p class="circleP" id="circleP">
        <!--info about me here
  <br/>Welcome to my world.</p>-->
    </div>
</div>

<div class="circleBase type2" id="circle2">
<h2> Projects </h2>
<div class="circleBase screenshots" id="screenshots">

</div>
</div>

<div id="menu" class="sideMenu">
    <img src="xIcon.png" alt="xIcon" class="xIcon" id="xIcon"/>
    <li class="li"><a href="#">Home</a></li>
    <li class="li"><a href="#">Contact</a></li>
    <li class="li"><a href="#">About</a></li>
</div>
<div class="header">
    <h1 class="headerP" id="header">
        My Portfolio
    </h1>
</div>
</body>
</html>

Here is my Javascript: 

var g = {};

function openMenu()
{
    g.menuBar.style.width = "100%";

}
function closeMenu()
{
    g.menuBar.style.width = "0%";
}

function changeSize()
{
    if(window.innerWidth <= 743)
    {
      g.circle1.innerHtml = '<h2>About Me</h2>';
      g.circle1.style.width = "150px";
      g.circle1.style.height = "150px";
      g.circle1.style.marginTop = "30%";
      g.circle1.style.marginLeft = "5%";

      g.circle2.innerHtml = "";
      g.circle2.style.width = "150px";
      g.circle2.style.height = "150px";
      g.circle2.style.marginTop = "60%";
      g.circle2.style.marginLeft = "5%";
    }
    else if(window.innerWidth > 743)
    {
      g.circle1.style.width = "400px";
      g.circle1.style.height = "400px";
      g.circle1.style.marginTop = "10%";
      g.circle1.style.marginLeft = "5%";

      g.circle2.style.width = "400px";
      g.circle2.style.height = "400px";
      g.circle2.style.marginTop = "25%";
      g.circle2.style.marginLeft = "35%";

    }
}

function init()
{
  g.menuBar = document.getElementById("menu");
  g.icon = document.getElementById("menuIcon");
  g.xIcon = document.getElementById("xIcon");
  g.xIcon.addEventListener('click', closeMenu);
  g.icon.addEventListener('click', openMenu);
  window.addEventListener('resize', changeSize);

  g.circle1 = document.getElementById("circle1");
  g.circle2 = document.getElementById("circle2");


}

window.onload = init;
Solution

  • The DOM property is innerHTML and not innerHtml.