javascriptがinnerHTMLに設定されていません

私はクライアントのWebサイトで作業していますが、ファイルの内容を取得するためにajaxを使用しています.HTMLをdivに挿入しようとしていますコンテンツ。私は、ファイルの内容を取得していることを知っています。なぜなら、要求のreadyState、status、およびresponseTextを表示するように警告が設定されており、警告のファイルの内容を表示しているからです。しかし、私はこの行を使用してdivに挿入するattmept：document.getElementsByClassName('content').innerHTML = response;何も起こりません。誰も私がこれを理解するのを助けることができますか？javascriptがinnerHTMLに設定されていません

CODE：

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

出典

2011-08-04 Joe

コードペーストを絞り込み、特定の問題を特定する必要があります。これはあまりにも多くのコードです。また、なぜあなたはjQueryライブラリを使用していないのですか？ –

申し訳ありません私はちょうど私が何も忘れていないことを確認したいと思っていました。私が持っているものには何のメリットがありますか？あなたはそれのための良い出発点を知っていますか？ – Joe

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

出典

2011-08-04 00:36:32

要素にidを与え、 'document.getElementById（）'を使います。 – nnnnnn

@nnnnn trueですが、達成しようとしている内容によって異なります –

+1。おかげで、私はdocument.getElementsByClassNameが配列を返したことを認識しませんでした。私は 's'で持たなければならない、笑 – Joe

使用していないのはなぜ

jQueryの$ .LOAD（）;あなた自身の痛みや時間を節約してください。

出典

2011-08-04 06:30:07 Qchmqs

javascriptがinnerHTMLに設定されていません

答えて

関連する問題