[JS/ CSS/ DOM] nieuwe nodes krijgen geen styleopmaak - Softwareontwikkeling

donderdag 3 februari 2005 14:48

Acties:

superslim!

Topicstarter

Matched: appendchild, removechild

Hallo,

Ik ben vrij nieuw met het DOM binnen JS en vroeg mij het volgende af.
Het de volgende code geschreven om DOM en JS te testen:

code:

<html>
    <head>
        <title> DOM is cool! </title>

        <style>
            
            div.zorf
            {
                font-weight: bold;
            }

            div.zarf
            {
                color: green;
            }

        </style>

        <script type="text/javascript">
                    
            function insertNewText()
            {
                var para = document.getElementById("hold");
                var newPara = document.createElement("<div>");
                
                para.appendChild(newPara);
                newPara.setAttribute('class','zorf');
                
                var newText = document.createTextNode("DOM methods are cool, are they not?");
                
                newPara.appendChild(newText);
            
            }

            function removeCrap()
            {
                
                var para = document.getElementById("hold");
                var child = para.lastChild;
                
                if(para.lastChild)
                    para.removeChild(child);
                else
                    window.alert("No childs!");
            }



        </script>
    </head>
    
    <body id="body">
    
        <div id="hold"></div>
        
        <a href="Javascript: insertNewText();">create!</a> | 
        <a href="Javascript: removeCrap();">remove!</a>
    </body>
</html

Nu wil ik graag zorgen dat de nieuw gecreerde elementen door JS ook de styleopmaak meekrijgen die ik bovenaan heb gedefinieerd of in later stadium uit mijn .css document.

Is er een manier dat ik kan forcen dat hij de .css opnieuw inleest ofzo?
(zoals je al raad: hij geeft geen styleopmaak mee, gewoon platte tekst...)
de references naar de vele DOM CSS/ JS maken me een beetje duizelig dat ik niet echt de oplossing zie

mijn naam slaat nergens op, althans niet op mij :P

donderdag 3 februari 2005 15:01

Acties:

André

Analytics dude

Geen matches

Vervang:

code:

1	var newPara = document.createElement("<div>");

Door:

code:

1	var newPara = document.createElement("div");

En het werkt. Kijk maar eens in de DOM en dan zie je dan er een <<div>> gecreeerd wordt.

donderdag 3 februari 2005 15:01

Acties:

Verwijderd

Geen matches

hoe doet ie het als je ipc setAttribute obj.className doet?

en andersom: als je in je css div[class=zorf] doet?

donderdag 3 februari 2005 15:17

Acties:

Genoil

Geen matches

Verwijderd schreef op donderdag 03 februari 2005 @ 15:01:
hoe doet ie het als je ipv setAttribute obj.className doet?

Ja dat is het. IE pakt setAttribute("class" ...) niet, FFoverigens wel. Misschien dat obj.class = ook nog wel werkt maar da's niet zo mooi natuurlijk.

donderdag 3 februari 2005 15:36

Acties:

drm

f0pc0dert

Geen matches

Genoil:
Ja dat is het. IE pakt setAttribute("class" ...) niet, FFoverigens wel. Misschien dat obj.class = ook nog wel werkt maar da's niet zo mooi natuurlijk.

Zie ook http://www.w3.org/TR/2003...109/html.html#ID-58190037

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

donderdag 3 februari 2005 15:39

Acties:

André

Analytics dude

Geen matches

Zou dan setAttribute("className" ...) welk werken?

In FF werken allebei de oplossingen, ik had de TS alleen getest in FF en daar bleken de < en > het probleem te zijn.

donderdag 3 februari 2005 16:18

Acties:

Zoolander

superslim!

Topicstarter

Geen matches

Toppie mensen, oplossingen klopte.

de < en > waren inderdaad niet volgens het DOM.
Daarnaast bleek "class" ook conflicterend te zijn met een aantal talen en hebben ze gekozen voor className bij het W3C.

object.classname = "classname";
is de juiste manier voor FF & IE iig om een class toe te wijzen aan een object.

Ohw, ik zie net:

object.setAttribute("className", "classname");
werkt ook goed in FF & IE

[ Voor 31% gewijzigd door Zoolander op 03-02-2005 16:24 ]

mijn naam slaat nergens op, althans niet op mij :P

donderdag 3 februari 2005 16:26

Acties:

Verwijderd

Geen matches

die laatste is idd eigenlijk wat netter

donderdag 3 februari 2005 21:59

Acties:

Zoolander

superslim!

Topicstarter

Geen matches

oke, parrt II

Ik heb nu dit, en in explorer geeft hij een foutmelding.
Ik snap niet wat ik mogelijk fout doe, want dit is toch zoals het HOORT te werken?

code:

<html>
    <head>
        <title> DOM is cool! </title>

        <script type="text/javascript">

            function swapType(value)
            {

                var para = document.getElementById('bla');

                para.setAttribute('type', 'hidden');
                
            }


        </script>
    </head>
    
    <body>
        
        <form action="action.php" id="phoneForm" name="phoneForm" method="POST">
            <select name="sort"  onChange="Javascript: swapType(this.value);">
                <option value="vast">vast</option>
                <option value="mobiel">mobiel</option>
            </select>

            &nbsp;
            <input type="text" id="bla" name="bla" value="sort">
            &nbsp;
            <input type="text" name="number" value="number">
            <br>
            <input type="submit" value="do it!">
        </form>

    </body>
</html>

Is IE gewoon niet klaar voor DOM ofzo? Of doe ik het weer eens krom?

[ Voor 23% gewijzigd door Zoolander op 03-02-2005 22:01 ]

mijn naam slaat nergens op, althans niet op mij :P

donderdag 3 februari 2005 22:03

Acties:

Verwijderd

Geen matches

in een event handler hoort geen "javascript:"

welke foutmelding geeft ie verder? da's nl ook wel handig om te weten

donderdag 3 februari 2005 22:05

Acties:

Zoolander

superslim!

Topicstarter

Matched: appendchild, removechild

Oke, evenhandler aangepast. thanx
" this command is not supported" is de errormsg.

FF vindt het wel goed allemaal, zoals gewoonlijk

wat ik overigens wil is dat als je vast selecteerd dat het een inputveld komt voor je netnummer,
als je mobiel selecteerd komt er gewoon 06 te staan.
Zo kan het ook wat ik wil:

code:

function swapType(value)
            {

                //var para = document.getElementById("wop");

                //para.setAttribute('type', 'hidden');


                var para = document.getElementById("phoneForm");
                var para2 = document.getElementById("number");
                var child = document.getElementById("type");

                para.removeChild(child);

                if(value == "vast")
                {
                    var newChild = document.createElement("input");
                    para.insertBefore(newChild,para2);

                    newChild.setAttribute('type', 'text');
                    newChild.setAttribute('id', 'type');
                }
                
                if(value == "mobiel")
                {
                    var newChild = document.createElement("span");
                    para.insertBefore(newChild,para2);

                    newChild.setAttribute('id', 'type');

                    var newChild2 = document.createTextNode("06");

                    newChild.appendChild(newChild2);
                }
        
            }

maar een form op hidden zetten en en ander op een type="text" leek me minder code

of zijn er nog betere manieren?

[ Voor 84% gewijzigd door Zoolander op 03-02-2005 22:19 ]

mijn naam slaat nergens op, althans niet op mij :P

donderdag 3 februari 2005 22:30

Acties:

Verwijderd

Geen matches

eehm gewoon een veld en dan

dat_ene_veld.value = (value=="vast")? '' : '06';

donderdag 3 februari 2005 23:41

Acties:

Zoolander

superslim!

Topicstarter

Geen matches

daar snap ik niks van...

kan je iets preciezer zijn?

Het idee is namelijk dat er ofwel een <input> komt te staan danwel "06" als platte text

[ Voor 71% gewijzigd door Zoolander op 03-02-2005 23:44 ]

mijn naam slaat nergens op, althans niet op mij :P

vrijdag 4 februari 2005 00:26

Acties:

André

Analytics dude

Geen matches

Is value niet een reserved word? Probeer eens een andere variabele naam.

vrijdag 4 februari 2005 10:05

Acties:

drm

f0pc0dert

Geen matches

Zoolander:
daar snap ik niks van...

kan je iets preciezer zijn?

Wat mophor bedoelt is dat wanneer de value die meegegeven wordt aan de functie gelijk is aan 'vast' de waarde van een ander input-veld 06 moet worden en anders niks. Ik zou het ook zo gedaan hebben, met als toevoeging het setten van readonly en een class readonly voor de stylesheet. 't Voordeel is namelijk dat je dan altijd het netnummer meegestuurd krijgt in 't script dat 't formulier af moet gaan handelen, mobiel of niet. zoiets dus:

code:

<input type="text" name="netnummer" value=""> 
<select name="teltype" onchange="flipz0r(this)">
  <option value="vast">Vast</option>
  <option value="mobiel">Mobiel</option>
</select>

JavaScript:

function flipz0r ( selectElement ) {
   var value = selectElement.options[selectElement.selectedIndex].value;
   var netnummerField = selectElement.form.elements['netnummer'];
   switch ( value ) {
      case 'vast':
         netnummerField.value='';
         netnummerField.readonly=false;
         netnummerField.className='readonly';
      break;
      case 'mobiel':
         // etcetera
      break;
   }
}

[ Voor 11% gewijzigd door drm op 04-02-2005 10:06 ]

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz