javascript没有设置innerHTML

Posted 2023-05-07

技术标签:

【中文标题】javascript没有设置innerHTML【英文标题】：javascript not setting innerHTML 【发布时间】：2011-10-19 13:50:50 【问题描述】：

我正在为客户开发一个网站，我正在使用 ajax 来获取文件的内容，特别是 html，然后我试图将该 html 插入到 div 中，以便我可以显示内容。我知道我正在获取文件的内容，因为我设置了警报以显示请求的 readyState、状态和 responseText，并且它在警报中显示了文件的内容。但是，当我尝试使用此行将其插入 div 时：document.getElementsByClassName('content').innerHTML = response; 没有任何反应。谁能帮我解决这个问题？

代码：

javascript：

<script language="javascript" type="text/javascript">
var request = new ajaxRequest();
var fileLoc;
var response;
function getData(fileName)
    fileLoc = encodeURI("assets/"+fileName+".html")
    alert(fileLoc);
    request.onreadystatechange = processData;
    request.open("GET",fileLoc, false);
    request.send();
    alert(request.readyState);
    alert(response);
    alert(request.status);
    document.getElementsByClassName('content').innerHTML = response;


function processData()
    response = request.responseText;
    /*if (request.readyState==4)
        if (request.status==200)
            try
                document.getElementsByClassName('content').innerHTML = response;
             catch(e)
                alert("Error: " +e.description);
            
        
        else
            alert("An error has occured making the request");
        
    */

function home() 
    getData("home");

function about() 
    getData('about');

function proof() 
    getData('contact');

function contact() 
    getData('proof');

function ajaxRequest()
    var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
    if (window.XMLHttpRequest)
        return new XMLHttpRequest();
    else if (window.ActiveXObject) 
        for (var i=0; i<activexmodes.length; i++)
            try
                return new ActiveXObject(activexmodes[i]);
            
            catch(e)
                alert(e.description);
            
        
    
    else
        return false

HTML：

<body>
<div class="container">
    <div class="logo"> <span id="link-home" class="noglow" onclick="javascript: home();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Home</span><!-- end link-home --> 
        <span  id="link-about"class="noglow" onclick="javascript: about();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">About</span><!-- end link-about --> 
        <span id="link-proof" class="noglow" onclick="javascript: proof();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Proof of Concept</span><!-- end link-proof --> 
        <span id="link-contact" class="noglow" onclick="javascript: contact();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Contact</span><!-- end link-contact -->

        <div id="home-flower" onclick="javascript: home();" onmouseover="javascript: document.getElementById('link-home').className='glow'" onmouseout="javascript: document.getElementById('link-home').className='noglow'"></div><!-- end home-flower -->
        <div id="about-flower" onclick="javascript: about();" onmouseover="javascript: document.getElementById('link-about').className='glow'" onmouseout="javascript: document.getElementById('link-about').className='noglow'"></div><!-- end about-flower -->
        <div id="proof-flower" onclick="javascript: proof();" onmouseover="javascript: document.getElementById('link-proof').className='glow'" onmouseout="javascript: document.getElementById('link-proof').className='noglow'"></div><!-- end proof-flower -->
        <div id="contact-flower" onclick="javascript: contact();" onmouseover="javascript: document.getElementById('link-contact').className='glow'" onmouseout="javascript: document.getElementById('link-contact').className='noglow'"></div><!-- end other-flower --> 
    </div><!-- end logo-->
    <div class="content"></div><!-- end content -->   
</div><!-- end container -->
<div class="footer"></div><!-- end footer -->

CSS：

    @charset "UTF-8";
/* CSS Document */

* 
    margin:auto;


html, body 
    height: 100%;


.container 
    position:relative;
    min-height: 100%;
    width:800px;


.logo
    position:relative;
    width:100%;
    height:210px;
    top:0px;
    left:0px;
    background:url(images/logo.png);


.content 
    position:relative;
    top:0px;
    left:0px;
    padding-top:20px;
    padding-bottom: 75px !important;
  

.footer 
    position:relative;
    height: 75px;
    margin-top:-75px;
    background-color:#06F;
    bottom:0px;
    left:0px;


.large
    font-size:36px;


.fltright 
    position:relative;
    float:right;
    top:0px;
    left:0px;
    width:auto;
    height:auto;


.fltleft 
    position:relative;
    float:left;
    top:0px;
    left:0px;
    width:auto;
    height:auto;


span.glow 
    text-shadow: 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF;
    color:#999;
    text-align:center;


span.noglow 
    color:#999;
    text-align:center;


#home
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    visibility:visible;
    line-height:20px;


#about
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:visible;


#proof
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:visible;


#contact
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:visible;


#link-home
    position:absolute;
    width:75px;
    height:30px;
    top:110px;
    left:419px;


#link-about
    position:absolute;
    width:75px;
    height:30px;
    top:110px;
    left:515px;


#link-proof
    position:absolute;
    width:75px;
    height:30px;
    top:100px;
    left:609px;


#link-contact
    position:absolute;
    width:75px;
    height:30px;
    top:110px;
    left:708px;



#home-flower
    position:absolute;
    width:30px;
    height:30px;
    top:131px;
    left:442px;
    background:url(images/home-flower.png);


#about-flower
    position:absolute;
    width:30px;
    height:30px;
    top:135px;
    left:540px;
    background:url(images/about-flower.png);


#proof-flower
    position:absolute;
    width:30px;
    height:30px;
    top:131px;
    left:635px;
    background:url(images/proof-flower.png);


#contact-flower
    position:absolute;
    width:30px;
    height:30px;
    top:135px;
    left:733px;
    background:url(images/contact-flower.png);

【问题讨论】：

您应该真正缩小代码粘贴范围并找出具体问题。这只是太多的代码。另外，你为什么不使用 jQuery 库？对不起，我只是想确保我没有错过任何东西。至于 jquery，我以前从未使用过它。我有什么好处？你知道有什么好的起点吗？ 【参考方案1】：

document.getElementByClassName 正在返回一个数组。您无法设置数组的 innerHtml，您需要遍历数组并将每个单独的元素设置为内部 html；

工作示例：http://jsfiddle.net/CYZUL/

function processData()
    response = request.responseText;
    /*if (request.readyState==4)
        if (request.status==200)
            try
               var elements = document.getElementsByClassName('content');
               for(var x=0; x < elements.length; x++)
               
                 elements[x].innerHTML = response;
               
             catch(e)
                alert("Error: " +e.description);
            
        
        else
            alert("An error has occured making the request");
        
    */


function getData(fileName)
    fileLoc = encodeURI("assets/"+fileName+".html")
    alert(fileLoc);
    request.onreadystatechange = processData;
    request.open("GET",fileLoc, false);
    request.send();
    alert(request.readyState);
    alert(response);
    alert(request.status);
    var elements = document.getElementsByClassName('content');
    for(var x=0; x < elements.length; x++)
    
       elements[x].innerHTML = response;

【讨论】：

或者给元素一个id并使用document.getElementById()。 @nnnnn 是的，但这取决于他想要达到的目标 +1。谢谢，我没有意识到 document.getElementsByClassName 返回了一个数组。虽然我应该有's'，哈哈【参考方案2】：

为什么不使用 jQuery 的 $.load();发挥作用并为自己节省很多痛苦和时间

【讨论】：

以上是关于javascript没有设置innerHTML的主要内容，如果未能解决你的问题，请参考以下文章

如何使用JavaScript设置表单按钮（没有id）的title属性

asp.net里面的javascript没有设置隐藏字段值

有没有办法在用户使用 javascript 和 css 键入时设置 textarea 内容的样式？

javascript如何设置null输入等于0

在 JavaScript 中，有没有办法将 Web 套接字消息的处理推迟到设置标志之前？

有没有办法重新询问用户获取他的位置的权限，或者使用带有 javascript 的地理定位 API 删除旧设置？