createElement en appendChild, code compiled maar ik zie de verandering niet

[zuurstof]

Hallo, ik zit even vast met een probleempje en ik hoop dat hier iemand me er mee kan helpen.

Ik ben wat aan het oefenen met javascript en ik probeer een aantal elementen aan een bestaande tabel toe te voegen om zo een knop toe te voegen via javascript code. Ik zal even laten zien wat ik zover al heb.

in de HTML heb ik een tabel die er als volgt uit ziet;

<TABLE style="width:100%;height:100%; background-image:url(Images/MainPage/Desktop.jpg);" border="0" >
<TR id="objDesktop">

</TR>
</TABLE>

Nu ga je waarschijnlijk al gelijk afvragen, mis je niet in een TD in de table. En ja die mis ik, maar die voeg ik toe via javscript code, mijn code ziet er als volgt uit. (external js script, koppeling werkt goed want ik kan de js gewoon debuggen etc)

window.onload = function() { resizeDivs();initDesktop(); } ;

resizeDivs functie niet toegevoegd, deze werkt gewoon en heeft niks met dit probleem te maken, maar hij bestaat in ieder geval wel

function initDesktop()
{
addButton('Images/MainPage/DesktopButton.png', 'Example 1');
}

function addButton(imgNormalURL, btnText)
{
// example in html
//<TD align="left" valign="top">
// <TABLE style="width:120px; height:120px; margin:10px">
// <TR>
// <TD align="center" valign="middle" style="background-image:url(Images/MainPage/DesktopButton.png);" onmouseover="switchButtonImage(this,'true');" onmouseout="switchButtonImage(this,'false');"> Example </TD>
// </TR>
// </TABLE>
//</TD>


// td surrounding the button
var cellButton = document.createElement('TD');
cellButton.align = 'left';
cellButton.valign = 'top';

// new table where the button is placed in
var tblButton = document.createElement('TABLE');
tblButton.style.width = '120px';
tblButton.style.height = '120px';
tblButton.style.margin = '10px';

// tr element
var trButton = document.createElement('TR');

// td element
var tdButton = document.createElement('TD');
tdButton.align = 'center';
tdButton.valign = 'middle';
tdButton.style.backgroundImage = 'url(' + imgNormalURL + ')';
// tdButton.onmouseover = 'switchButtonImage(this,'true');';
// tdButton.style.onmouseout = 'switchButtonImage(this,'false');';
tdButton.innerHTML = btnText;

trButton.appendChild(tdButton); //add td to tr
tblButton.appendChild(trButton); // add tr to table
cellButton.appendChild(tblButton); // add table to cell on the desktop

// get tr element to add the cell too
var objDesktop = document.getElementById('objDesktop');
objDesktop.appendChild(cellButton); // add cell to tr

}


Deze code compiled gewoon en ik kan er doorheen debuggen en alles lijkt te werken, maar ik zie de knop gewoon niet verschijnen. Ik mis waarschijnlijk gewoon iets simpel of vergeet iets kleins te doen maar ik zie in ieder geval niks. Ik heb het helaas allemaal lokaal draaien dus ik kan geen extern linkje tonen.

ps: Alle links naar plaatjes etc kloppen

Oh en nog een klein vraagje waar ik zelf anders ook wel uitkom maar nou ik hier toch ben. ik kan de mouseonover en mouseonout events niet toevoegen, deze geven een error als ik de pagina bekijk.

En ik snap ook dat ik de table etc niet persee hoef toe te voegen maar zoals al eerder vermeld, het is meer voor de leerervaring, ik wil even weten of ik zo hele tabellen aan een bestaand element kan toevoegen etc.


Alles suggesties zijn welkom.

Met vriendelijke groet
Guido

 

[Johantrax]

Ik heb het nut van die hele DOM-werkwijze nooit goed begrepen, aangezien er zoiets bestaat als innerHTML (wat jij trouwens ook al gebruikt)
kan je niet zoiets schrijven ? (uit de losse pols)

function addButton(imgNormalURL, btnText)
{
//vraag de huidige inhoud van objDesktop op
var inhoud = document.getElementById('objDesktop').innerHTML;

//code voor knop toevoegen aan inhoud

inhoud += '<td align="left" valign="top">';
inhoud += '<table style="width:120px; height:120px; margin:10px">';
inhoud += '<tr>';
inhoud += '<td align="center" valign="middle" style="background-image:url(' + imgNormalURL + ');" onmouseover="switchButtonImage(this,' + "'true'"+ ');" onmouseout="switchButtonImage(this,' + "'false'" + ');"> ' + btnText +'</td>';
inhoud += '</tr>';
inhoud += '</table>';
inhoud += '</td>';

//nieuw inhoud aan tr geven
document.getElementById('objDesktop').innerHTML = inhoud;
}

--Johan

[EDIT]
Je beseft toch dat je nu enkel een heel ingewikkelde geneste tabelstructuur gebruikt, enkel en alleen om een rolloverimage te maken... dit kan even makkelijk met een simpele link met als enige inhoud een image waarvan je de src wijzigt....
[/EDIT]

[EDIT2]
Meer over DOM in javascript (Engels)
[/EDIT]

 

[zuurstof]

Hey

Bedankt voor je reactie. Ik ga het ook even op die methode proberen en ik snap idd ook dat een simpele rolloverimage makkelijker gemaakt kan worden, dat meld ik geloof ik ook in mijn bericht. Het is meer voor de leerervaring, ik kom deze manier van pagina's opbouwen vaak tegen op mijn werk en ik probeer het zelf een beetje thuis uit. Maar het wordt overigens ook niet zo simpel als een rolloverimage, er komt nog text boven op de image te staan en ik wil er nog wel andere rare dingen mee gaan doen die niet mogelijk zijn met een link/image.

Als jij of iemand enig idee heeft waarom deze specifieke manier van werken het niet doet zou ik dat alsnog graag weten. In mijn ogen doe ik niks fout op mijn huidige manier dus ik ben benieuwd wat ik allemaal vergeten ben of fout doe om het op deze manier in javascript op te lossen.

zal je link ook nog even gaan bekijken, in ieder geval bedankt voor het antwoord.


PS: Ik heb het antwoord al gevonden. In principe deed ik alles wel goed alleen ik was vergeten een tablebody aan de table toe te voegen. Weer iets bijgeleerd. Toch bedankt voor je reactie iig!

mocht iemand interesse hebben voor de oplossing. Deze regels miste ik

// create tablebody
var tblBody = document.createElement('tbody');

en dan bij het appenden van alle elementen aan elkaar werd het.

trButton.appendChild(tdButton); //add td to tr
tblBody.appendChild(trButton); // add tr to tablebody
tblButton.appendChild(tblBody); // add tablebody to table
cellButton.appendChild(tblButton); // add table to cell on the desktop




Als iemand nog weet hoe ik die events toevoeg dan zou ik dat nog graag horen, ben er alweer een tijdje mee aan het spelen maar het wil nog niet erg.


Met vriendelijke groet,
Guido

 

[Johantrax]

Dag Guido,

Ik heb even wat rondgeprutst en heb je oplossing gevonden. Binnen DOM worden events als attributen van een element gezien. Voor attributen beschik je over volgende mogelijkheden:

elementnode.getAttribute('attribuutnaam') -> geeft de huidige waarde weer (ik vermoed als string, nog niet getest)
elementnode.setAttribute('attribuutnaam', 'waarde'); -> wijzigt huidige waarde van attribuut, attribuut wordt toegevoegd indien het nog niet bestond
elementnode.removeAttribute('attribuutnaam'); -> verwijdert een attribuut van de elementnode

Een klein uitgewerkt voorbeeldje:

<html>
<head>
<style type="text/css">
.vet {
	font-weight: bold;
}
#d {
	font-size: 24px;
}
</style>
<script type="text/javascript">
var isDOMset = false;
function DOMding()
{
	var d = document.getElementById("d");
	if (!isDOMset) {
		d.setAttribute('class', 'vet');
		d.setAttribute('onMouseOver', 'highlight()');
		d.setAttribute('onMouseOut', 'undoH()');
	} else {
		d.removeAttribute('class');
		d.removeAttribute('onMouseOver', 'highlight()');
		d.removeAttribute('onMouseOut', 'undoH()');
	}
	isDOMset = !isDOMset;
}

function highlight()
{
	var d = document.getElementById("d");
	d.style.color = "#00FF00";
}
function undoH()
{
	var d = document.getElementById("d");
	d.style.color = "black";
}
</script>

</head>
<body>

<div id="d"><br />blabla</div>
<br />
<button onClick="DOMding()">do the DOM</button>

</body>
</html>

mvg,
--Johan

 

[zuurstof]

Wederom bedankt!

Ik ga het gelijk ff uittesten, ik laat wel weten hoe het afloopt


mvg
Guido

 

[zuurstof]

Ik heb het uitgeprobeerd maar helaas weigeren de events te triggeren.

Als ik de current html uitlees na het toevoegen van een knop in HTML en 1 in javascript ziet het resultaat er als volgt uit.

<TD vAlign="top" align="left">
  <TABLE style="MARGIN: 10px; WIDTH: 120px; HEIGHT: 120px">                            
    <TBODY>
      <TR>
        <TD onmouseover="switchButtonImage(this,'false');" onmouseout="switchButtonImage(this,'true');" vAlign="middle" 
           align="center" style="BACKGROUND-IMAGE: url(Images/MainPage/DesktopButtonMouseOver.png); CURSOR: hand">
           Example 1
        </TD>
      </TR>
    </TBODY>
  </TABLE>
</TD>

<TD align="left" valign="top">
  <TABLE style="MARGIN: 10px; WIDTH: 120px; HEIGHT: 120px">
     <TBODY>
       <TR>
          <TD onmouseover="switchButtonImage(this,'false');" onmouseout="switchButtonImage(this,'true');" 
             align="center" valign="middle" style="BACKGROUND-IMAGE: url(Images/MainPage/DesktopButton.png)">
             Example 1                
          </TD> 
       </TR>
    </TBODY>
  </TABLE>
</TD>

De bovenste is via HTML toegevoegd, de andere via javascript.
Ik zie de tabel etc wel, alleen de events doen gewoon niks en ik zie echt geen verschil
Beetje vaag dit, ben benieuwd of die events wel triggeren als je ze via javascript toevoegd, wat me wel lijkt, maar op dit moment iets minder

Mocht iemand snappen wat ik fout doe hoor ik het graag.

dit is de JS code

function switchButtonImage(img, imgOver)
{
    if (imgOver == "true")
    {
        img.style.backgroundImage = 'url(Images/MainPage/DesktopButtonMouseOver.png)';
        img.style.cursor = 'hand';
    }
    else
    {
        img.style.backgroundImage = 'url(Images/MainPage/DesktopButton.png)';
        img.style.cursor = 'arrow';
        
    }
}

function addButton(imgNormalURL, btnText)
{

    // td surrounding the button
    var cellButton = document.createElement('TD');
    cellButton.align = 'left';
    cellButton.valign = 'top';
    
    // new table where the button is placed in
    var tblButton = document.createElement('TABLE');
    tblButton.style.width = '120px';
    tblButton.style.height = '120px';
    tblButton.style.margin = '10px';
    
    // create tablebody
    var tblBody = document.createElement('tbody');
    
    // tr element
    var trButton = document.createElement('TR');
    
    // td element
    var tdButton = document.createElement('TD');
    tdButton.align = 'center';
    tdButton.valign = 'middle';
    tdButton.style.backgroundImage = 'url(' + imgNormalURL + ')';
    tdButton.innerHTML = btnText;

    tdButton.setAttribute("onmouseover", "switchButtonImage(this,'false');");
    tdButton.setAttribute("onmouseout", "switchButtonImage(this,'true');");
    
    trButton.appendChild(tdButton);
    tblBody.appendChild(trButton);
    tblButton.appendChild(tblBody);
    cellButton.appendChild(tblButton);

    // get tr element to add the cell too
    var objDesktop = document.getElementById('objDesktop');
    objDesktop.appendChild(cellButton); // add cell to tr

}

mvg
Guido


Grotendeels opgelost, alleen attachEvent werkt in IE.
nu nog uitzoeken hoe ik bijvoorbeeld een parameter zoals 'this' can meesturen.

 

[Johantrax]

Dag Guido,

Ik denk dat ik gevonden heb waarom je events niet werken. Ze worden wel degelijk getriggerd. Enkel kan je via javascript niet alle stijleigenschappen aanpassen. Zo kan je backgroundcolor wel aanpassen maar backgroundimage, alsook cursor, niet.

Dit vermoeden werd bevestigd door volgende lijst die de overeenkomstige js-termen voor css geeft.

Echter kan je dit wel omzeilen door 2verschillende klasses in css te maken met de respectievelijke eigenschappen en dan via setAttribute die klasses te wijzigen.

--Johan

[EDIT]werkend voorbeeld (enkel afbeeldingslinks aanpassen)
wat is aangepast:
- classes voor de achtergrondafbeelding/cursor gemaakt (cursornamen aangepast aan w3c)
- in de functie addButton standaard de style van onmouseout toegepast dmv setAttribute('class', 'out');
- switchButtonImage verandert de klasse van de tabelcel

<html>
<head>
<script type="text/javascript">
function switchButtonImage(img, imgOver)
{
    if (imgOver)
        img.setAttribute('class', 'over');
    else
        img.setAttribute('class', 'out');
}


function addButton(btnText, tableRowID)
{

    // td surrounding the button
    var cellButton = document.createElement('td');
    cellButton.align = 'left';
    cellButton.valign = 'top';
    
    // new table where the button is placed in
    var tblButton = document.createElement('table');
    tblButton.style.width = '120px';
    tblButton.style.height = '120px';
    tblButton.style.margin = '10px';
    
    // create tablebody
    var tblBody = document.createElement('tbody');
    
    // tr element
    var trButton = document.createElement('tr');
    
    // td element
    var tdButton = document.createElement('td');
    tdButton.align = 'center';
    tdButton.valign = 'middle';
    tdButton.innerHTML = btnText;

    //set the background/cursorstyle
    tdButton.setAttribute('class', 'out');

    tdButton.setAttribute('onMouseOver', 'switchButtonImage(this, true);');
    tdButton.setAttribute('onMouseOut', 'switchButtonImage(this, false);');
    
    trButton.appendChild(tdButton);
    tblBody.appendChild(trButton);
    tblButton.appendChild(tblBody);
    cellButton.appendChild(tblButton);

    //get the tablerow
    var tableRow = document.getElementById(tableRowID);
    tableRow.appendChild(cellButton); // add cell to tr

}
</script>

<style type="text/css">
.over {
	background-image: url(groen.gif);
	cursor: pointer;
}
.out {
	background-image: url(rood.gif);
	cursor: default;
}
</style>

</head>

<body onLoad="addButton('test', 'buttonRow');">

<table width="400" height="200" border="5">
<tr id="buttonRow">
</tr>
</table>

</body>
</html>