Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Function doesn't work in createElement method

Posted on 2003-10-31
11
310 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
It's sometimes a bit tricky to use date functions in Oracle BPEL. I'll explain quickly how you can add N days to the current date. In a BPEL process this can be useful, and you can adapt it to fit your needs. First of all, let's see how to add 1 …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

789 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