SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problem writing elements to innerHTML

    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
    Code:
    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">\n'; //must be syntax error
    f1.innerHTML+='<label for="productreturn">You must return to the product page:</label>\n';
    f1.innerHTML+='<input id="productreturn" type="text" value="products.slice(-1)" />\n';
    f1.innerHTML+='<button id="return">Return</button>\n';
    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 again! Any help greatly appreciated.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Where is the id="f1" in the HTML?
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problem writing elements to innerHTML

    Hey felgall It's Bellow the Horizontal logo and right of vertical sidebar nav.
    index.html
    HTML Code:
    <div id="f1" class="htmlpage">
    </div>
    index.css
    Code:
    #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.
    Last edited by Heinz Stapff; Oct 9, 2011 at 13:22. Reason: //sorry posted f1label by mistake

  4. #4
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problem writing elements to innerHTML

    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. #5
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 < 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 < 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 < 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)) >= (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)) >= (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 < 0) { tempX = 0; }
    if (tempY < 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 = "<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 + "');'>" +
    "<table height='30px' width='100%' cellpadding='0' cellspacing='0'>"+
    "<tr>"+
    "<td id='title_" + id + "' align='left' style='width:220px; cursor:move;' onmousedown='onmousedown_captureDIV('" + id + "');'>" +
    "New Window : " + id +
    "</td>"+
    "<td id='minmax_" + id + "' align='center' style='width:30px; cursorointer;' title='Minimize' onclick='minimize_maximizeDIV('" + id + "')'>" +
    " _"+
    "</td>"+
    "</tr>"+
    "</table>"+
    "</div>"+
    "<div id='" + id + "_contentDIV' style='border: 1pt solid black; width:250px; height: 270px; background-color:Silver; position: absolute; top:30px; left: 0px;'>" +
    "<table border='1' cellspacing='0' cellpadding='0'>" +
    "<tr>" +
    "<td colspan='2' align='center' style='border-bottom: 1pt solid black;'>" +
    "<u>A NEW WINDOW</u>" +
    "</td>" +
    "</tr>" +
    "<tr>" +
    "<td valign='top' align='left' style='border-right: 3pt solid gray; border-bottom: 1pt solid black;'>" +
    "Something here"
    "</td>" +
    "</tr>" +
    "</table>" +
    "</div>";

    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()
    //=================================


    </script>
    </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; cursorointer;" 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>



    <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');">
    <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');">
    <table height="30px" width="100%" cellpadding="0" cellspacing="0">
    <tr>
    <td id="title_main" align="left" style="width:570px; cursor:move;" onmousedown="onmousedown_captureDIV('main');">
    MAIN
    </td>
    <td id="minmax_main" align="center" style="width:30px; cursorointer;" title="Minimize" onclick="minimize_maximizeDIV('main')">
    _
    </td>
    </tr>
    </table>
    </div>
    <div id="main_contentDIV" style="border: 1pt solid black; width:600px; height: 770px; background-color:Silver; position: absolute; top:30px; left: 0px;">
    here the main content will go
    </div>
    </div>

    </form>
    </body>
    </html>

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    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 :P in cursorointer have turned out cursorointer, to correct this replace with cursor: pointer


    apologies for the inconvenience
    Last edited by ulricht609; Oct 11, 2011 at 01:14. Reason: :P

  7. #7
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Problem writing elements to innerHTML

    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
    Code:
    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. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problem writing elements to innerHTML

    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
    Code:
    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();
    }
    Last edited by Heinz Stapff; Oct 11, 2011 at 11:17. Reason: //just realized I dulicated class change will take out

  9. #9
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Problem writing elements to innerHTML

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

    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. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb RESOLVED!!Problem writing elements to innerHTML

    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
    Code:
    /*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
    Code:
    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

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up glad its working

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

  12. #12
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    Last edited by ulricht609; Oct 12, 2011 at 01:13. Reason: spelling, etc.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •