Question

我很难过。据我所知，其他帖子应该可以替换p标签的内容：

<p id="activateSubMenuIcons">.</p>

<script type="text/javascript">
   window.onload = function() { 
    document.getElementById("activateSubMenuIcons").innerHTML = "hello";
   }
</script>

但没有骰子。此外，控制台中没有出现错误迹象。有人会善意地告诉我我做错了吗？

修改

好的，这是Umbraco呈现的整个HTML：

<!DOCTYPE html>

<html>
    <head>
        <title>WSHA</title>

        <meta charset="utf-8" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="/css/wsha-style.css">
        <link rel="stylesheet" type="text/css" href="/css/wsha-style-mobile.css">
        <link href="https://fonts.googleapis.com/css?family=Encode+Sans" rel="stylesheet">
    </head>

    <body>





<nav>

  <img id="logo" src="/media/1042/wshalogo.png">

    <ul>

       <li class="current"><a href="/">Home</a>
       <span id="mainMenuIcon" class="fa fa-bars menuIcon"></span>
       </li>

            <li class="mainMenuItem">
                <a href="/about-us/">About us</a>

              <span id="1259" class="fa fa-caret-down menuIcon subMenuOpener"></span>
              <ul>
                       <li><a href="/about-us/our-people/">Our People</a></li> 
                       <li><a href="/about-us/who-we-were-and-are/">Who we were and are</a></li> 
                       <li><a href="/about-us/our-houses/">Our Houses</a></li> 
                       <li><a href="/about-us/annual-reports/">Annual Reports</a></li> 
             </ul>

             </li>
            <li class="mainMenuItem">
                <a href="/being-a-tenant/">Being a Tenant</a>

              <span id="1293" class="fa fa-caret-down menuIcon subMenuOpener"></span>
              <ul>
                       <li><a href="/being-a-tenant/asbestos/">Asbestos</a></li> 
                       <li><a href="/being-a-tenant/being-safe-secure/">Being Safe &amp; Secure</a></li> 
             </ul>

             </li>
            <li class="mainMenuItem">
                <a href="/news/">News</a>

              <span id="1305" class="fa fa-caret-down menuIcon subMenuOpener"></span>
              <ul>
                       <li><a href="/news/community-garden/">Community Garden</a></li> 
                       <li><a href="/news/football-team/">Football Team</a></li> 
                       <li><a href="/news/health-centre/">Health Centre</a></li> 
             </ul>

             </li>
    </ul>
    <br class="clear">
</nav>

<p id="activateSubMenuIcons">.</p>

<script type="text/javascript">
   window.onload = function() { 
    document.getElementById("activateSubMenuIcons").innerHTML = "hello";
   }
</script>





<div id="banner" style="background-image: url('/media/1035/houses-banner.jpg');">

    <div id="bannerTitle">
        <h1>Whiteinch & Scotstoun Housing Association</h1>
    </div>

</div>

<div id="bannerMobile">

    <div id="bannerTitle">
        <h1>Whiteinch & Scotstoun Housing Association</h1>
    </div>

</div>

<div id="subTitle">

    <h4 class="text-centre">A Charity Registered in Scotland No. SC035633.</h4>
    <h2 class="text-centre">Aiming for High Quality Homes in a Desirable Environment</h2>

</div>

<div id="homeContent-container">
    <div id="homeContent">

        <p><p>Welcome to our website.  Please let us know if there is any information you would like to see included which we haven't thought of.</p>
<p>The modules are designed to help you navigate the site, and by clicking on the 'keys' on the left hand side of the module home pages, you will, hopefully, find the infomation you need.</p>
<p>You can opt for a text only version (see top of page), and there is the facility to download Adobe Reader is you want to print off any information and don't have this facility already (see below).</p>
<p>Please contact us using the link at the bottom of the page.</p></p>

    </div>
</div>


        <div id="footerContent">

    <div class="footerContentBlock" id="first">
        <h4>Quick Links</h4>
                <ul>
                        <li>
                            <a href="http://www.banskorental.co.uk/about-us/our-people/" target="_blank">
                            <p>Our People</p>
                            </a>
                        </li>
                </ul>
                <ul>
                        <li>
                            <a href="http://www.banskorental.co.uk/news/" target="_blank">
                            <p>News</p>
                            </a>
                        </li>
                </ul>
                <ul>
                        <li>
                            <a href="http://www.banskorental.co.uk/about-us/annual-reports/" target="_blank">
                            <p>Annual Reports</p>
                            </a>
                        </li>
                </ul>
                <ul>
                </ul>
                <ul>
                </ul>
    </div>

    <div class="footerContentBlock" id="middle">
        <h4>Opening Hours</h4>
<table border="0" height="79" style="width: 272.583px;">
<tbody>
<tr>
<td style="width: 144px;">Monday to Thursday</td>
<td style="width: 108.583px;">9am to 5pm</td>
</tr>
<tr>
<td style="width: 144px;">Friday</td>
<td style="width: 108.583px;">9am to 3pm</td>
</tr>
<tr>
<td style="width: 144px;">Saturday, Sunday</td>
<td style="width: 108.583px;">Closed</td>
</tr>
</tbody>
</table>
    </div>

     <div class="footerContentBlock" id="last" >
        <p style="text-align: right;"><strong>Whiteinch and Scotstoun Housing Association</strong></p>
<p style="text-align: right;">The Whiteinch Centre</p>
<p style="text-align: right;">1 Northinch Court</p>
<p style="text-align: right;">Glasgow</p>
<p style="text-align: right;">G14 0UG</p>
<p style="text-align: right;"> </p>
<p style="text-align: right;">Phone: 0141 959 2552</p>
<p style="text-align: right;">Fax: 0141 950 4432</p>
<p style="text-align: right;">email: wsha_admin@wsha.org.uk</p>
    </div>

</div>


<div id="googleTranslateContainer">

    <p>Translate this page.</p>
    <p id="closeButton" onclick="translateClose()">x</p>

    <div id="googleTranslate"></div>

</div>

<script type="text/javascript">
    function translateClose() {
    document.getElementById("googleTranslateContainer").style.visibility = "hidden";
    }
</script>

 <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 

 <script type="text/javascript">
    function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en'}, 'googleTranslate');
    }
 </script> 

        <script type="text/javascript" src="/scripts/template2Javascript.js"></script>
    </body>


</html>

和template2Javascript.js中的javascript：

document.getElementById("mainMenuIcon").onclick = function () {
    var x = document.getElementsByClassName("mainMenuItem");
    var numberOfMenuItems = x.length;

    for ( i=0 ; i < numberOfMenuItems ; i++ ) {

    if (x[i].style.display === "none") {
        x[i].style.display = "block";
    } else {
        x[i].style.display = "none";

    }
}
};

Answer 1

如果您在控制台中打印某些内容，则必须编写cosole.log()之类的内容

  console.log(document.getElementById("activateSubMenuIcons1").innerHTML);

并且您也阻止了p tag value than += concat with old value

window.onload = function() {
  document.getElementById("activateSubMenuIcons").innerHTML = "hello";
  document.getElementById("activateSubMenuIcons1").innerHTML += "hello";

  console.log(document.getElementById("activateSubMenuIcons1").innerHTML);
}

<p id="activateSubMenuIcons">.</p>
<p id="activateSubMenuIcons1">.</p>

Answer 2

我为浪费每个人的时间而道歉。我现在意识到我误解了innerHTML是如何工作的。我一直在寻找源代码的变化，而不是浏览器的变化。我没有发现它工作的原因是文本在白色显示白色。当我改变css使其变为紫色并且200％它出现时我可以看到它确实起作用。

我只需要重新思考我正在尝试做的事情 - 请参阅以下关于Bhargav答案的评论。

新手被innerHTML困扰

2 个答案: