468,321 Members | 1,761 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,321 developers. It's quick & easy.

innerHTML and javascript

sabesneit
Hi, I'm tring to execute some javascript with innerHTML but nothing happen, here a simplified example:
[HTML]
<html>
<head>
<title>this doesnt work!</title>
<script language="javascript">
function DoSomething()
{
document.getElementById("div1").innerHTML = "<script language=\"javascript\">\n alert(\"hello world\");\n <\/script>";
}
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" onClick="DoSomething();" value="damn do something!">
</body>
</html>
[/HTML]

if you find out why it doesnt pop "hello world" or the way to do it, thank to let me know.
Sébastien
Nov 15 '06 #1
3 2952
ronverdonk
4,258 Expert 4TB
Because the alert is not triggered. The following does work:
[html]
<html>
<head>
<title>this doesnt work!</title>
<script language="javascript">
function DoSomething()
{
document.getElementById("div1").innerHTML =
"<input type='button' onclick='javascript:alert(\"Hello to you too!\");' value='Hit me' />";
}
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" onclick="DoSomething();" value="damn do something!">

</body>
</html>
[/html]

Ronald :cool:
Nov 15 '06 #2
Thank you but it's not exactly what i need. here another example, the first button change the div's javascript and the second button use the javascript function in the div.

try this, click the second button, the first and the second again.
the expected result is "no!" and "Hello world!" but i get "no!" 2 times even if changed the function DoIt() with the first button;

thank for your anwser

[HTML]
<html>
<head>
<title>this doesnt work!</title>
<script language="javascript">
function DoSomething()
{
document.getElementById("div1").innerHTML = "!<script language=\"javascript\">\n function DoIt(){\nalert(\"hello world\");\n}\n <\/script>!";
}
</script>
</head>
<body>
<div id="div1">
#<script language="javascript">
function DoIt()
{
alert("no!");
}
</script>#
</div>
<input type="button" onClick="DoSomething();" value="Change function"><br>
<input type="button" onClick="DoIt();" value="Button, Say hello">
</body>
</html>
[/HTML]
Nov 16 '06 #3
pronerd
392 Expert 256MB
The problem you are running into is that JS functions are treated like objects not text. An elements event handlers, in this case onclick, are set on page load so over writing the text after the page has loaded is not going to work for you.

If you want to change an elements assigned event handler you need to do something like this

<input type="button" id="button1" onClick="changeEvent();" value="Change function"/><br />


<script language="javascript">
function changeEvent();
{
document.getElementById("button1").onclick = new Function("function DoIt(){ alert(\'Event Changed\');}";
}
</script>
Nov 16 '06 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Phil N | last post: by
9 posts views Thread by Hallvard B Furuseth | last post: by
4 posts views Thread by tcole6 | last post: by
17 posts views Thread by PJ | last post: by
8 posts views Thread by Pratik Patel | last post: by
1 post views Thread by howard w | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.