Marcel Rath: Dynamisches Auswechseln von Textinhalten

Hallo,

wir befinden und in der Uni gerade bei der Einführung in DHTML. Jetzt müssen wir für eine html-Datei, deren Inhalt wir nicht ändern dürfen die js-Datei schreiben. Mit Hilfe der JS-datei sollen Inhalte dynamisch (durch window.promt) ausgetauscht werden.

Hier der body der html:
------------------------------------------
<body>
<h2>Personal information</h2>
   <div id="name">
      <p><span id="nameheading">name:&nbsp;</span>Jan Jansen</p>
   </div>
   <div id="address">
      <p><span id="addressheading">address:&nbsp;</span>Straat</p>
   </div>
   <div id="city">
      <p><span id="cityheading">city:&nbsp;</span>Emmen</p>
   </div>
   <a href="javascript:askInfo();" id="question">Enter info</a>
</body>
------------------------------------------

Jetzt sollen wir die askInfo()-Funktion in der js-datei schreiben, mittels derer man die Inhalte "Jan Jansen", "Straat", "Emmen" über window.promt() ändern kann.

Hier meine js:
------------------------------------------

function askInfo(){
var getName = getObj("nameheading");
var getAdress = getObj("adressheading");
var getCity = getObj("cityheading");

var newName = window.prompt('Type a new name:', 'name: ');
var newAdress = window.prompt('Type a new adres:', 'adres: ');
var newCity = window.prompt('Type a new city:', 'city: ');

getName.firstChild.nodeValue = newName;
getAdress.firstChild.nodeValue = newArdress;
getCity.firstChild.nodeValue = newCity;
}

//"short-cut"
function getObj(elementID){
 return document.getElementById(elementID);
}
------------------------------------------

Mein Problem ist, dass mit der js-datei nur die Texte "name:", "adress:", "city" geändert werden und nicht die Inhalte "Jan Jansen", "Straat", "Emmen". Ich denke es liegt daran, das die Inhalt nicht in den <span>-tags stehen, aber leider dürfen wir den html-body nicht verändern.

Hat jemand eine Idee??? Danke im Voraus...

  1. Hallo Marcel.

    Mein Problem ist, dass mit der js-datei nur die Texte "name:", "adress:", "city" geändert werden und nicht die Inhalte "Jan Jansen", "Straat", "Emmen".

    Dann solltest du dir einmal näher anschauen, worauf du zugreifst:

    <!-- … -->
       ~~~html

    <div id="name">

    <p><span id="nameheading">name:&nbsp;</span>Jan Jansen</p>
       </div>

    
    > <!-- … -->  
    >   
    > ~~~javascript
    
    function askInfo(){  
    
    > var getName = getObj("nameheading");  
    > // …  
    >   
    > var newName = window.prompt('Type a new name:', 'name: ');  
    > // …  
    >   
    > getName.firstChild.nodeValue = newName;  
    > // …  
    > }
    
    

    Hierbei ist „getName“ also eine Referenz auf das span-Element mit der ID „nameheading“. Nun änderst du dessen textuellen Inhalt, wobei dies doch eigentlich „http://de.selfhtml.org/javascript/objekte/node.htm#next_sibling@title=nebenan“ passieren soll.

    Einen schönen Donnerstag noch.

    Gruß, Mathias

    --
    ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
    debian/rules
    1. Vielen Dank, es funktioniert!!!

  2. Moin

    vorweg: überprüfe mal die Schreibweisen der IDs in HTML und JavaScript und gleich die einander an.

    Zur Frage:
    da du ja wie du schreibst an dem (für den Zweck unsinnigen) HTML nix ändern kannst, ein Tipp. Was du zu ändern suchst ist nicht der Inhalt des ersten Kindes des spans sondern der Inhalt des letzten Kindes des Elternelements des spans, also ungefähr
    getName.parentNode.lastChild.data = newName;
    (wobei du noch testen musst ob das überhaupt existiert und wirklich ein Textknoten ist)

    Gruß
    rfb