Solved

Function doesn't work in createElement method

Posted on 2003-10-31
11
313 Views
Last Modified: 2010-04-06
Hello,

I'm building an HTML web editor and I use the createElement method to add DIVs and Images to the page.  To set properties of elements in the page I use a function that sends the element's ID to other functions. The problem is that I have two working modes: one, when the element is first created, and the other when I recall the page for further editing.

If I use:
myDiv.onselect = function(){ divid(id)};
it works when the element is first created, but if I create another element it works for the new one but not for the first. Furthermore, it doesn't work if I save and reload the page. its not even in the HTML.

The second format:
myDiv.onselect = 'divid(this.id)';
it works fine when I reload the page but not when I first introduce the element in the page.

Many thanks in advance
0
Comment
Question by:noambec
  • 6
  • 4
11 Comments
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9659018
without seeing the actual code, can't say.
but, if it's in the html before the save but not after, you are not saving what you think you are saving

Vinny
0
 

Author Comment

by:noambec
ID: 9659241
Hi Vinny,

I'm quite sure that that's what I save becasue I use an alert function to show me just what's in the HTML in any moment.

myDiv.onselect = 'divid(this.id)';
is in the HTML but doesn't work before the save.

myDiv.onselect = function(){ divid(id)};
works before the save but not afterwords, and is not viewable in the HTML.

It's as if the element is not registered at first in the DOM.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9659349
mind posting a url or some more code so I can see what you are talking about?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:noambec
ID: 9659754
Hi,

This is the code i use to create a new div:

function newDiv () {
e = document.all.tags("div");
id = e.length + 1;
myDiv = document.createElement("div");
myDiv.innerText = 'Add your text here';
myDiv.style.position = 'absolute';
myDiv.style.top = 50;
myDiv.style.left = 150;
myDiv.setactive();  // not sure about that, if it's needed
myDiv.id = id;
myDiv.onfocus = 'divid(this.id)';  
//or: myDiv.onfocus =  function(){ divid(id)};
document.execCommand("2d-Position", true,true);
document.all.myEditArea.appendChild(myDiv);
}
0
 
LVL 15

Accepted Solution

by:
VincentPuglia earned 105 total points
ID: 9659983
Hi,

since you only gave me the function itself, there's only so much I can do/say.

1) don't use numerics for div ids -- it may be ok to say do...ById('5'), but i seriously doubt doc...all.5.style  would fly
2) in the function you posted, you were setting the innerText to the same content and the positioning to the same values -- how would you see anything -- if you looked at the outerHTML, only the divid number would change.

3) without a url and/or real code -- I can't say what the problems are; other than those 2 possibilities stated above.

function newDiv (formObj) {
e = document.all.tags("div");
id = 'div' + e.length + 1;
myDiv = document.createElement("div");
myDiv.innerText = formObj.contents.value
myDiv.style.position = 'absolute';
myDiv.style.top = 50;
myDiv.style.left = 150;
myDiv.setActive();  // not sure about that, if it's needed
myDiv.id = id;
myDiv.onfocus = 'divid(this.id)';  
//or: myDiv.onfocus =  function(){ divid(id)};
document.execCommand("2d-Position", true,true);
document.all.myEditArea.appendChild(myDiv);
alert(myDiv.innerHTML)
alert(myDiv.outerHTML)
}
//-->
</script>
</head>
<body>
<div id='myEditArea'></div>

<div id='a1'>ddd</div>
<div id='a2'>ddd</div>
<div id='a3'>ddd</div>
<form>
<input type='text' name='contents'>
<input type="button" onclick='newDiv(this.form)'>
0
 

Author Comment

by:noambec
ID: 9660490
Hi  Vinny,

Many thanks for your effort. Sorry I didn't add the URL before, the application has also a file managment sytem which is not secure yet, and it took me some time to seclude the editor from the rest of it.

please go to : http://iucc.technion.ac.il/~noamb/homepages/Web_Editor_2.php

To add a div block click the middle icon on the first icons row. You can drag it and change the text. 2 clicks will activate:
myDiv.onfocus =  function(){ divid(id) };
Then you can click a color in the color pallet to set it's background. you can also move it with the up/down errows. Click the Value button below to see that the function is not seen in the HTML. If you add another div it will be active but you can't edit the first one no more.

You do see in the HTML:
myDiv.onClick = 'divid(this.id)';
which is inactive.

Then push "Preview" button and then "edit" button at the bottom to send it back to the editor. Now the onClick=divid(this.id); works for as many divs and images you added previously. You have to click 3 times to activate a div.

Many thanks in advance if you still have patiance for that.

Noam

P.S
i use document.getElementById('5') to access an element and it works fine.


0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9661267
Hi Noam,

  I see what you mean (and some of the problems have to do with the absolute positioning of the divs without checking if any already exist -- similar to the user problems the early Visual C editor had).  I'll have to look at it more closely later (halloween and little ones running about), but at first glance I can say I like it -- it is kind of neat.

Vinny
0
 

Author Comment

by:noambec
ID: 9666380
Hi Vinny,

I managed to fix the "dynamic" function by:
myDiv.onfocus =  function(){ divid(this.id)};

This makes a reasonable situation where I use one function for the primary mode and another to the edit mode. One problem though remains: how to link them both to the same event, say onfocus or omousedown, so the user will not have to click a different number of clicks to activate an element in each mode.

Since this is not what I asked in the first place, I willingly accept your previous answers.

I'll come over to see if you have an idea how to link both functions to the same event. Please feel free to let go if you have none.

Many thanks for you time an effort

Noam

 
0
 

Author Comment

by:noambec
ID: 9666400
Hi Vinny,

I've just found out that by accepting I close the question, and i'm not sure that it will still allow you to add a comment, so I'll do it tomorrow in case you do have a solution to my second question.

Thanks
0
 
LVL 11

Assisted Solution

by:Zontar
Zontar earned 20 total points
ID: 9669793

//  prototype: addEvent(HTMLElement elementObject, String eventName, Object functionObject)

function addEvent(elementObject, eventName, functionObject)
{
  if(document.addEventListener)  //  Mozilla/Opera
    elementObject.addEventListener(eventName, functionObject, false);
  else
  {
    if(document.attachEvent)  //  MSIE
      elementObject.attachEvent("on" + eventName, functionObject);
  }
}

Example:

function doSomething()
{
  alert("Boo!");
}

addEvent(document.getElementById("myEl"), "focus", doSomething);

This does the same thing as

document.getElementById("myEl").onfocus = doSomething;

except that you can add multiple events/event handlers to the same element.

There are also DOM and MSIE for removing event handlers individually, but I've not yet got around to writing a bridging function for those. ;-)

BTW, don't use innerText or document.all if you want to be compatible with non-IE browsers.
0
 

Author Comment

by:noambec
ID: 9673833
Hi guys,

I managed to work it out myself with two event handlers. Not perfect but close enough. Though either of you was close you deserve the points for your effort.

Many thanks

Noam
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question