Nytt värde på variabel/anrop

Min funktion funkar inte riktigt som jag vill... :( Det verkar som om värdet från det föregående anropet på något sätt "ligger kvar" till nästa anrop? :q

Problembeskrivning:
För att exemplena ska förstås, titta på sidan.
Exempel:
1)
Jag trycker på A3 och väljer att fylla i tre bokstäver för ordet som går neråt, skickar iväg det. Allt går fint! :D
Sedan fyller jag i fyra bokstäver för ordet across, skickar. Då fylls bara de första tre i!!? :o :q Fjärde rutan lämnas tom. Vad i?!?

2. Omstart med reload. Jag trycker på A3 och väljer i stället att fylla i fyra bokstäver för ordet som går across, skickar iväg det. Allt går fint! :D
   Sedan fyller jag i tre bokstäver för ordet neråt, skickar. Nu får jag en pop-up-ruta som påstår att ordet är 4 långt!!!??? Ännu mer vad i?!? (Varför får jag då ingen pop-up-ruta i 1?) Nåja både 1) och 2) var ju tänkt att fungera....

Var är felet? Varför skrivs inte värdena över?

function addWord(jsForm, direction) {
  //Funktionen anropas OK
  //Hiddenvar finns även om de inte syns i källan...

  if (direction == "Across") {
     var start = document.getElementById("wordBoxAcrossStart").value;
     var word = document.getElementById("wordBoxAcrossWord").value;
     var lgth = startPosJSarr[start]["lengthAcross"];
  }
  else {
     var start = document.getElementById("wordBoxDownStart").value;
     var word = document.getElementById("wordBoxDownWord").value;
     var lgth = startPosJSarr[start]["lengthDown"];
  }
  var word = word.toUpperCase();
  if (word.length != lgth)
     alert ("This word is " + lgth + " letters long.");
  else { //Längden stämmer
     //document.write(start + " word: " + word);
     for (var i = 0; i < lgth; i++) {
        var ch = word.charAt(i);
        var td = document.getElementById(start);
        var hide = document.getElementById(start.charAt(0) + " " + start.charAt(1));
        td.innerText = ch;
        hide.value = ch;
        start = letterBoxJSarr[start]["next" + direction];
     }

  }
}

//Anropas från

<form id="jsformen" onsubmit="return addWord(this);">
         <table><tr><td id=\"wordBoxHeader" colspan="3"><center>You clicked on:</center></td></tr>
         <tr><th>Pos</th><th>The Word</th><th>Direction</th></tr>
         <tr><td id="wordBoxAcrossPos">-</td>
             <td><input type="text" id="wordBoxAcrossWord" disabled></td>
             <td><input type="button" id="wordBoxAcrossB" onclick="addWord(this.form, 'Across')" value="Add word across!" disabled>
                 <input type="hidden" id="wordBoxAcrossStart" value=""></td></tr>
         <tr><td id="wordBoxDownPos">-</td>
             <td><input type="text" id="wordBoxDownWord" disabled></td>
             <td><input type="button" id="wordBoxDownB" onclick="addWord(this.form, 'Down')" value="Add word down!" disabled>
                 <input type="hidden" id="wordBoxDownStart" value=""></td></tr>
         </table></form>

Om vi tar en titt på följande kod (speciellt den fetmarkerade):

function addWord(jsForm, direction) {
  //Funktionen anropas OK
  //Hiddenvar finns även om de inte syns i källan...
var start,word,lgth;
  if (direction == "Across") {
     start = document.getElementById("wordBoxAcrossStart").value;
     word = document.getElementById("wordBoxAcrossWord").value;
     lgth = startPosJSarr[start]["lengthAcross"];
  }
  else {
     start = document.getElementById("wordBoxDownStart").value;
     word = document.getElementById("wordBoxDownWord").value;
     lgth = startPosJSarr[start]["lengthDown"];
  }
  var word = word.toUpperCase();
  if (word.length != lgth)
     alert ("This word is " + lgth + " letters long.");
  else { //Längden stämmer
     //document.write(start + " word: " + word);
     for (var i = 0; i < lgth; i++) {
        var ch = word.charAt(i);
        var td = document.getElementById(start);
        var hide = document.getElementById(start.charAt(0) + " " + start.charAt(1));
        [b]td.innerText = ch;[/b]
        alert("id = "+start.charAt(0) + " " + start.charAt(1)+", ger: "+hide);
        hide.value = ch;
        start = letterBoxJSarr[start]["next" + direction];
     }

  }
}

Första gången du anropar addWord(), går allting smidigt. Andra gången, när ordet skall in horisontellt, ser vi att de har rutan "A3" gemensam. Inuti denna <td> ligger ett <input>-fält som, med den fetmarkerade texten ovan, skrivs över. När sedan ordet skall in horisontellt, hittas naturligtvis inte detta <input>-fält, varvid hide sätts till null och du får ett felmeddelande på raden hide.value = ch;.

Lösning? <input type="hidden">-fälten behöver inte ligga i tabellen.

Jag tog mig även friheten att göra dina if-satslokala variabler, funktionslokala (eftersom du accessar dem utanför if-satsen).

:)

Tack för förklaringen! :birp Nu funkar det, Hurra! :D

Och tack för flytt av variabeldefinitionerna. Det verkar mycket vettigare. Jag visste bara inte att man kan skriva så. :D