Function doesn't work in createElement method

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
noambecAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

VincentPugliaCommented:
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
noambecAuthor Commented:
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
VincentPugliaCommented:
mind posting a url or some more code so I can see what you are talking about?
0
OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

noambecAuthor Commented:
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
VincentPugliaCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
noambecAuthor Commented:
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
VincentPugliaCommented:
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
noambecAuthor Commented:
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
noambecAuthor Commented:
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
ZontarCommented:

//  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
noambecAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.