dynamic stukje in pagina wert niet met HTML?

Status
Niet open voor verdere reacties.
Ikoster

Ikoster

Gebruiker
Lid geworden
19 okt 2009
Berichten
144
hoi,
ik probeer al een tijdje iets gedaan te krijgen met javascript.
ik heb een stukje pagina wat een variabele HTML indeling nodig heeft.
ik heb een start zo gemaakt maar het werkt niet goed heeft er imand tips?

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="Javascript">
function ChangeTitle(film){
if(film == 'a'){
var newtitle = 'hallo jij hebt op a geklikt <br /> blablabla';
}
if(film == 's'){
var newtitle = 'hallo jij hebt op s geklikt </br> blablabla';
}
if(film == 'd'){
var newtitle = 'hallo jij hebt op d geklikt </br> blablabla';
}
if(film == 'f'){
var newtitle = 'hallo jij hebt op f geklikt </br> blablabla';
}
var frame = document.getElementById("frame");
frame.firstChild.nodeValue=newtitle;
}
</script>
</head>
<body>
<DIV ID="frame" align="center">Een dynamische tekst gemaakt met javascript !!</DIV>
<button onclick="ChangeTitle('a')" >a</button>
<button onclick="ChangeTitle('s')" >s</button>
<button onclick="ChangeTitle('d')" >d</button>
<button onclick="ChangeTitle('f')" >f</button>
</body>
</html>
 
Dat komt omdat je de 'nette' manier precies nou net iets te ver neemt. Je gebruikt firstChild.nodeValue - dit is een text element. En je wilt er een <br /> in zetten, wat GEEN text is. Dus dan werkt ie niet.

Als je gewoon innerHTML gebruikt gaat het veel beter. Hier is mijn 'verbeterde' versie (noot de quotes):
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
 
<html>

   <head>

      <title>Untitled</title>

   </head>


   <body>

      <div id="frame" style='text-align: center'>
         Een dynamische tekst gemaakt met javascript !!
      </div>


      <button onclick="changeTitle('a')" >a</button>
      <button onclick="changeTitle('s')" >s</button>
      <button onclick="changeTitle('d')" >d</button>
      <button onclick="changeTitle('f')" >f</button>



      <script type='text/javascript'>

         function changeTitle(film)
         {
            var text = '';

            switch(film)
            {
               case 'a': text = 'hallo je hebt op a geklikt<br />nieuwe regel'; break;
               case 's': text = 'hallo je hebt op s geklikt<br />nieuwe regel'; break;
               case 'd': text = 'hallo je hebt op d geklikt<br />nieuwe regel'; break;
               case 'f': text = 'hallo je hebt op f geklikt<br />nieuwe regel'; break;
            }

            var frame = document.getElementById('frame');

            frame.innerHTML = text;
         }

      </script>


   </body>



</html>
die wel werkt zoals je het wilt.



:thumb:
 
<br /> is hier niet nodig!
Je gebruikt HTML en geen XHTML, dus kan je gewoon <br> doen.
Dat scheelt dus weer meer dan 10 bytes :-)
 
<br /> is hier niet nodig!
Klik om te vergroten...
Dat is theoretisch waar, maar voor het zelfde geld wil deze mijneer later zn site xhtml valide maken. En dan moet je overal een backslash voor zetten.

Dat scheelt dus weer meer dan 10 bytes :-)
Klik om te vergroten...
hehe, maar als je het compressed met gzip oid (wat alle webservers eens zouden moeten doen) maakt het niet echt uit.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan