Elemente dynamisch nach änderung ausgeben.

[Herr JavaScript]

Hi. Ich habe folgendes:

<script language="JavaScript">

  
var messages = new Array();  
messages["geheilt"] = "Der Charakter wurde voll geheilt!"  
messages["geheilt2"] = "Der Charakter wurde geheilt!"  
function Character (hp_aktuell, hp_max, exp_aktuell, exp_max, angriffskraft, verteidigungskraft, avatar) {  
   this.kampffaehig = true;  
   this.level = 1;  
   this.hp_aktuell = hp_aktuell;  
   this.hp_max = hp_max;  
   this.ep_aktuell = exp_aktuell;  
   this.ep_max = (25.1562/0.6234)*this.level;  
   this.atk = angriffskraft;  
   this.def = verteidigungskraft;  
   this.avatar = avatar;  
   this.heal = function (wert) {if (wert != "full") {this.hp_aktuell += (this.hp_max - this.hp_aktuell < wert) ? hp_max - hp_aktuell : wert;} else {hp_aktuell = hp_max;}};  
   this.treffer = function (wert) {if(this.hp_aktuell-wert <= 0) {this.kampffaehig=false;} else {if(Math.round(Math.random()*100)>25) {this.hp_aktuell-=wert;}this.kampffaehig=true;}}  
   this.lvup = function () {if(this.ep_aktuell >= this.ep_max){this.atk = (this.atk/100)*108;this.def = (this.def/100)*108;this.hp_max = (this.hp_max/100)*170;this.hp_aktuell = this.hp_max;this.level++;this.ep_aktuell -= this.ep_max;this.ep_max = (25.1562/0.6234)*this.level;}}  
   this.specup = function (wert,ziel) {switch (ziel) {case "1":this.atk+=wert;break;case "2":this.def+=wert;break;case "3":this.hp_max+=wert;this.hp_aktuell=this.hp_max;break;default:this.atk = this.atk;break;}  
  
}  
   }  
}  
  
var chars = new Array();  
chars[0] = new Character(10,100,0,100,6,6,"IMGS/gesichter_5_012.gif");  
chars[1] = new Character(60,100,0,100,5,6,"IMGS/gesichter_5_009.gif");  
chars[2] = new Character(30,100,0,100,3,7,"IMGS/gesichter_5_008.gif");  
document.write("<table style='table-layout:fixed;' width=300px border=0 cellspacing=0 cellpadding=0>")  
for(var i=0;i<chars.length;i++)  
{  
 document.write("<tr>")  
 document.write("<td rowspan=3 width=48><img src=\""+chars[i].avatar + "\"></td>")  
 var x = (chars[i].hp_aktuell/chars[i].hp_max)*100  
 var col = "#4AC820";  
 if(x < 30)  
 col = "#E80000";  
 else if(x >= 30 && x < 70)  
 col = "#DAB10E";  
 document.write('<td colspan=2 height=1 style="overflow:hidden;height:5px;"><div style="display:block;border:1px outset;background:#c0c0c0;width:100%;overflow:hidden;height:7px;"> <div style="border:1px inset;background:'+col+';width:'+x+'%;overflow:hidden;height:100%;"></div></div></td></tr><tr>')  
 x = (chars[i].ep_aktuell/chars[i].ep_max)*100  
 document.write('<td colspan=2 height=1 style="overflow:hidden;height:5px;"><div style="display:block;border:1px outset;background:#c0c0c0;width:100%;overflow:hidden;height:7px;"> <div style="border:1px inset;background:#7CC6FC;width:'+x+'%;overflow:hidden;height:100%;"></div></div></td></tr><tr>')  
 document.write("<td>"+chars[i].hp_aktuell + "/" + chars[i].hp_max+"</td>")  
 document.write("<td>"+chars[i].ep_aktuell + "/" + chars[i].ep_max+"</td>")  
 document.write("</tr>")  
}  
document.write("</table>")  

</script>

(Bitte nichts sagen wegen der Unvollständigkeit der Werte in Elementen wie border=0 anstatt border="0". Danke.)

Nun möchte ich fragen, ob es möglich ist, diese Tabelle, die das Script erstellt, dynamisch immer wieder schreiben zu lassen, wenn eine Funktion aufgerufen wird?

Ich habe schon an ein leeres Element (Span z. B.) gedacht, wo ich dann alles hineinschreibe. Doch ich wollte mir noch überlegen, ob es nicht doch noch anders geht.

ps: Das Script ist voll funktionsfähig (bis auf die Bilder), so wie es hier steht.

Mfg
Herr JavaScript

[Herr JavaScript]

Hab doch noch was falsch gemacht gehabt.

<script language="JavaScript">

  
var messages = new Array();  
messages["geheilt"] = "Der Charakter wurde voll geheilt!"  
messages["geheilt2"] = "Der Charakter wurde geheilt!"  
function Character (hp_aktuell, hp_max, exp_aktuell, exp_max, angriffskraft, verteidigungskraft, avatar) {  
   this.kampffaehig = true;  
   this.level = 1;  
   this.hp_aktuell = hp_aktuell;  
   this.hp_max = hp_max;  
   this.ep_aktuell = exp_aktuell;  
   this.ep_max = (25.1562/0.6234)*this.level;  
   this.atk = angriffskraft;  
   this.def = verteidigungskraft;  
   this.avatar = avatar;  
   this.heal = function (wert) {if (wert != "full") {this.hp_aktuell += (this.hp_max - this.hp_aktuell < wert) ? hp_max - hp_aktuell : wert;} else {hp_aktuell = hp_max;}};  
   this.treffer = function (wert) {if(this.hp_aktuell-wert <= 0) {this.kampffaehig=false;} else {if(Math.round(Math.random()*100)>25) {this.hp_aktuell-=wert;}this.kampffaehig=true;}}  
   this.lvup = function () {if(this.ep_aktuell >= this.ep_max){this.atk = (this.atk/100)*108;this.def = (this.def/100)*108;this.hp_max = (this.hp_max/100)*170;this.hp_aktuell = this.hp_max;this.level++;this.ep_aktuell -= this.ep_max;this.ep_max = (25.1562/0.6234)*this.level;}}  
   this.specup = function (wert,ziel) {switch (ziel) {case "1":this.atk+=wert;break;case "2":this.def+=wert;break;case "3":this.hp_max+=wert;this.hp_aktuell=this.hp_max;break;default:this.atk = this.atk;break;}}  
 // Hier stand ein } zu viel ...  
}  
  
var chars = new Array();  
chars[0] = new Character(10,100,0,100,6,6,"IMGS/gesichter_5_012.gif");  
chars[1] = new Character(60,100,0,100,5,6,"IMGS/gesichter_5_009.gif");  
chars[2] = new Character(30,100,0,100,3,7,"IMGS/gesichter_5_008.gif");  
document.write("<table style='table-layout:fixed;' width=300px border=0 cellspacing=0 cellpadding=0>")  
for(var i=0;i<chars.length;i++)  
{  
 document.write("<tr>")  
 document.write("<td rowspan=3 width=48><img src=\""+chars[i].avatar + "\"></td>")  
 var x = (chars[i].hp_aktuell/chars[i].hp_max)*100  
 var col = (x < 30)?"#E80000":(x >= 30 && x < 70)?"#DAB10E":"#4AC820";  
 document.write('<td colspan=2 height=1 style="overflow:hidden;height:5px;"><div style="display:block;border:1px outset;background:#c0c0c0;width:100%;overflow:hidden;height:7px;"> <div style="border:1px inset;background:'+col+';width:'+x+'%;overflow:hidden;height:100%;"></div></div></td></tr><tr>')  
 x = (chars[i].ep_aktuell/chars[i].ep_max)*100  
 document.write('<td colspan=2 height=1 style="overflow:hidden;height:5px;"><div style="display:block;border:1px outset;background:#c0c0c0;width:100%;overflow:hidden;height:7px;"> <div style="border:1px inset;background:#7CC6FC;width:'+x+'%;overflow:hidden;height:100%;"></div></div></td></tr><tr>')  
 document.write("<td>"+Math.floor(chars[i].hp_aktuell) + "/" + Math.floor(chars[i].hp_max)+"</td>")  
 document.write("<td>"+Math.floor(chars[i].ep_aktuell) + "/" + Math.ceil(chars[i].ep_max)+"</td>")  
 document.write("</tr>")  
}  
document.write("</table>")  

</script>

[JürgenB]

Hallo Herr JavaScript,

Nun möchte ich fragen, ob es möglich ist, diese Tabelle, die das Script erstellt, dynamisch immer wieder schreiben zu lassen, wenn eine Funktion aufgerufen wird?

so richtig verstehe ich nicht, was dieses riesige Script mit dem Problem zu tun hat, eine Tabelle dynamisch zu erzeugen. Denn darum geht es doch?

Du kannst Elemente natürlich mit document.write erzeugen. Das geht allerdings nur, wenn die Seite neu geladen wird. Für eine nachträgliche Änderung musst du auf Methoden wie document.createElement, document.appendChild, etc. zurückgreifen. Im Javascriptkapitel http://de.selfhtml.org/javascript/objekte/document.htm und http://de.selfhtml.org/javascript/objekte/node.htm werden diese recht gut beschrieben.

Ein Beispiel, wie eine Tabelle dynamisch ertzeugt und befüllt werden kann, findest du z.B. hier: http://www.j-berkemeier.de/Sudoku.html.

Gruß, Jürgen

[Herr JavaScript]

Ja. Danke.

Sowas hab ich gesucht.

MFG
Herr JavaScript

[Siechfred]

Hell-O!

Nun möchte ich fragen, ob es möglich ist, diese Tabelle, die das Script erstellt, dynamisch immer wieder schreiben zu lassen, wenn eine Funktion aufgerufen wird?

Es gäbe ja verschiedene Szenarien:

• es kommt ein Datensatz hinzu: appendChild
• es fällt ein Datensatz weg: removeChild
• es ändert sich ein Datensatz: replaceChild

Ich habe schon an ein leeres Element (Span z. B.) gedacht, wo ich dann alles hineinschreibe.

Also bitte, wir wollen doch mal die HTML-Regeln nicht vergessen. Ein SPAN-Element darf keine Tabelle enthalten, nimm also was anderes, z.B. ein DIV. Dessen Inhalt kannst du dann mit innerHTML manipulieren, sofern der Zielbrowser es unterstützt.

Siechfred

[Struppi]

Hi. Ich habe folgendes:

Ui :-(
Dir ist nicht bekannt, das es Möglichkeiten gibt einen Quelltext so zu formatieren, dass er lesbar ist? - auch für andere

<script language="JavaScript">

Hier fehlt das type Attribut, das language Attribut ist dagegen schon lange überflüssig.

[code lang=javascript]
var messages = new Array();
messages["geheilt"] = "Der Charakter wurde voll geheilt!"

Das ist kein Array, sondern ein Object

...

this.heal = function (wert) {if (wert != "full") {this.hp_aktuell += (this.hp_max - this.hp_aktuell < wert) ? hp_max - hp_aktuell : wert;} else {hp_aktuell = hp_max;}};

Ab hier wird der Quelltext undurchschaubar, wie gesagt beschäftige dich mal damit, wie das besser aussehen könnte.

Nun möchte ich fragen, ob es möglich ist, diese Tabelle, die das Script erstellt, dynamisch immer wieder schreiben zu lassen, wenn eine Funktion aufgerufen wird?

Entweder mit createElement() oder mit innerHTML, je nach vorlieben und der weiteren Verwendung.

Ich habe schon an ein leeres Element (Span z. B.) gedacht, wo ich dann alles hineinschreibe. Doch ich wollte mir noch überlegen, ob es nicht doch noch anders geht.

Im Prinzip ist das überflüssig, aber warum du ausgerechnet ein inline Element benutzen willst ist mir ein Rätsel.

Struppi.