SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 weird cases of Javascript

    i was trying some test of Javascript, and then if I use

    Code:
    		<div id="divOutput" style="white-space: pre"></div>
    
    
    		<script>
    
    		  document.getElementById('divOutput').innerHTML = document.getElementById('divOutput').innerHTML + "hello\n";
    		  document.getElementById('divOutput').innerHTML = document.getElementById('divOutput').innerHTML + "world\n";
    
    		</script>
    then nothing is shown in IE 7 or FF 3, but it shows on Chrome... so I wonder which one is correct and why not showing?

    And then when I add the HTML 4.01 strict doctype and make it validate:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	
    	<head>
    
    		<title>
    			JS test
    		</title>
    		
    	</head>
    	
    	<body>
    		
    		<div id="divOutput" style="white-space: pre"></div>
    
    
    		<script type="text/javascript">
    
    		  document.getElementById('divOutput').innerHTML = document.getElementById('divOutput').innerHTML + "hello\n";
    		  document.getElementById('divOutput').innerHTML = document.getElementById('divOutput').innerHTML + "world\n";
    
    		</script>
    then something shows on IE 7, FF 3, and Chrome, but on IE 7, the lines are not broken down into 2 lines, as expected by the "white-space: pre". On FF 3 and Chrome, they are broken into 2 lines. So this is another weird thing... and is FF 3 and Chrome more correctly doing it? Many thanks.

  2. #2
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PS: one more weird thing when I use innerText instead of innerHTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	
    	<head>
    
    		<title>
    			JS test
    		</title>
    		
    	</head>
    	
    	<body>
    		
    		<div id="divOutput" style="white-space: pre"></div>
    
    
    		<script type="text/javascript">
    
    		  document.getElementById('divOutput').innerText = document.getElementById('divOutput').innerText + "hello\n";
    		  document.getElementById('divOutput').innerText = document.getElementById('divOutput').innerText + "world\n";
    
    		</script>
    IE 7 shows helloworld. FF 3 shows nothing, and Chrome shows

    hello
    world

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Firefox doesn't support innerText - you need to use textContent instead.
    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="^$">

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I remember running into an issue with IE when I dynamically updated the innerhtml of a pre element using javascript. It would lose the preformated semantics except for monospace font. I don't remember what version of IE, but I'm sure google knowns. Try making a new element and replacing it, instead of updating it. I think that worked.


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
  •