The Cache: Technology Expert's Forum
 
*
Welcome, Guest. Please login or register. September 21, 2019, 12:10:04 AM

Login with username, password and session length


Pages: [1]
  Print  
Author Topic: Help assigning innerhtml property of a div element in javascript  (Read 3022 times)
mampy
Journeyman
***
Offline Offline

Posts: 68


View Profile
« on: February 10, 2009, 03:08:32 PM »

Okay chugging along here ... 

Can someone please tell me why i can assign a value to the first div 's innerHTML
property, pass the var thecodetorun to an alert just fine and then when i go to use
the .innerHTML property of the second div element on the same form that just got done working
it overwrites the 'script should appear here' with nothing...


Code:
<html>
<head>
<title>javascratchpad</title>

<script type="text/javascript">
function executethecode()
{

  var thecodetorun;
 
  thecodetorun=document.getElementById("thecode").value;

  alert(thecodetorun);
 

  document.getElementById("viewid").innerHTML=' testing ';

  document.getElementById("viewid2").innerHTML=thecodetorun;

 
}
</script>
</head>

<body>
<form id="formid" name="formname">

<input name="button" value="Edit and Click Me >>" onclick="executethecode()">
<br>
<textarea id="thecode" rows=20 cols=80>
<html>
<body>

<script type="text/javascript">
var firstname;
firstname="mampy";
document.write(firstname);

</script>

<br>


</body>
</html>



</textarea>



<div id="viewid">
Waiting for you to click
</div>
<br>
<hr>
<br>
<div id="viewid2">
Script should appear here...
</div>
<hr>
<br>
script should appear above this line but it doesnt, how come i can pass the value to the alert function but not to the innerhtml property as i did on the div named viewid?<br>
<hr>
</form>


</body>

</html>

Logged
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #1 on: February 10, 2009, 03:28:46 PM »

Why do you have a body nested inside of the body? I don't know if that has anything to do with this scenario, but you only want:

<html>
<head>
</head>
<body>

</body>
</html>

On quick look it seems OK, but there could be weirdness not obvious in your post that is giving you troubles.

Put an alert before and after the innerHTML=theCodeToRun and see if that line is even being executed.

Try this as well:

document.getElementById('viewID2').innerHTML = document.getElementById('theCode').value;

Are you running either FF or Safari and can you see an error console? That helps me out big.
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
mampy
Journeyman
***
Offline Offline

Posts: 68


View Profile
« Reply #2 on: February 10, 2009, 03:54:24 PM »

Why do you have a body nested inside of the body?
its code to be executed on the fly ..... technically though, its inside of the textarea, and im proving it gets parsed correctly when i alert(thecodetorun)....shouldnt i be able to put a (0-255) 256character ascii block between the textarea tags and grab the value using getelementbyid? im passing the body tags inside that textarea to the alert box it just doesnt make it to the viewid2 div the way it makes it to the alert box and the way im able to assign the word testing to the div named viewid (right before it)


Quote
Are you running either FF or Safari and can you see an error console? That helps me out big.

Woah error console ....  ROFLMAO  sweet.  yup i can see that now and
no errors, alerts 1 two and (now three) all get shown so that line of code is reached
i added the correctly capitalized and/or apostrophed or double quoted line
you suggested and it blinks , actually changes the test of div named viewid2 to nothing...

i guess i could eval the codetorun....

but for learnin' sake and to get down to it i have no errors on the following code,
however no html or executed java .... shouldnt it execute the java code/html
and markup/excute it automatically

Code:
<html>
<head>
<title>javascratchpad</title>

<script type="text/javascript">
function executethecode()
{

  var thecodetorun;
 
  thecodetorun=document.getElementById("thecode").value;

  alert(thecodetorun);
 

  document.getElementById("viewid").innerHTML=' testing ';
  alert("here 1");
  document.getElementById("viewid2").innerHTML=thecodetorun;
  alert("here 2");
  document.getElementById("viewid2").innerHTML = document.getElementById("thecode").value;
  alert("here 3");
  //document.getElementById("viewid2").src=thecodetorun;
 
}
</script>
</head>

<body>
<form id="formid" name="formname">

<input name="button" value="Edit and Click Me >>" onclick="executethecode()">
<br>
<textarea id="thecode" rows=20 cols=80>
<html>
<body>

<script type="text/javascript">
var firstname;
firstname="mampy";
document.write(firstname);

</script>

<br>


</body>
</html>



</textarea>



<div id="viewid">
Waiting for you to click
</div>
<br>
<hr>
<br>
<div id="viewid2">
Script should appear here...
</div>
<hr>
<br>
script should appear above this line but it doesnt, how come i can pass the value to the alert function but not to the innerhtml property as i did on the div named viewid?<br>
<hr>
</form>


</body>

</html>


« Last Edit: February 10, 2009, 04:05:23 PM by mampy » Logged
mampy
Journeyman
***
Offline Offline

Posts: 68


View Profile
« Reply #3 on: February 10, 2009, 03:57:26 PM »

and for the record its firefox and the 'view source' output doesnt show the word testing in the html, either even though it changes on the page dynamically after clicking the button and doing the above mentioned... blanking out the second div i attempt to assign and proving the textarea data is parsed correctly cause it shows up in the alert box....

thanks for any help... im bug eyed looking at this for too long now i think.
« Last Edit: February 10, 2009, 04:09:44 PM by mampy » Logged
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #4 on: February 10, 2009, 04:39:07 PM »

The problem is, in fact, the body in a body.

But you don't see it until you click on your edit box.

Change all the code in the box to be simply, "This is a test" and click in your box. It will do what you expect.

Remove the <html><head> and <body> tags and it should do what you are looking to do.
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
mampy
Journeyman
***
Offline Offline

Posts: 68


View Profile
« Reply #5 on: February 10, 2009, 07:20:52 PM »

the problem is, what i am looking to do is send javascript (not as a form post)
 but inside of the dom and running on the client side send actual javascript
code and its done on the w3schools site here using a post:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_variable

but i was trying to see why i could make the data available POST CLICK
to the alert function in the last code i posted (on my most recent jdk and
runtime environment) but not to assign... could this have something to
do with scope or could i have found a javascripting error.  cause i clearly
have proved in the first alert all the text is available to the javascript
interpreter im running (at risk of font size heckling) : here:

see the 'script should be here part' is blanked out so SOMETHING happens.

Why can i access it as in the following snapshot through alert and i lose it
trying to assign it? could this be a scope issue that i still dont understand
or is it that i have found a bug what do you get when you run the last code
i posted after making the changes you suggested... i will try this in all my vms
tomorrow post margueritas but i appreciate your attention this is a catharsis for
me and maybe i take back what i said about java lol...

hawaii sunrise included at no extra cost



* myresults.png (75.33 KB, 1280x800 - viewed 223 times.)

* hawaii sunrise.png (360.87 KB, 605x377 - viewed 236 times.)
Logged
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #6 on: February 10, 2009, 08:11:07 PM »

Why can i access it as in the following snapshot through alert and i lose it
trying to assign it? could this be a scope issue that i still dont understand
or is it that i have found a bug what do you get when you run the last code
i posted after making the changes you suggested... i will try this in all my vms
tomorrow post margueritas but i appreciate your attention this is a catharsis for
me and maybe i take back what i said about java lol...

no no, you're missing it: It IS doing what you're asking it to do. The problem with it is HTML parsing and display, not your javascript. You see, when you put <html><body> etc etc </body></html> inside of a div inside of a page, it is being interpreted as crap, so it is not displayed. The problem is that the DOM (the html parser/interpreter) doesn't like an HTML and body inside a body (or something like that) so when you post the text into the div, it is simply not displayed. If you put any other text, even normal MIDDLE-BODY html into it, it will display.
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #7 on: February 10, 2009, 08:11:26 PM »

Love the sunrise BTW...
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
Pages: [1]
  Print  
 
Jump to:  

Perkiset's Place Home   Best of The Cache   phpMyIDE: MySQL Stored Procedures, Functions & Triggers
Politics @ Perkiset's   Pinkhat's Perspective   
cache
mart
coder
programmers
ajax
php
javascript
Powered by MySQL Powered by PHP Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS!