[js] Element dynamisch toevoegen.

Pagina: 1
Acties:

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Ik heb een .js file welke een div maakt die een soort if-else constructie voorstelt. Initieel komen er binnen deze div twee branches te staan door middel van de functie addbranch(). Nu wil ik de mogelijkheid hebben om later nog een branch toe te voegen. Dit moet gebeuren dmv de functie addElement() waarbij ik gebruik wil maken van de originele addBranch() functie.

Zoiets:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
function addElement() {
addbranch();
}


function IfElseActivity(element) {
this.element = element
var innerBar=document.createElement("DIV")
innerBar.className="bar"
innerBar.style["width"]=100+"%"
innerBar.style["heigth"]=28+"px"
innerBar.innerHTML = "<DIV id='"+element.id+"_id' class='idlabel'>"+element.id+"</DIV>"
element.appendChild(innerBar)
this.group = Quanticks.drag().createSimpleActivity(element, innerBar)
this.Branches = new Array()
this.Properties = new Array()
this.ActWidth = 360
this.BlockWidth = 160
this.noResizeFlag = false
this.noBranchResizeFlag = false 
}

IfElseActivity.GetToolboxIcon = function()
{
return "/images/ifelse.GIF";
}

IfElseActivity.prototype = {
Initialize : function()
{
this.header = document.createElement("img")
this.header.src = "images/ifelsehead.GIF"
this.header.setAttribute("width", "268");
this.header.setAttribute("height", "49"); 
this.header.onclick = function() {addElement();}; 
this.element.appendChild(this.header)
this.table = document.createElement("table")
this.tablebody = document.createElement("tbody")
this.tablerow = document.createElement("tr")
this.tablebody.appendChild(this.tablerow)
this.table.appendChild(this.tablebody)
this.element.appendChild(this.table)
this.table.setAttribute("border", "0");
this.addBranch()
this.addBranch()
this.footer = document.createElement("img")
this.footer.src = "images/ifelsefoot.GIF"
this.footer.setAttribute("width", "268");
this.footer.setAttribute("height", "49"); 
this.element.appendChild(this.footer) 
},

addBranch : function() {
var cell = document.createElement("td");
var branch=document.createElement("DIV") 
branch.className="SequenceActivity"
var branchConnector=document.createElement("DIV")
branchConnector.className="connector"
var innerImg=document.createElement("IMG")
innerImg.src="/images/connector.gif"
branchConnector.appendChild(innerImg)
connectors[connectors.length] = branchConnector
branch.appendChild(branchConnector)
cell.appendChild(branch)
this.tablerow.appendChild(cell)
cell.setAttribute("vAlign","top")
branch.onresize=BranchResize 
branch.name = getNewId("IfElseBranchActivity"); 
this.Branches[this.Branches.length] = branch
return branch;
},

Met de huidige code lukt dat uiteraard niet. Nu ben ik al wel een heel eind door een nieuwe functie te bouwen en via de getelementbyid uiteindelijk een branch toe te voegen. Ik vroeg me alléén af of dat nodig is. Is er een manier om toch gebruik te maken van de huidige addbranch functie? Mijn probleem zit hem volgens mij in het verkeerd gebruik van "this"