如何用document.getElementById（'ElementID'）替換document.write。innerHTML

Question

只是爲了讓你知道我不是程序員。我嘗試瞭解一些代碼，並在可以使用試驗和錯誤的地方更改它。 我有一段代碼從Joomla模塊，我需要改變功能：function pausescrollerdocument.write功能，用於document.getElementById('ElementID').innerHTML，我不知道如何。我發佈了功能函數pausescroller的代碼，我嘗試實現上述w/o運氣。在前端無顯示：

function pausescroller(content, divId, divClass, delay){ 
    this.content=content //message array content 
    this.tickerid=divId //ID of ticker div to display information 
    this.delay=delay //Delay between msg change, in miliseconds. 
    this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is) 
    this.hiddendivpointer=1 //index of message array for hidden div 
    document.getElementById('divId').innerHTML = "<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>"; 
    //document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>') 
    var scrollerinstance=this 
    if (window.addEventListener) //run onload in DOM2 browsers 
    window.addEventListener("load", function(){scrollerinstance.initialize()}, false) 
    else if (window.attachEvent) //run onload in IE5.5+ 
    window.attachEvent("onload", function(){scrollerinstance.initialize()}) 
    else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec 
    setTimeout(function(){scrollerinstance.initialize()}, 500) 
} 

這裏是整個JavaScript部分的準則：

<script type="text/javascript"> 
<!-- 
var pausecontent=new Array(); 
var cnti = 0; 

<?php 
for($im=0; $im<count($testi_RSMSC); $im++) { 
    $dateExp_RSMSC = explode('-', $testi_RSMSC[$im]['date']); 
    $timestamp_RSMSC = mktime(12,0,0,$dateExp_RSMSC[1],$dateExp_RSMSC[2],$dateExp_RSMSC[0]); 
    $dateConfig_RSMSC = JFactory::getConfig(); 
    $siteLang_RSMSC = $dateConfig_RSMSC->get('config.language'); 
    setlocale(LC_ALL, $siteLang_RSMSC); 
    $dateView_RSMSC = strftime("%d %B %Y", $timestamp_RSMSC); 
    $testi_RSMSC[$im]['comment'] = preg_replace('/\s\s+/', ' ', trim($testi_RSMSC[$im]['comment'])); 
    $testi_text = ''; 
    if($char_RSMSC > 0) { 
     $testi_text .= substr($testi_RSMSC[$im]['comment'], 0, ($char_RSMSC-3)).'...'; 
    } else { 
     $testi_text .= $testi_RSMSC[$im]['comment']; 
    } 
    #### 
    $RStesti_pic_file = ''; 
    if($imgDispRSMSC == '1') { 
     if(file_exists(JPATH_ROOT.DS.'images'.DS.'com_rsmonials'.DS.$testi_RSMSC[$im]['id'].'.gif')) { 
      $RStesti_pic_file = '<img src="'.JURI::root().'images/com_rsmonials/'.$testi_RSMSC[$im]['id'].'.gif" style="max-width:'.$imgMwRSMSC.'px; max-height:'.$imgMhRSMSC.'px; border:'.$imgBorderRSMSC.';" />'; 
     } else if(file_exists(JPATH_ROOT.DS.'images'.DS.'com_rsmonials'.DS.$testi_RSMSC[$im]['id'].'.png')) { 
      $RStesti_pic_file = '<img src="'.JURI::root().'images/com_rsmonials/'.$testi_RSMSC[$im]['id'].'.png" style="max-width:'.$imgMwRSMSC.'px; max-height:'.$imgMhRSMSC.'px; border:'.$imgBorderRSMSC.';" />'; 
     } else if(file_exists(JPATH_ROOT.DS.'images'.DS.'com_rsmonials'.DS.$testi_RSMSC[$im]['id'].'.jpg')) { 
      $RStesti_pic_file = '<img src="'.JURI::root().'images/com_rsmonials/'.$testi_RSMSC[$im]['id'].'.jpg" style="max-width:'.$imgMwRSMSC.'px; max-height:'.$imgMhRSMSC.'px; border:'.$imgBorderRSMSC.';" />'; 
     } else if(file_exists(JPATH_ROOT.DS.'images'.DS.'com_rsmonials'.DS.$testi_RSMSC[$im]['id'].'.jpeg')) { 
      $RStesti_pic_file = '<img src="'.JURI::root().'images/com_rsmonials/'.$testi_RSMSC[$im]['id'].'.jpeg" style="max-width:'.$imgMwRSMSC.'px; max-height:'.$imgMhRSMSC.'px; border:'.$imgBorderRSMSC.';" />'; 
     } else { 
      $RStesti_pic_file = $RS_noimg; 
     } 
     if($imgAlignRSMSC == '1') { 
      $RStesti_pic_file = '<div style="margin-bottom:5px; text-align:left;">'.$RStesti_pic_file.'</div>'; 
     } else if($imgAlignRSMSC == '2') { 
      $RStesti_pic_file = '<div style="margin-bottom:5px; text-align:right;">'.$RStesti_pic_file.'</div>'; 
     } else if($imgAlignRSMSC == '3') { 
      $RStesti_pic_file = '<span style="float:left; margin-right:5px;">'.$RStesti_pic_file.'</span>'; 
     } else if($imgAlignRSMSC == '4') { 
      $RStesti_pic_file = '<span style="float:right; margin-left:5px;">'.$RStesti_pic_file.'</span>'; 
     } else { 
      $RStesti_pic_file = '<div style="margin-bottom:5px; text-align:center;">'.$RStesti_pic_file.'</div>'; 
     } 
    } 
    #### 
    $RSMSC_disp_context = '<div style="text-align:'.$alignRSMSC.';">'.$RStesti_pic_file.addslashes($testi_text).'</div><br /><em><strong>'.addslashes($testi_RSMSC[$im]['fname']).' '.addslashes($testi_RSMSC[$im]['lname']).'</strong>'; 
    if($displayaboutRSMSC == '1') { 
     if(($testi_RSMSC[$im]['about'] != '') || ($testi_RSMSC[$im]['location'] != '')) { 
      $RSMSC_disp_context .= ', Ηλικία: <small>'; 
      $RS_isa = 0; 
      if($testi_RSMSC[$im]['about'] != '') { 
       $RSMSC_disp_context .= addslashes($testi_RSMSC[$im]['about']); 
       $RS_isa = 1; 
      } 
      if($testi_RSMSC[$im]['location'] != '') { 
       if($RS_isa == '1') { 
        $RSMSC_disp_context .= ', '; 
       } 
       $RSMSC_disp_context .= addslashes($testi_RSMSC[$im]['location']); 
      } 
      $RSMSC_disp_context .= '</small>'; 
     } 
    } 
    if(($displayurlRSMSC == '1') && ($testi_RSMSC[$im]['website'] != '')) { 
     $RSMSC_disp_context .= '<br /><small>'.$testi_RSMSC[$im]['website'].'</small>'; 
    } 
    if($displaydateRSMSC == '1') { 
     $RSMSC_disp_context .= '<br /><small>'.$dateView_RSMSC.'</small>'; 
    } 
    $RSMSC_disp_context .= '</em>'; 

?> 
pausecontent[cnti++]='<?php echo $RSMSC_disp_context; ?>'; 
<?php 
} 
?> 

function pausescroller(content, divId, divClass, delay){ 
this.content=content //message array content 
this.tickerid=divId //ID of ticker div to display information 
this.delay=delay //Delay between msg change, in miliseconds. 
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is) 
this.hiddendivpointer=1 //index of message array for hidden div 
document.getElementById(divId).innerHTML = '<div class="innerDiv" style="position: absolute; width: 100%" id="' + divId + '1">' + content[0] + '</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="' + divId + '2">' + content[1] + '</div>'; 
//document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>') 
var scrollerinstance=this 
if (window.addEventListener) //run onload in DOM2 browsers 
window.addEventListener("load", function(){scrollerinstance.initialize()}, false) 
else if (window.attachEvent) //run onload in IE5.5+ 
window.attachEvent("onload", function(){scrollerinstance.initialize()}) 
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec 
setTimeout(function(){scrollerinstance.initialize()}, 500) 
} 

/* initialize()- Initialize scroller method. -Get div objects, set initial positions, start up down animation */ 

pausescroller.prototype.initialize=function(){ 
this.tickerdiv=document.getElementById(this.tickerid) 
this.visiblediv=document.getElementById(this.tickerid+"1") 
this.hiddendiv=document.getElementById(this.tickerid+"2") 
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv)) 
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2) 
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px" 
this.getinline(this.visiblediv, this.hiddendiv) 
this.hiddendiv.style.visibility="visible" 
var scrollerinstance=this 
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1} 
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0} 
if (window.attachEvent) //Clean up loose references in IE 
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null}) 
setTimeout(function(){scrollerinstance.animateup()}, this.delay) 
} 


/* animateup()- Move the two inner divs of the scroller up and in sync */ 

pausescroller.prototype.animateup=function(){ 
var scrollerinstance=this 
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){ 
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px" 
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px" 
setTimeout(function(){scrollerinstance.animateup()}, 50) 
} 
else{ 
this.getinline(this.hiddendiv, this.visiblediv) 
this.swapdivs() 
setTimeout(function(){scrollerinstance.setmessage()}, this.delay) 
} 
} 

/* swapdivs()- Swap between which is the visible and which is the hidden div */ 

pausescroller.prototype.swapdivs=function(){ 
var tempcontainer=this.visiblediv 
this.visiblediv=this.hiddendiv 
this.hiddendiv=tempcontainer 
} 

pausescroller.prototype.getinline=function(div1, div2){ 
div1.style.top=this.visibledivtop+"px" 
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px" 
} 

/* setmessage()- Populate the hidden div with the next message before it's visible */ 

pausescroller.prototype.setmessage=function(){ 
var scrollerinstance=this 
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it) 
setTimeout(function(){scrollerinstance.setmessage()}, 100) 
else{ 
var i=this.hiddendivpointer 
var ceiling=this.content.length 
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1 
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer] 
this.animateup() 
} 
} 

pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any 
if (tickerobj.currentStyle) 
return tickerobj.currentStyle["paddingTop"] 
else if (window.getComputedStyle) //if DOM2 
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top") 
else 
return 0 
} 

//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds) 
new pausescroller(pausecontent, "rsmsc_scroller", "rsmsc_scroller_class", <?php echo $delay_RSMSC; ?>); 
//--> 
</script> 

Answer 1

設置innerHTML到需要的值是一個完整的字符串 - 添加'每一方將修復它：

document.getElementById('divId').innerHTML = '"<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>";' 

Answer 2

改變這一行：

document.getElementById('divId').innerHTML = "<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>"; 

這樣：

document.getElementById(divId).innerHTML = '<div class="innerDiv" style="position: absolute; width: 100%" id="' + divId + '1">' + content[0] + '</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="' + divId + '2">' + content[1] + '</div>'; 

（的第一項和最後一個雙引號，應該是單引號，並呼籲document.getElementById(divId).innerHTML時不要把引號周圍的變數名稱divid）

CNC中但實際上，你正在尋找的元素現在還沒有，請將父DIV到HTML第一'<div id="myDiv" class="divClass" style="position: relative; overflow: hidden"></div>那麼如果var divId = 'myDiv';調用與功能：

pausescroller(content, divId, divClass, delay);