PDA

View Full Version : InnerHTML, better support.



Tabo
04-28-2007, 09:22 AM
I am using this code, what it does is when a user clicks a link it waits 6000 msecs and then the the content of DIV1 is the same as DIV2.



<script type="text/javascript">
<!--

function timer(){
setTimeout('contentchanger()',6000);
}
function contentchanger() {
DIV1.innerHTML=DIV2.innerHTML
}
// -->
</script>
<a href="#" onclick="timer()">Click</a><br />
<div id="div1">When clicked, this text will not show</div>
<div id=div2">After clicking this should be the content of both divs</div>


However it only works with IE. Can someone help me rewrite it so it works cross browser.

Thanks

tech_support
04-28-2007, 09:47 AM
Can you post us your full code please?

Tabo
04-28-2007, 09:54 AM
Can you post us your full code please?

Done in the above.

tech_support
04-28-2007, 09:54 AM
Well, what's DIV1 and DIV2?

Bob90
04-28-2007, 10:54 AM
Try this


<script type="text/javascript">
<!--

function timer(){
setTimeout(function(){contentchanger()},6000);
}

function contentchanger() {
DIV1 = document.getElementById("div1");
DIV2 = document.getElementById("div2");
DIV1.innerHTML = DIV2.innerHTML;
}
// -->
</script>
<a href="Javascript:timer()">Click</a>
<br />
<div id="div1">When clicked, this text will not show</div>
<div id="div2">After clicking this should be the content of both divs</div>

mburt
04-28-2007, 12:18 PM
Use document.getElementById();

<script type="text/javascript">
function timer(){
setTimeout(function(){
var DIV1 = document.getElementById("div1");
var DIV2 = document.getElementById("div2");
DIV1.innerHTML = DIV2.innerHTML;
},6000);
}
</script>
<a href="javascript:timer()">Click</a>
<br />
<div id="div1">When clicked, this text will not show</div>
<div id="div2">After clicking this should be the content of both divs</div>
The "<--" and "-->" are pointless, JavaScript won't be used anyways for browsers that can't read it.
Also, declaring multiple functions for one task is inefficient.

pcbrainbuster
04-28-2007, 12:25 PM
Its missing a }

mburt
04-28-2007, 12:27 PM
It's not, actually.

jscheuer1
04-28-2007, 01:55 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function timer(){
setTimeout('contentchanger()',6000);
return false;
}
function contentchanger() {
var d1=document.getElementById? document.getElementById('div1') : document.all['div1'],
d2=document.getElementById? document.getElementById('div2') : document.all['div2'];
d1.innerHTML=d2.innerHTML;
}

</script>
</head>
<body>
<div>
<a href="#" onclick="return timer();">Click</a><br>
<div id="div1">When clicked, this text will not show</div>
<div id="div2">After clicking this should be the content of both divs</div>
</div>
</body>
</html>

mburt
04-28-2007, 02:00 PM
What's the point of that? Internet Explorer supports document.getElementById().

jscheuer1
04-28-2007, 02:54 PM
What's the point of that? Internet Explorer supports document.getElementById().

The question was "better support". This makes it backward compatible to IE version 4 browsers.

When writing code, I'm generally in the habit of using object branching to allow for wider compatibility. If I knew offhand the way to make this work in NN and NS v 4 browsers, I would have included a branch for that too.

It is a fine point. But, it really doesn't hurt anything, and the code works.

To be even more backward compatible and to error check we would:


function contentchanger() {
var d1=document.getElementById? document.getElementById('div1') : document.all? document.all['div1'] : null,
d2=document.getElementById? document.getElementById('div2') : document.all? document.all['div2'] : null;
if(d1 && d2)
d1.innerHTML=d2.innerHTML;
else
alert ('Fix your markup and/or Get a Browser! :)');
}

Tabo
04-30-2007, 04:25 PM
Thanks for the help, im using this:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function timer(){
setTimeout('contentchanger()',6000);
return false;
}
function contentchanger() {
var d1=document.getElementById? document.getElementById('div1') : document.all['div1'],
d2=document.getElementById? document.getElementById('div2') : document.all['div2'];
d1.innerHTML=d2.innerHTML;
}

</script>
</head>
<body>
<div>
<a href="#" onclick="return timer();">Click</a><br>
<div id="div1">When clicked, this text will not show</div>
<div id="div2">After clicking this should be the content of both divs</div>
</div>
</body>
</html>

And i want it so I can use the same script with different divs, yes

Function somthing(whichdiv1,whichdiv2...)

Sorry if im not explaining this well.

jscheuer1
04-30-2007, 08:57 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function timer(){
var arg=arguments;
setTimeout(function(){contentchanger(arg[0],arg[1]);},6000);
return false;
}
function contentchanger() {
var d1=document.getElementById? document.getElementById(arguments[0]) : document.all[arguments[0]],
d2=document.getElementById? document.getElementById(arguments[1]) : document.all[arguments[2]];
d1.innerHTML=d2.innerHTML;
}

</script>
</head>
<body>
<div>
<a href="#" onclick="return timer('div1', 'div2');">Click</a><br>
<div id="div1">When clicked, this text will not show</div>
<div id="div2">After clicking this should be the content of both divs</div>
<a href="#" onclick="return timer('div3', 'div4');">Click</a><br>
<div id="div3">3When clicked, this text will not show</div>
<div id="div4">4After clicking this should be the content of both divs</div>
</div>
</body>
</html>