Visa och dölja ledtrådar - fungerar inte riktigt

6 svar · 368 visningar · startad av aasah 13 jan. 2007

aasahMedlem sedan mars 20034 471 inlägg

Frågan13 jan. 2007 10:02#1

Jag har en sida med korsordsledtrådar (keys). Om man tycker dessa är orimligt svåra kan man skaffa sig lättare (hints) genom att kryssa i checkboxar, välja visa alla, eller inga. Nu får jag lite lustiga resultat...

I FF laddar sidan snällt med "hintsen" dolda.
I IE laddas sidan. Visserligen visas inga hints men checkboxarna ligger inte rakt under varandra?! Dessutom får jag följande JS-fel direkt:
Rad 61 Tecken 3 har inte implementerats Kod 0

<script type="text/javascript">
  window.onload = hideAllHints(1,5);  //Rad 61 Tecken 3 är första w:et
</script>

Några idéer om vad detta beror på?

<html><head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <link rel="stylesheet" type="text/css" href="intCWnew.css">
   <script type="text/javascript">
//JS functions go here.

function toggleCheck(idnr) {
   var check = document.getElementById("getClue" + idnr);
   var hBox = document.getElementById("hintBox" + idnr);
   if (check.checked)
      hBox.innerHTML = 'Hint ' + idnr;
   else hBox.innerHTML = '';
   alert('toggleCheck '+idnr);
}

function showAllHints(minID, maxID) {
   for (var i = minID; i <= maxID; i++) {
      var check = document.getElementById("getClue" + i);
      var hBox = document.getElementById("hintBox" + i);
      check.checked = 'checked';
      hBox.innerHTML = 'Hint ' + i;
   }
   alert('showAll');
}

function hideAllHints(minID, maxID) {
   for (var i = minID; i <= maxID; i++) {
      var check = document.getElementById("getClue" + i);
      var hBox = document.getElementById("hintBox" + i);
      check.checked = '';
      hBox.innerHTML = '';
   }
   alert('hideAll');
}

   </script>
 </head>
 <body><div id="cwClues">

<p><span id="currentClue"></span> </p>

<form><h2>ACROSS</h2>
<p><input type="checkbox" id="getClue1" onClick="toggleCheck(1)"> B 3-8: Key 1<br>
<span class="hint" id="hintBox1">Hint 1</span></p>
<p><input type="checkbox" id="getClue2" onClick="toggleCheck(2)"> B 4-8: Key 2<br>
<span class="hint" id="hintBox2">Hint 2</span></p>
<p><input type="checkbox" id="getClue3" onClick="toggleCheck(4)"> D 1-5: Key 3<br>
<span class="hint" id="hintBox3">Hint 3</span></p>

<h2>DOWN</h2>
<p><input type="checkbox" id="getClue4" onClick="toggleCheck(3)"> 4A-D5 (Turns): Key 4<br>
<span class="hint" id="hintBox4">Hint 4</span></p>
<p><input type="checkbox" id="getClue5" onClick="toggleCheck(5)"> 6 B-F: Key 5<br>
<span class="hint" id="hintBox5">Hint 5</span></p>
<input type="button" class="buttonColorG" id="getAll"
                  onclick="showAllHints(1, 5)" value="Show all hints">&nbsp;&nbsp;&nbsp;
<input type="button" class="buttonColorG" id="hideAll"
                  onclick="hideAllHints(1, 5)" value="Hide all hints"></form>

<script type="text/javascript">
  window.onload = hideAllHints(1,5);
</script>
</div></body></html>

Peter SMedlem sedan dec. 20025 483 inlägg

13 jan. 2007 12:19#2

Inlägget sammanfogat med det nedanför.

aasahMedlem sedan mars 20034 471 inlägg

13 jan. 2007 13:40#3

Tjusigt! Tackar! Då försvann laddningsproblemet! Och tack för förklaringen, nu förstår jag varför. :birp

Återstår skumheten med att checkboxarna inte ligger rakt under varann när sidan laddas... Hur går det till? (Det har på något sätt med döljandet av hintarna att göra.) Det uppstår så fort man använder hideAllHints.

Peter SMedlem sedan dec. 20025 483 inlägg

13 jan. 2007 13:56#4

aasah skrev:

Rad 61 Tecken 3 har inte implementerats Kod 0

window.onload-raden tilldelas ett returvärde i stället för en funktionsreferens. Resultatet är att funktionen körs, men inte vid onload utan direkt (därför fallerar document.getElementById). Testa

window.onload = function(){
  hideAllHints(1,5);  //Rad 61 Tecken 3 är första w:et
}

aasah skrev:

Återstår skumheten med att checkboxarna inte ligger rakt under varann när sidan laddas... Hur går det till? (Det har på något sätt med döljandet av hintarna att göra.) Det uppstår så fort man använder hideAllHints.

Det verkar bero på att du sätter innerHTML till den tomma strängen (varför det blir som det blir kan jag inte svara på). Du kan lösa det med

function toggleCheck(idnr) {
   var check = document.getElementById("getClue" + idnr);
   var hBox = document.getElementById("hintBox" + idnr);
   if (check.checked)
      hBox.style.display = "inline";
   else  hBox.style.display = "none";
   alert('toggleCheck '+idnr);
}

function showAllHints(minID, maxID) {
   for (var i = minID; i <= maxID; i++) {
      var check = document.getElementById("getClue" + i);
      var hBox = document.getElementById("hintBox" + i);
      check.checked = 'checked';
      hBox.style.display = "inline";
   }
   alert('showAll');
}

function hideAllHints(minID, maxID) {
   for (var i = minID; i <= maxID; i++) {
      var check = document.getElementById("getClue" + i);
      var hBox = document.getElementById("hintBox" + i);
      check.checked = '';
      hBox.style.display = "none";
   }
}

aasahMedlem sedan mars 20034 471 inlägg

13 jan. 2007 14:10#5

Perfekt! Tusen tack! :birp

Nu hade jag gärna markerat båda dina svar som en del av lösningen! :D

Peter SMedlem sedan dec. 20025 483 inlägg

13 jan. 2007 14:15#6

Done! ;)

aasahMedlem sedan mars 20034 471 inlägg

13 jan. 2007 14:17#7

Tjusigt! Tackar! :birp