IE only show the first line after set innerHTML.

Discussion in 'Javascript' started by huzheng001, Oct 3, 2006.

  1. huzheng001

    huzheng001 Guest

    I have develop a on-line dictionary website,
    I meet a problem:
    Here is two lines of js codes:
    document.getElementById("wordlist").innerHTML = "";
    document.getElementById("definition").innerHTML = "line1<br>line2";
    The corresponding html codes are:
    <table width="100%">
    <td width="25%" valign="top"><div id="wordlist" width="100%" style='
    overflow-y:auto; height:352px;'></div></td>
    <td width="8" bgcolor="#888888"></td>
    <td width="75%" valign="top"><div id="definition" width="100%" style='
    overflow-y:auto; height:352px;'></div></td>
    But I will find only the first line1 is showed, you can't see line2. By
    alert(document.getElementById("definition").innerHTML) you can find the
    content is right. If comment the first line which set wordlist's
    innerHTML, the result will be shown correctly.
    This problem only happen in IE. It is correct in firefox.
    Any one can help me to fix the problem? Thanks!
    huzheng001, Oct 3, 2006
    1. Advertisements

  2. napisal(a):
    I have testes followin example on FF/IE 6 and it works, maybe it will
    help ;-):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <meta http-equiv="content-type" content="text/html;
    <meta name="generator" content="PSPad editor,">
    <script type="text/javascript">
    // a counter used to create unique IDs
    var Utils = new Object();
    Utils.addEvent_guid = 1;

    * Rejestruje funkcje obslugi wybranego zdarzenia dla wskazanego
    elementu DOM.
    * TODO: zrobic anonynomous function execution...w której bedzie
    wybór metody,
    * np. wpierw preferowac DOM'a czyli [elem].addEventListener();
    * @param element referencja do elementu DOM (tworzona/uzywana
    * jest wlasciwosc events tego elementu(typu Object), która
    * strukture
    * @param type nazwa zdarzenia np. click
    * @param handler referencja do funkcji obslugi zdarzenia
    (przypisywana jest mu
    * wlasciwosc $$guid, która jest unikalnym numerem
    (wzgledem wszystkich
    * funckji obslugi zdarzen))
    Utils.addEvent = function(element, type, handler)
    // assign each event handler a unique ID
    // , but what about concurency, (thread races etc. ?), we assume here
    // that script is running always in ONE thead...(so it is fine below).
    // This is sury true for IE, where event object is a property of
    // object window (window.event), so for this to work the events must
    // fired in sequence...
    if (!handler.$$guid) handler.$$guid = Utils.addEvent_guid++;
    // create a hash table of event types for the element
    if (! = new Object();
    // create a hash table of event handlers for each element/event pair
    var handlers =[type];
    if (!handlers) {
    handlers =[type] = new Object();
    // store the existing event handler (if there is one)
    if (element["on" + type]) {
    handlers[0] = element["on" + type];
    // store the event handler in the hash table
    handlers[handler.$$guid] = handler;
    // assign a global event handler to do all the work
    element["on" + type] = Utils.handleEvent;

    * Usuwa zarejestrowana funkcje obslugi zdarzenia.
    Utils.removeEvent = function(element, type, handler)
    // delete the event handler from the hash table
    if ( &&[type]) {

    Utils.fixEvent_preventDefault = function()
    this.returnValue = false;

    Utils.fixEvent_stopPropagation = function()
    this.cancelBubble = true;

    * "Poprawia" obiekt event w przegladarkach IE (window.event)
    Utils.fixEvent = function(event)
    // add W3C standard event methods for browsers that do not supports
    event.preventDefault = Utils.fixEvent_preventDefault;
    event.stopPropagation = Utils.fixEvent_stopPropagation;
    return event;

    * Jest wolana, gdy nalezy obsluzyc zdarzenie danego typu (jej
    funkcja to
    * wolanie wlasciwej funckji obslugi zdarzenia zarejestrowanej
    * Utils.addEvent()).
    Utils.handleEvent = function(event)
    var returnValue = true;
    // grab the event object (IE uses a global event object)
    event = event || Utils.fixEvent(window.event);
    // get a reference to the hash table of event handlers
    var handlers =[event.type];
    // execute each event handler
    for (var i in handlers) {
    this.$$handleEvent = handlers;
    if (this.$$handleEvent(event) === false) {
    returnValue = false;
    return returnValue;

    * @return szerokosc elementu wraz z padding i border (IE)
    Utils.getElementWithId = function() {
    var getElementWithId = function() {};

    if(document.getElementById) {
    getElementWithId = function(id) {
    return document.getElementById(id);
    } else if(document.all) {
    getElementWithId = function(id) {
    return document.all[id];
    } else if(document.layers) {
    getElementWithId = function(id) {
    return document[id];
    return getElementWithId;

    Utils.addEvent(window, 'load', function() {
    Utils.getElementWithId("wordlist").innerHTML = "";
    Utils.getElementWithId("definition").innerHTML = "line1<br>line2";


    <td><div id="wordlist" width="100%"></div></td>
    <td bgcolor="#888888"></td>
    <td valign="top"><div id="definition"></div></td>

    Luke Matuszewski
    Luke Matuszewski, Oct 4, 2006
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.