JavaScript не устанавливает innerHTML - PullRequest
Новая
       14

JavaScript не устанавливает innerHTML

0 голосов
/ 04 августа 2011

Я работаю над сайтом для клиента и использую ajax для получения содержимого файла, в частности, html, а затем пытаюсь вставить этот html в div, чтобы я мог отобразить содержимое. я знаю, что получаю содержимое файла, потому что у меня настроены оповещения для отображения запроса readyState, status и 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);
}

Ответы [ 2 ]

3 голосов
/ 04 августа 2011

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;
    }
}
1 голос
/ 04 августа 2011

Почему бы не использовать jQuery's $ .load (); работай и спасай себя от боли и времени

...