javascript没有设置innerHTML

【问题标题】：javascript not setting innerHTMLjavascript没有设置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，我以前从未使用过它。我有什么好处？你知道有什么好的起点吗？

标签： javascript ajax html innerhtml


【解决方案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();发挥作用并为自己节省很多痛苦和时间

【讨论】：

    猜你喜欢
    • 2012-02-08
    • 2011-09-03
    • 1970-01-01
    • 1970-01-01
    • 2011-07-30
    • 1970-01-01
    • 2012-03-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode