Problem writing elements to innerHTML

JavaScript
1

I don’t understand why I can’t get either of these methodes to work but for sure there are syntax errors in the script that are not being reported by ‘Developer’ tools in IE8.
Script not working


function getprompt(){
/*
f1.innerHTML=' ';
var f1prompt=document.createElement('div');
f1prompt.id='f1prompt';
var label=document.createElement('label');
label.setAttribute("for", "productreturn");
f1prompt.appendChild(label);
var productreturn=document.createElement('input');
productreturn.id='productreturn';
productreturn.value=products.slice(-1);
f1prompt.appendChild(productreturn);
var breturn=document.createElement('button');
breturn.id='breturn';
f1prompt.appendChild(breturn);
document.getElementById('f1').appendChild(f1prompt);//doesn't work?
*/

f1.innerHTML='<div id="f1prompt">\
'; //must be syntax error
f1.innerHTML+='<label for="productreturn">You must return to the product page:</label>\
';
f1.innerHTML+='<input id="productreturn" type="text" value="products.slice(-1)" />\
';
f1.innerHTML+='<button id="return">Return</button>\
';
f1.innerHTML+='</div>';

}

function viewcart(){
var items=cartbody.rows.length;
if(f1.className=='htmlpage'){
//prompt('You need to return to product page: ',products.slice(-1));//works
getprompt();//f1 returns blank?
//f1.innerHTML=getprompt(); tried & returned blank f1?
}

Spacing-out:nono: again! Any help greatly appreciated.

2

Where is the id=“f1” in the HTML?

3

Hey felgall It’s Bellow the Horizontal logo and right of vertical sidebar nav.
index.html


<div id="f1" class="htmlpage">
</div>

index.css


#f1 { display:inline; position:absolute; left:17%; top:31%; width:82.6%; height:58.5%; 
overflow:auto; overflow-x:hidden !important; border:2px solid  #e8b23d; margin:0; }

#f1prompt { display:none; position:absolute; left:17%; top:31%; width:82.6%; height:58.5%; 
overflow:hidden; border:2px solid  red; margin:0; z-index:100; background:#fff; }
//sorry posted f1label by mistake

.htmlpage { width:100%; height:100%; background:#e8b235; overflow-x:hidden !important; z-index:-200;}

The ‘f1prompt’ is right on top of ‘f1’ with z-index but any objects written to ‘f1’ show through ‘f1promt’ if ‘f1prompt’ is written as div in index.html and called in function to change CSS from display none to display block so I still have to call ‘f1’ innerHTML ’ '/BLANK to get the ‘f1prompt’ to show regardless of what z-index I guess the object has the ultimate z-index even though I set z-index on class ‘htmlpage’ to -200? So I have to write the ‘f1promt’ directly to ‘f1’ innerHTML.

4

Writing the ‘f1prompt’ div directly into the Index.html allowed me to style the div correctly and apply an addEvent to the OK./Return button ‘f1prompt’ contains but I need to write it to the innerHTML of div id ‘f1’ directly and apply the onclick to the return button. Then restyle the ‘f1prompt’ to fit.

5

maybe this can help you out:
its not coded so well but could be tweek for better performance

it seems like something that could be of assistance

<html>
<head runat=“server”>
<title>window interface</title>
<script type=“text/javascript”>

    var global_obj;
    var global_obj_width;
    var global_obj_height;
    var global_obj_top;
    var global_obj_left;
    var global_obj_right;
    var global_obj_bottom;

    var clickcounter = 0;
    var gloabl_obj_name;

    var global_objnameAJT = new Array();
    global_objnameAJT[0] = "main";
    global_objnameAJT[1] = "options";
   

    var global_zIndexAJT = new Array();
    global_zIndexAJT[0] = "1000";
    global_zIndexAJT[1] = "999";        

    //======================================================

    function setGlobalVariables(temp_obj, temp_obj_width, temp_obj_height, temp_obj_top, temp_obj_left, temp_obj_right, temp_obj_bottom, obj_name) {
        global_obj = temp_obj;
        global_obj_width = temp_obj_width;
        global_obj_height = temp_obj_height;
        global_obj_top = temp_obj_top;
        global_obj_left = temp_obj_left;
        global_obj_right = temp_obj_right;
        global_obj_bottom = temp_obj_bottom;

        gloabl_obj_name = obj_name;
    }


    //============MOVING THE DIV WITH THE MOUSE=============


    function moveDIV(obj_name, _x, _y) {

        var obj = document.getElementById(obj_name + 'DIV');
        var obj_width = parseInt(obj.style.width);
        var obj_height = parseInt(obj.style.height);
        var obj_top = parseInt(obj.style.top);
        var obj_left = parseInt(obj.style.left);
        var obj_right = obj_left + obj_width;
        var obj_bottom = obj_top + obj_height;


        obj.style.top = (_y - 15) + 'px';
        obj.style.left = (_x - (obj_width / 2)) + 'px';


    } //end function moveDIV(obj_name, _x, _y)
    
    
    //this function captures the div
    //and basically prepares it for being dragged/moved
    function onmousedown_captureDIV(obj_name) {

        clickcounter = 1;
        
        
        var obj = document.getElementById(obj_name + 'DIV');
        var obj_width = parseInt(obj.style.width);
        var obj_height = parseInt(obj.style.height);
        var obj_top = parseInt(obj.style.top);
        var obj_left = parseInt(obj.style.left);
        var obj_right = obj_left + obj_width;
        var obj_bottom = obj_top + obj_height;

        setGlobalVariables(obj, obj_width, obj_height, obj_top, obj_left, obj_right, obj_bottom, obj_name);

        set_movingDIV_style(obj_name);

        reArrangeWindowOrder(obj_name);
    }
   

    //this function stops the move
    function onmouseup_releaseDIV(obj_name) {
        clickcounter = 0;

        set_stationaryDIV_style(obj_name);
    }

    //changes the divs style to the movingn style
    function set_movingDIV_style(obj_name) {
        var mainobj = document.getElementById(obj_name + 'DIV');
        var obj_titlebar = document.getElementById(obj_name + '_titlebarDIV');
        var obj_content = document.getElementById(obj_name + '_contentDIV');

        obj_titlebar.style.display = "none";
        obj_content.style.display = "none";

        mainobj.style.backgroundColor = "Transparent";
        mainobj.style.border = "1pt dashed black";
        mainobj.style.cursor = "move";
        

    }
    
    //changes the divs style to stationary style
    function set_stationaryDIV_style(obj_name) {
        var mainobj = document.getElementById(obj_name + 'DIV');
        var obj_titlebar = document.getElementById(obj_name + '_titlebarDIV');
        var obj_content = document.getElementById(obj_name + '_contentDIV');

        obj_titlebar.style.display = "block";
        if (mainobj.style.height == "30px") {

        }
        else {
            obj_content.style.display = "block";
        }
        mainobj.style.backgroundColor = "White";
        mainobj.style.border = "1pt solid black";
        mainobj.style.cursor = "default";
        
    }

    function reArrangeWindowOrder(obj_name) {
    
       // alert(obj_name);
        //-----------------------------------------------------------
        //store the windows/divs names in a temporary array
        var temp1 = new Array(global_objnameAJT.length);
        
        for (var i = 0; i &lt; global_objnameAJT.length; i++) {
            temp1[i] = global_objnameAJT[i];
        }
        //------------------------------------------------------------

        //--------------------------------------------------------------------------------
        //set the selected object as the first in array, or on top in order of z-index
        global_objnameAJT[0] = obj_name;
        //----------------------------------------------------------------------------------

        //--------------------------------------------------------------------------------
        //re order the array
        var counter = 1;
        for (var i = 0; i &lt; temp1.length; i++) {
            if (temp1[i] != obj_name) {
                global_objnameAJT[counter] = temp1[i];
                counter++;
            }
            else {
            }

        }
        //------------------------------------------------------------------------------------


        //---------------------------------------------------------------------------
        //set the divs zindex to 1234
        for (var i = 0; i &lt; global_objnameAJT.length; i++) {
            var tempobj = document.getElementById(global_objnameAJT[i] + 'DIV');
            tempobj.style.zIndex = global_zIndexAJT[i];
            //alert(global_zIndexAJT[i]);
        }            
        //-------------------------------------------------------------------------------
    }                
    //=====================================================




    //==================WINDOW/DIV FUNCTIONS===================================
    //minimize the div, make only the titlebar visible
    function minimize_maximizeDIV(obj_name) {
        var mainobj = document.getElementById(obj_name + 'DIV');
        var obj_titlebar = document.getElementById(obj_name + '_titlebarDIV');
        var obj_content = document.getElementById(obj_name + '_contentDIV'); 

        if (mainobj.style.height == "30px") {
            //maximize
            obj_titlebar.style.display = "block";
            obj_content.style.display = "block";
            
            var obj_titlebar_height = parseInt(obj_titlebar.style.height);
            var obj_content_height = parseInt(obj_content.style.height);

            document.getElementById('minmax_' + obj_name).innerHTML = "_";
            document.getElementById('minmax_' + obj_name).title = "Minimize"; 

            var winW = 630, winH = 460;
            if (document.body && document.body.offsetWidth) {
                winW = document.body.offsetWidth;
                winH = document.body.offsetHeight;
            }
            if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
                winW = document.documentElement.offsetWidth;
                winH = document.documentElement.offsetHeight;
            }
            if (window.innerWidth && window.innerHeight) {
                winW = window.innerWidth;
                winH = window.innerHeight;
            } 

            var page_height = winH;
            var page_width = winW;

            if ((parseInt(mainobj.style.top) + parseInt(mainobj.style.height)) &gt;= (parseInt(page_height) - 100)) {

                mainobj.style.top = (parseInt(page_height) - (obj_titlebar_height + obj_content_height)) + 'px';

            }
            
            mainobj.style.height = (obj_titlebar_height + obj_content_height) + 'px';
            
        }
        else {
            //minimize
            obj_titlebar.style.display = "block";
            obj_content.style.display = "none";


            document.getElementById('minmax_' + obj_name).innerHTML = "+";
            document.getElementById('minmax_' + obj_name).title = "Maximize";

            var winW = 630, winH = 460;
            if (document.body && document.body.offsetWidth) {
                winW = document.body.offsetWidth;
                winH = document.body.offsetHeight;
            }
            if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
                winW = document.documentElement.offsetWidth;
                winH = document.documentElement.offsetHeight;
            }
            if (window.innerWidth && window.innerHeight) {
                winW = window.innerWidth;
                winH = window.innerHeight;
            } 

            var page_height = winH;
            var page_width = winW;

            if ((parseInt(mainobj.style.top) + parseInt(mainobj.style.height)) &gt;= (parseInt(page_height) - 100)) {

                mainobj.style.top = (parseInt(page_height) - 40) + 'px';
            
            }              
           
            mainobj.style.height = "30px";
        }
        reArrangeWindowOrder(obj_name);
    }
    
    //=========================================================================








    //==============MOUSE CAPTURE==========================
    var IE = document.all ? true : false;
    if (!IE) document.captureEvents(Event.MOUSEMOVE)
    document.onmousemove = getMouseXY;
    var tempX = 0;
    var tempY = 0;
    function getMouseXY(e) {
        if (IE) { // grab the x-y pos.s if browser is IE
            tempX = event.clientX + document.body.scrollLeft;
            tempY = event.clientY + document.body.scrollTop;
        }
        else {  // grab the x-y pos.s if browser is NS
            tempX = e.pageX;
            tempY = e.pageY;

        }
        if (tempX &lt; 0) { tempX = 0; }
        if (tempY &lt; 0) { tempY = 0; }
        
        //------------------------------------------------------------
        //now it works in FireFox, Chrome, and Internet Explorer
        if (clickcounter == 1) {
            moveDIV(gloabl_obj_name, tempX, tempY);
        }
        //------------------------------------------------------------
        return true;
    }
    //=====================================================





    //===============Setting up the layout=========================



    function set_newPosition() {
        var new_obj = document.getElementById('newDIV');
        var new_obj_width = parseInt(new_obj.style.width);
        var new_obj_height = parseInt(new_obj.style.height);
        var new_obj_top = parseInt(new_obj.style.top);
        var new_obj_left = parseInt(new_obj.style.left);
        var new_obj_right = new_obj_left + new_obj_width;
        var new_obj_bottom = new_obj_top + new_obj_height;



        var winW = 630, winH = 460;
        if (document.body && document.body.offsetWidth) {
            winW = document.body.offsetWidth;
            winH = document.body.offsetHeight;
        }
        if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
            winW = document.documentElement.offsetWidth;
            winH = document.documentElement.offsetHeight;
        }
        if (window.innerWidth && window.innerHeight) {
            winW = window.innerWidth;
            winH = window.innerHeight;
        }


        var page_height = winH;
        var page_width = winW;
        
        new_obj.style.top = (page_height - new_obj_height) + 'px';
        
    } //end function set_newPosition()
            
    
    
    
    var newwindowcounter = 0;
    
    function CreateNewWindow() {
        newwindowcounter++;
        /*

    This method deals with creating a new window object.
    
    there is an erro here with the userMe and userYou variables
    their values keep/ sometimes coming back as undefined, but other times they work just fine

        */


        var id = "newwindow" + newwindowcounter.toString();
        //alert(id);
        var width = "250px";
        var height = "300px";
        var left = "100px";
        var top = "100px";

        var newdiv = document.createElement("div"); //creates the element

        //--------------------------------------------Sets attributes and properties of the div element

        newdiv.setAttribute('id', id + "DIV");
        newdiv.style.width = width;
        newdiv.style.height = height;
        newdiv.style.position = "absolute";
        newdiv.style.left = left;
        newdiv.style.top = top;
        newdiv.style.background = "orange"; //should be random colors, or no two boxes have the same color
        newdiv.style.border = "1pt solid black";

        var htmlstring = "&lt;div id='" + id + "_titlebarDIV' style='border: 1pt solid black; width:250px; height: 30px; background-color:White; position: absolute; top:0px; left: 0px;'  onmouseup='onmouseup_releaseDIV('" + id + "');'&gt;" +
                            "&lt;table height='30px' width='100%' cellpadding='0' cellspacing='0'&gt;"+
                                "&lt;tr&gt;"+
                                    "&lt;td id='title_" + id + "' align='left' style='width:220px; cursor:move;' onmousedown='onmousedown_captureDIV('" + id + "');'&gt;" +
                                       "New Window : " + id +      
                                    "&lt;/td&gt;"+
                                    "&lt;td id='minmax_" + id + "' align='center' style='width:30px; cursor:pointer;' title='Minimize' onclick='minimize_maximizeDIV('" + id + "')'&gt;" +
                                       " _"+
                                    "&lt;/td&gt;"+
                                "&lt;/tr&gt;"+
                            "&lt;/table&gt;"+
                        "&lt;/div&gt;"+
                        "&lt;div id='" + id + "_contentDIV' style='border: 1pt solid black; width:250px; height: 270px; background-color:Silver; position: absolute; top:30px; left: 0px;'&gt;" +
                            "&lt;table border='1' cellspacing='0' cellpadding='0'&gt;" +
                                "&lt;tr&gt;" +
                                     "&lt;td colspan='2' align='center' style='border-bottom: 1pt solid black;'&gt;" +
                                        "&lt;u&gt;A NEW WINDOW&lt;/u&gt;" +
                                     "&lt;/td&gt;" +
                                "&lt;/tr&gt;" +                                    
                                "&lt;tr&gt;" +
                                     "&lt;td valign='top' align='left' style='border-right: 3pt solid gray; border-bottom: 1pt solid black;'&gt;" +
                                       "Something here"
                                     "&lt;/td&gt;" +
                                "&lt;/tr&gt;" +                                    
                            "&lt;/table&gt;" +
                        "&lt;/div&gt;";

        newdiv.innerHTML = htmlstring;

        newdiv.onmouseup = function() { onmouseup_releaseDIV(id); }; //onmouseup="onmouseup_releaseDIV('games');"
        newdiv.onclick = function() { reArrangeWindowOrder(id); };//re arranges the windows
        //--------------------------------------------------------------------------------------------

        document.body.appendChild(newdiv); //adds the element to the body

        global_objnameAJT[global_objnameAJT.length] = id;
        global_zIndexAJT[global_zIndexAJT.length] = global_zIndexAJT[global_zIndexAJT.length - 1] - 1;

        
        
        reArrangeWindowOrder(id);
    } //function CreateNewObject() 
    //=================================
    
    
&lt;/script&gt;

</head>
<body>
<form id=“form1” runat=“server”>
<div id=“optionsDIV” style=“border: 1pt solid black; width:400px; height: 200px; background-color:White; position: absolute; top:0px; left: 0px;” onclick=“reArrangeWindowOrder(‘options’);” onmouseup=“onmouseup_releaseDIV(‘options’);”>
<div id=“options_titlebarDIV” style=“border: 1pt solid black; width:400px; height: 30px; background-color:White; position: absolute; top:0px; left: 0px;” onmouseup=“onmouseup_releaseDIV(‘options’);”>
<table height=“30px” width=“100%” cellpadding=“0” cellspacing=“0”>
<tr>
<td id=“title_options” align=“left” style=“width:370px; cursor:move;” onmousedown=“onmousedown_captureDIV(‘options’);”>
OPTIONS
</td>
<td id=“minmax_options” align=“center” style=“width:30px; cursor:pointer;” title=“Minimize” onclick=“minimize_maximizeDIV(‘options’)”>
_
</td>
</tr>
</table>
</div>
<div id=“options_contentDIV” style=“border: 1pt solid black; width:400px; height: 170px; background-color:Silver; position: absolute; top:30px; left: 0px;”>
the options:
<br />
more tabs,
<br />
more windows;
<br />
<a href=“javascript:CreateNewWindow();”>create new window</a>
</div>
</div>

    &lt;div id="mainDIV" style="border: 1pt solid black; width:600px; height: 800px; background-color:White; position: absolute; top:80px; left: 250px;" onclick="reArrangeWindowOrder('main');" onmouseup="onmouseup_releaseDIV('main');"&gt;
        &lt;div id="main_titlebarDIV" style="border: 1pt solid black; width:600px; height: 30px; background-color:White; position: absolute; top:0px; left: 0px;" onmouseup="onmouseup_releaseDIV('main');"&gt;
            &lt;table height="30px" width="100%" cellpadding="0" cellspacing="0"&gt;
                &lt;tr&gt;
                    &lt;td id="title_main" align="left" style="width:570px; cursor:move;" onmousedown="onmousedown_captureDIV('main');"&gt;
                        MAIN         
                    &lt;/td&gt;
                    &lt;td id="minmax_main" align="center" style="width:30px; cursor:pointer;" title="Minimize" onclick="minimize_maximizeDIV('main')"&gt;
                        _
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
        &lt;/div&gt;
        &lt;div id="main_contentDIV" style="border: 1pt solid black; width:600px; height: 770px; background-color:Silver; position: absolute; top:30px; left: 0px;"&gt;
            here the main content will go                          
        &lt;/div&gt;            
    &lt;/div&gt;

&lt;/form&gt;

</body>
</html>

6

the function CreateNewWindow()
has three lines of code that must be changed…
when the code was posted it changed the { &.#.0.3.9.; (without . obviously)} to ’ (single quote)

so for the code to work correctly three lines must be replaced

the three to be replaced are :

  1. var htmlstring = “<div id='” + id + “_titlebarDIV’ style=‘border: 1pt solid black; width:250px; height: 30px; background-color:White; position: absolute; top:0px; left: 0px;’ onmouseup=‘onmouseup_releaseDIV(‘" + id + "’);’>” +

2)“<td id='title_” + id + “’ align=‘left’ style=‘width:220px; cursor:move;’ onmousedown=‘onmousedown_captureDIV(‘" + id + "’);’>” +

3)“<td id='minmax_” + id + “’ align=‘center’ style=‘width:30px; cursor: pointer;’ title=‘Minimize’ onclick=‘minimize_maximizeDIV(‘" + id + "’)’>” +

if the code is rendered incorrectly; -> then just change in the green parts the single quotes to the the (&#) equivalent
http://www.w3schools.com/tags/ref_ascii.asp

replace with:


1) var htmlstring = "<div id='" + id + "_titlebarDIV' style='border: 1pt solid black; width:250px; height: 30px; background-color:White; position: absolute; top:0px; left: 0px;'  onmouseup='onmouseup_releaseDIV('" + id + "');'>" +

2) "<td id='title_" + id + "' align='left' style='width:220px; cursor:move;' onmousedown='onmousedown_captureDIV('" + id + "');'>" +

3) "<td id='minmax_" + id + "' align='center' style='width:30px; cursor: pointer;' title='Minimize' onclick='minimize_maximizeDIV('" + id + "')'>" +

also the :stuck_out_tongue: in cursor:pointer have turned out cursorointer, to correct this replace with cursor: pointer

apologies for the inconvenience

7

ulricht609 Thanks bud, I think I got it and have to check it out later. The real syntax problem was the ‘var+=’ wass wrong and not necessary? I tend to use single quotes in .js files so that anything inside would contain double quotes ".

SOMETHING LIKE THIS


f1.innerHTML='<div id="f1prompt"></br>'+//plus sign
'<input type="button" id="breturn">Return</input></br>'+//I think 'return' is reserved javascript word? hence id 'b'return
'<input type="text" id="productreturn" value="" /></br>'+
'</div>';

Right now I have several divs hardcoded in the HTML so I can use display none and display block to show and hide them for styling purposes. I probably should keep them but feel that pseudo prompts should be kept out of the html deepending on how the server side and PHP handles them.

Thanks for the CORRECT syntax ulricht609 (:

8

ulricht609 Hey I’m realizing how long your previous post was. Thanks for that. Seems you use double quotes in your .js where I use singlequote. So I’m still getting a blank ‘f1’ div with this syntax:

index.js


function viewcart(){
var items=cartbody.rows.length;
if(f1.className=='htmlpage'){
f1.className='product';//change to appropriate class
f1.innerHTML='<div id="f1prompt">'+ //f1 innerHTML returns blank?? syntax must be wrong?
'<label for="productreturn">You must return to the product page:</label>'+
'<button id="breturn" onclick="preturn()">Return</button>'+//add onclick 
'<input id="productreturn" type="text" value="" />'+
'</div>';
document.getElementById('productreturn').value=products.slice(-1);//put value in new 'productreturn' text input
}
else{
//other stuff
}}

function preturn(){ //function for 'breturn' onclick
f1.className='product'; //just realized I dulicated class change will take out
var p=document.getElementById('productreturn').value;
alert('Getting product: '+p);
getproduct(p);
f1prompt.style.display='none';//also not needed
EvalSound2();
viewcart();
}

:blush:

9

:nono: Yeah ulricht609 I’m still getting a blank ‘f1’ div with this updated code so it’s got to be a sequance or syntax error

index.js


function viewcart(){
var items=cartbody.rows.length;
if(f1.className=='htmlpage'){
f1.className='product';
f1.innerHTML='<div id="f1prompt">'+
'<label for="productreturn">You must return to the product page:</label>'+
'<button id="breturn" onclick="preturn()">Return</button>'+
'<input id="productreturn" type="text" value="" />'+
'</div>'; //Not printing?
document.getElementById('productreturn').value=products.slice(-1);
}
else{
//other stuff
}}

function preturn(){
var p=document.getElementById('productreturn').value;
alert('Getting product: '+p);
getproduct(p);
EvalSound2();
}

Still returns blank ‘f1’ div:x

OK! It helps if you don’t have the CSS declaring ‘f1prompt display None!!!’ Sorry about that ulricht609 it does work as far as the innerHTML syntax goes! I’ll post back after restyling to get it correct. Thanks for your patience.

10

ulricht609 Thanks again for everything. I got it runing perfectly writing to ‘f1’ innerHTML which allows me to take the ‘f1prompt’ completly out of the index.html. Of course there was a problem with the IE8 CSS with width and height on elements with borders but a little adjusting got it right.

index.css


/*All elements created by writing to innerHTML of #f1 div styled correctly*/

#f1prompt { display:block; position:relative; left:0%; top:0%; width:99.5%; height:98%; 
overflow:hidden; border:2px solid #2c3664; margin:0; background:#fff; }
//wierd height and widths in IE8 produces width 100% and height 100% of #f1 div?

#f1prompt label{ color:#2c3664; float:left; text-align:center; margin:20% 2% 10% 10%;
font:normal normal Bold 150%/150% "times new roman", arial, courier;}

#f1prompt input[type="text"] { display:inline; width:21%; margin:21% 0% 10% 0%; }

#breturn{ display:inline; color:#e8b23d; background:#2c3664; padding:.5%; 
margin:21% 1% 10% 0%; border:2px solid #e8b23d; font-family:"times new roman"; 
font-size:100%; font-weight:bold; text-decoration:none; }

#breturn:hover{ color:white; background:#2c3664; padding:.5%; 
margin:21% 0% 10% 0%; border:2px solid #e8b23d; font-family:"times new roman"; 
font-size:100%; font-weight:bold; text-decoration:none; }

index.js


function viewcart(){
var items=cartbody.rows.length;
if(f1.className=='htmlpage'){
f1.className='product';
//prompt('You need to return to product page: ',products.slice(-1)); //to remind me what I was trying to do
f1.innerHTML='<div id="f1prompt">'+
'<label for="productreturn">You must return to the product page:</label>'+
'<button id="breturn" onclick="preturn()">Return</button>'+
'<input id="productreturn" type="text" value="" />'+
'</div>';
document.getElementById('productreturn').value=products.slice(-1); //works fine!!
}
else if(items<=1){
alert('You have not ordered an Item.   '); //works fine!!
}
else if((f2.className=='register')&&(items>=2)){
f2.className='viewcheckout';
submitbutton.style.visibility='hidden';
printorder.style.visibility='hidden';
orderinfo.style.visibility='hidden';
header.className='header';
carttable.style.top='0px';
carthead.setAttribute('title','Click Header to Continue Shopping');
ordersum.setAttribute('title','Click to Continue Shopping');
getinvoice();
getorderdate(); //works fine!!
}
else{
f2.className='register';
header.className='header2';
carttable.style.top='22px';
carthead.setAttribute('title','Click Header to View more of Your Order');
ordersum.setAttribute('title','Click to View more of Your Order'); //works fine!!
}}

function preturn(){
var p=document.getElementById('productreturn').value;
alert('Getting product: '+p);
getproduct(p);
EvalSound2();
} //short and sweet! works fine

Thanks again ulricht609, your the best :wink:

11

its a pressure Heinz, im glad its working now, and if theres anything else :slight_smile: i will gladly try and assist :smiley:

12

regarding the double / single quotes issue.

i generally use doubles to encase the entire string, single for the id, etc,. and
[ (&#.039;)-without the . ] for any other quote(s) needed.

the single quotes equivalent (&#)
http://www.w3schools.com/tags/ref_ascii.asp

example:
var htmlstring = "<div id='" + id + "_titlebarDIV’ style='border: 1pt solid black; width:250px; height: 30px; background-color:White; position: absolute; top:0px; left: 0px;’ onmouseup='onmouseup_releaseDIV(&#.039;" + id + "&#.039;);'>";

again without the . in &#.039;