從html元素獲取數據並用信息填充其他人

Question

我目前正在開發基於AJAX的功能來將YouTube視頻加載到現有的div中。這部分工作很好。

現在我想修改我的代碼，以便我還可以爲每個視頻獲取隱藏標題和說明，並在視頻的上方和下方添加此數據（標題應位於上方，描述應低於YouTube視頻）。

問題是我不知道是誰來實現這個修改。這裏是我到目前爲止有：

我的javascript：

<script language="javascript" type="text/javascript"> 

    function SendValue(v) { 
      xmlHttpReq = new XMLHttpRequest(); 
      xmlHttpReq.onreadystatechange = HandleValue; 
      xmlHttpReq.open("GET", "srcsendback2.php?code="+v,true); 
      xmlHttpReq.send(); 
      } 


    function HandleValue(Code) { 
      if(xmlHttpReq.readyState == 4) { 
       if(xmlHttpReq.status == 200) { 

        var Code; 
        var CodeTitle; 
        var CodeDesc; 
        var Code = xmlHttpReq.responseText; 

        CodeTitle = code + "-title"; 
        CodeDesc = code + "-desc"; 



        document.getElementById('vidtitle').innerHTML = document.getElementsByClassName('CodeTitle').innerHTML 
        document.getElementById('viddesc').innerHTML = document.getElementsByClassName('CodeDesc').innerHTML 
        document.getElementById('ytvid').src = document.getElementsByClassName('Code')[0].getElementsByTagName('a')[0].href 

        window.scroll(0,0); // horizontal and vertical scroll targets, scrolls page to the top 
       } 
      }  
</script> 

這裏是一些示例HTML：如果

 <h1 id="vidtitle"></h1> 
     <div id="videoDiv"> 
      <iframe id="ytvid" width="500" height="300" frameborder="0" src="http://www.youtube.com/embed/xyz" frameborder="0" allowfullscreen></iframe> 
     </div> 
     <p id="viddesc"></p> 


     <div id="links"> 



       <button type="button" name="button" onClick="SendValue('abc')" value="http://www.youtube.com/embed/123">Title 1</button> <br /> 

       <button type="button" name="button" onClick="SendValue('def')" value="http://www.youtube.com/embed/456"> 
Title 2</button> <br /> 

       <button type="button" name="button" onClick="SendValue('ghi')" value="http://www.youtube.com/embed/789">Title 3</button> <br /> 


      <div id="content" style="display:none;"> 

       <ul class="media-collection"> 

        <li> 
         <div class="m-left"> 
          <a href="#"> 
         </div> 

         <div class="m-right"> 

          <p class="CodeTitle"> 
           <a href="http://www.youtube.com/embed/123"> 
            <span class="field-content">Title 1</span> 
           </a> 
          </p> 

          <p></p> 

          <div class="CodeDesc"> 
           <p> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur convallis metus et lectus venenatis rhoncus. Suspendisse potenti. Maecenas bibendum nisi ut velit luctus ultricies. Mauris at nibh a elit pretium varius. Nunc accumsan sagittis augue at facilisis. Phasellus et ante lorem, vitae laoreet enim. Donec vulputate, velit a lobortis eleifend, neque nibh rhoncus quam, non pharetra turpis mauris sed ligula. Ut rhoncus, felis ac scelerisque volutpat, turpis elit malesuada ante, vel varius lorem erat dapibus mi. Nullam nulla risus, aliquam sed tempus eu, dictum a est. 
           </p> 
          </div> 

          <p></p> 

         </div> 
        </li> 

       </ul> 

      </div> 

     </div> 

道歉我無法描述清楚我的問題。

任何幫助表示讚賞。

Answer 1

要查找的標題，你可以這樣做：

var p = document.getElementsByClassName('CodeTitle')[0]; 
    var span = p.getElementsByTagName('span')[0]; 
    alert(span.childNodes[0].nodeValue); 

注意，當你這樣做：

xmlHttpReq.onreadystatechange = HandleValue; 

...你給的JavaScript要JS調用一個函數在未來某個日期。當js調用該函數時，js不會用任何參數調用它。