Solved

Function doesn't work in createElement method

Posted on 2003-10-31
11
302 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
Comment Utility
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
Comment Utility
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
Comment Utility
mind posting a url or some more code so I can see what you are talking about?
0
 

Author Comment

by:noambec
Comment Utility
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
Comment Utility
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:noambec
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility

//  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
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now