Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/excel/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript innerHtml不适用于Div_Javascript_Innerhtml - Fatal编程技术网

Javascript innerHtml不适用于Div

Javascript innerHtml不适用于Div,javascript,innerhtml,Javascript,Innerhtml,我在这里做一个网站,我在主页上有圆形的div。现在,我将javascript设置为在窗口宽度小于743像素时缩小它们的大小并重新定位它们。我还希望div的内容被一个简单的标题替换。使用innerHtml不起作用。当窗口的大小小于743时,div缩小,但第一个窗口的内容仍保留在那里 这是我的html: <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="

我在这里做一个网站,我在主页上有圆形的div。现在,我将javascript设置为在窗口宽度小于743像素时缩小它们的大小并重新定位它们。我还希望div的内容被一个简单的标题替换。使用innerHtml不起作用。当窗口的大小小于743时,div缩小,但第一个窗口的内容仍保留在那里

这是我的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>
以下是我的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;

DOM属性是innerHTML,而不是innerHTML。

Ya我刚才才知道我的bad@user220177JavaScript区分大小写。我过去常常犯同样的错误。试着使用方括号。io这个东西很好。@user220177如果答案对你有帮助,选择它作为接受的答案