How to replace document.write with document.getElementById('ElementID').innerHTML

Question

Just to let you know I am not a programmer. I try to understand some code and change it where I can using trial and error. I have the following piece of code from a Joomla module where I need to change in the function: function pausescroller the document.write function that is used to document.getElementById('ElementID').innerHTML and I don't know how. I am posting the code of the function function pausescroller where I tried implementing the above w/o luck. Nothing displays on front end:

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

HERE IS THE CODE OF THE WHOLE JavaScript part:

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

Welcome on SO. Please take a [tour](http://stackoverflow.com/tour) in order to understand how SO works. — Peter, Mar 29 '16 at 08:26
Furthermore, you can read "[How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve)" in order to understand how a problem should be explained and have a better chance at getting an answer. — Peter, Mar 29 '16 at 08:33

Arleigh Hix · Answer 1 · 2016-03-29T09:11:39.913

1

Change this line:

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

to this:

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

(The very first, and very last double quote, should be single quotes, and do not put quotes around the var name divid when calling document.getElementById(divId).innerHTML)

-EDIT- But actually the element you are looking for is not there yet, place the parent div into the html first '<div id="myDiv" class="divClass" style="position: relative; overflow: hidden"></div> then if var divId = 'myDiv'; call the function with:

pausescroller(content, divId, divClass, delay);

edited Mar 29 '16 at 09:11

answered Mar 29 '16 at 08:43

Arleigh Hix

9,990
1
14
31

Thanks...This was my first attempt... and that didn't work. Should I post the whole php code so you can have a better understanding? Is there any chance I need to change something else elsewhere? – its4yougr Mar 29 '16 at 09:13
Thanks again.. Since I don't know where to put the proposed code can I post the whole php file? – its4yougr Mar 29 '16 at 10:06
Since I am not familiar with programming I tried posting here the whole php code (I don't know if this is the way by I try) but I cannot it says too long. Where can I do that? – its4yougr Mar 29 '16 at 10:26
Sorry I hit enter accidentally on the previous comment, Look for the line where the pausescroller function is called, that is where it would have originally placed the element with document.write, and put the parent div before that if you want it in the same place. So, if it is in a php file `echo '
';` – Arleigh Hix Mar 29 '16 at 10:31
Sorry... For not undersanding... I posted the whole JavaScript part. Can you please check on that? Thanks – its4yougr Mar 29 '16 at 10:44
I find the pausescroller string many times (10) on the php file which one should I replace with your code? – its4yougr Mar 29 '16 at 10:55

score 0 · Answer 2 · answered Mar 29 '16 at 08:25

0

The value you set innerHTML to needs to be a complete string - adding ' to each side will fix it:

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>";'

answered Mar 29 '16 at 08:25

millerbr

2,951
1
14
25

Thank you for your fast reply ! ! But adding ' to each side didn't fix it. The content is not shown on the front end. I am not sure if I just replace the document.write function which is commented below with the document.getElementById should be enough.... Thanks – its4yougr Mar 29 '16 at 08:38

How to replace document.write with document.getElementById('ElementID').innerHTML

2 Answers2