function doPic()

[Don P]

Hallo,

Mich interessiert, wie man das sonst noch machen könnte und wahrscheinlihc auch sollte.

Naja, in deinem Code ist so ziemlich jede Zeile verbesserungsbedürftig. Fertige Lösungen werden in diesem Forum selten geboten, aber du kannst auch selber draufkommen. Ich rate dir, wie folgt vorzugehen:

1. Solltest du den Code übersichtich gestalten, d.h. nicht sowas betrachten:

<table border="0" cellpadding="0" cellspacing="2" align="center">
<tr>
<td height="80" colspan="10" align="center">
<div align="center" id="changethis">
<script type="text/javascript">
function changeText(){
var oldHTML = document.getElementById('changethis').innerHTML;
var newHTML = "<img src='bild01.jpg' name='mainpic' id='mainpic' />";
document.getElementById('changethis').innerHTML = newHTML;
}
</script>

Sondern sowas:

<table border="0" cellpadding="0" cellspacing="2" align="center">  
  <tr>  
    <td height="80" colspan="10" align="center">  
  
      <div align="center" id="changethis">  
  
        <script type="text/javascript">  
  
          [code lang=javascript]function changeText(){  
  
            var oldHTML = document.getElementById('changethis').innerHTML;  
            var newHTML = "<img src='bild01.jpg' name='mainpic' id='mainpic' />";  
  
            document.getElementById('changethis').innerHTML = newHTML;  
          }

</script>

<script type="text/javascript">

// Code...

</script>

</div>

</td>
  </tr>
</table>[/code]

Dazu brauchst du einen Editor, der Sytax-Highlighting kann, z.B. TextPad, Notepad++ oder was immer, denn damit wird es bunter: Variablennamen, Schlüssselwörter usw. sind automatisch an der Farbe zu unterscheiden. Im Editor dann alle Tags und Script-Blöcke schön einrücken und nicht mit Leerzeilen sparen, wenn's der Übersichtlichkeit dienlich ist.

2. Fang' ganz oben an und versuche zu verstehen:

• was da steht
• warum es da steht
• ob es überhaupt notwendig ist

Du erkennst z.B. ein <table>-Tag am Anfang, d.h. eine Tabelle. Deine nächste Frage (die dir hier auch schon gestellt wurde) muss lauten: Warum steht hier alles in einer Tabelle?
Weil darin alles schön nebeneinander zu liegen kommt, denkst du wahrscheinlich, ok.
Nun die dritte Frage: Ist es nötig? Für die Antwort musst du vielleicht ein bisschen recherchieren, aber ich kann dir verraten: Es ist nicht nötig.

Denn alles, was das Layout, d.h. das Aussehen am Bildschirm betrifft, wie z.B. ob Bilder nebeneinander oder übereinander stehen, muss nicht und sollte auch nicht mit HTML-tags wie <table> und auch nicht mit HTML-Attributen wie align oder width bestimmt werden, sondern mit style-Angaben in einem sog. stylesheet. CSS ist das Stichwort.

Ein Code ist dann gut, wenn nur das nötigste, was man für die Funktionalität braucht, übersichtlich drinsteht, und unterschiedliche Funktionen wie HTML-Auszeichnung, Stilangaben und evtl. JavaScript-Code fein säuberlich getrennt sind, am besten sogar in verschiedenen Dateien: eine für HTML, eine für CSS und eine für JavaScript.

3. Was den JavaScript-Code betrifft, geht man genauso vor:

• was steht da?
• warum steht es da?
• ist es notwendig?

Z.B. steht am Anfang die Zeile:
var oldHTML = document.getElementById('changethis').innerHTML;

Offenbar wird der momentane Inhalt eines 'changethis'-Elements in der Variablen oldHTML gespeichert.
Aber warum? oldHTML wird anschließend nie mehr angesprochen, also ist es völlig unnötig, die Variable anzulegen und zu befüllen - weg damit.

usw. usf.  Wenn du die drei Fragen auf auf jedes Detail anwendest, musst du zwangläufig, um die Antworten zu finden, das eine oder andere JS-Konstrukt nachschlagen und wirst dabei leicht lernen, wie man es richtig macht. Das steht nämlich an vielen Stellen im Web beschrieben, z.B. in SELFHTML.

Für konkrete Fragen gibt es dieses Forum.

Viel Spass,
Don P