SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using the DOM to write to page / label / div

    function ConjunctionJunction(){
    var strInputSize = document.getElementById("inputSize").value;
    strInputSize = strInputSize * 0.03937 + " inches";

    var writeIt = document.getElementById("WriteCalculation");
    writeIt.innerHTML = (strInputSize);

    }

    How do I write to a div or label or just plain text?

    The Div id="WriteCalculation area I have set asid for this function, only briefly displays the calculated result, but then it disappears.

    How do I get it to stay permanently?

    I am realizing after some preliminary research that innerHTML is not officially part of any W3C DOM specification, is that true?

    However, the case has been made that innerHTML is lightning fast compared to the DOM. http://www.quirksmode.org/dom/innerhtml.html
    Last edited by danjojo; Jun 4, 2007 at 06:14.

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var writeIt = document.getElementById("WriteCalculation");
    using the dom, if writeIt is an input element or textarea
    writeIt.value= strInputSize;
    for any other element-
    writeIt.appendChild(document.createTextNode(strInputSize))

    Or use replaceChild or insertBefore to locate the string somewhere else in the
    writeIt element

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Ok, things I was trying previously were also working. Your help provided, also worked but only PRE-SUBMIT.

    I believe now my real design-flaw is that I am using a submit button event to call the JavaScript function, and so it places the correct content in my div, but then obediently reloads the page!!

    The disadvantage to using Button Events, is that the Enter key on the keyboard will not trigger them.

    Full code for clarity:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
    <html>
    <head>
    <link href="ajaxExample.css" rel="stylesheet" type="text/css">
    <!--[if IE]>
    <link href="ajaxExample_ie.css" rel="stylesheet" type="text/css">
    <![endif]-->
    <title>Modern DHTML = DOM Scripting & Ajax working together</title>
    <script type="text/javascript">
    var message = "<br/> <input type='checkbox' checked> <font color='red'><strong>Arrival at JavaScript -- Initiate the XmlHttpRequestObject</strong></font><br/><br/>";
    document.write(message.toUpperCase());
    var XMLHttpRequestObject = 0; // default to false boolean value
    document.write("<input type='checkbox' checked> <font color='red'>By default XMLHttpRequestObject is set to False -- Get a Response from the browser the the XMLHttpRequestObject is set.</font><br/><br/>");

    if (window.XMLHttpRequest) { // Mozilla, Safari, Truthy test ...
    XMLHttpRequestObject = new XMLHttpRequest();
    if (XMLHttpRequestObject.overrideMimeType) {
    XMLHttpRequestObject.overrideMimeType('text/xml');
    }
    } else if(window.ActiveXObject) { // Truthy test for pre Internet Explorer 7 browsers
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (XMLHttpRequestObject) { // test for the object
    document.write("<input type='checkbox' checked> <font color='red'>Response Received -- Congrats, the XMLHttpRequestObject object is available in your browser, you can use AJAX!</font><br/><br/>");
    } else {
    document.write("Your in a browser that is outdated and cannot run this web application");
    }

    function ConjunctionJunction(){
    var strInputSize = document.getElementById("inputSize").value;
    strInputSize = strInputSize * 0.03937 + " inches";

    var writeToElement = document.getElementById("WriteCalculation"); // div
    // innerHTML sets or gets all of the markup and content within a given element
    writeToElement.appendChild(document.createTextNode(strInputSize));
    }

    </script>
    </head>
    <body>
    <div id="containMe" style="background: white; border: 1px solid black; margin: 5px; padding: 3px;">
    <h1>Modern DHTML = DOM Scripting & Ajax working together</h1>
    <br/>
    <div style="border: 2px solid #44A143; padding: 7px; width: 730px;">
    <form onSubmit="ConjunctionJunction();">
    Enter Size in milimeters <input type="text" bgcolor="yellow" id="inputSize"> <label id="inchesLabel" style="font-weight: bold;">22 milimeters = 1/4 inch.</label><br/>
    <br/>
    <input class="red" type="submit" value="Function Juntion">
    </form>
    </div>
    </div>
    <div id="WriteCalculation" style="background: white; border: 1px solid black; margin: 5px; padding: 3px;">
    </div>
    </body>
    </html>

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because I like to be fair and balanced: Here is a link to innerHTML Gotcha's: http://www.ajaxian.com/archives/innerhtml-gotchas

    I can see the value in learning to do the verbose way that is the W3C DOM way.

    innerHTML is just fast and simple.


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
  •