javascript 未设置innerHTML

我正在为客户开发一个网站，我使用ajax来获取文件的内容，特别是html，然后我尝试将该html插入到div中，以便我可以显示内容。我知道我正在获取文件的内容，因为我设置了警报来显示请求的就绪状态、状态和响应文本，并且它在警报中显示文件的内容。但是，当我尝试使用以下行将其插入 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);
}

最佳答案

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

关于javascript 未设置innerHTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6934871/

javascript 未设置innerHTML

上一篇：javascript - 有没有像 JavaScript 编译器这样的东西？

下一篇：javascript - Javascript 中的正则表达式用于 trim 链接