More-Button - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > More-Button

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > More-Button

Pages: [1]

geschrieben von JDEmp am 23.05.2006 - 02:19

Hallo alle zusammen,
Ich habe derzeit ein Problem und zwar schreibe ich ein kleines Script womit ich Quell-Links schreiben kann. Und wie jeder weiß, hat man manchmal mehr als eine Quelle wodurch man mehrere Datenfelder brauch. Da ich diese aber nicht alle von anfang an sehen will, hab ich mir überlegt die nicht gebrauchten, erstmal unsichtbar zu machen und mit hilfe eines More-Buttons wieder sichtbar zu machen.

Hier ist mein Code. Nicht wundern, da ist auch ein wenig PHP mit drin aber das Problem liegt am Javascript.

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21:

echo "   <script language=\"javascript\">\n";
echo "   <!--\n";
echo "	function more(a)\n";
echo "	{\n";
echo "		for(var i=\"1\";i<=\"10\";i++)\n";
echo "		{\n";
echo "			var b = a-1;\n";
echo "			document.getElementById(\"more_\"+i).style.display = \"block\";\n";
echo "			document.getElementById(b+\"a\").style.display = \"block:none\";\n";
echo "		}\n";
echo "	}\n";
echo "   -->\n";
echo "   </script>\n";
echo "<table>";
echo "<tr><td>Quell-Link:<input type=\"text\" name=\"link_0\" id=\"more_0\" style=\"display: block\"> <a href=\"#\" onclick=more(1) id=\"0a\" style=\"display: block\">mehr</a></td></tr>\n";
for ($a="1"; $a < "10"; $a++)
{
$b = $a + 1;
echo "<tr id=\"more_".$a."\" style=\"display: none\"><td>Quell-Link:<input type=\"text\" name=\"link_".$a."\"> <a href=\"#\" onclick=more(".$b.") id=\"".$a."a\" style=\"display: block\">mehr</a></td></tr>\n";
}
echo "</table>";

Ich danke schonmal im vorraus für jede Hilfe.

geschrieben von Micha am 23.05.2006 - 07:19

Hallo,

ich mag es nicht, wenn Leute serverseitigen Code posten, wenn sie ein _clientseitiges_ Problem diskutieren wollen. Korrigiere das bitte und nenn gleich dazu, was Du probiert hast und woran Du scheiterst.

Micha

geschrieben von JDEmp am 23.05.2006 - 08:06

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25:

<script language="javascript">
 <!--
  function more(a)
 {
  for(var i="1";i<="10";i++)
   {
    var b = a-1;
    document.getElementById("more_"+i).style.display = "block";
    document.getElementById(b+"a").style.display = "block:none";
   }
  }
 -->
</script>
<table>
<tr><td>Quell-Link:<input type="text" name="link_0" id="more_0" style="display: block"> <a href="#" onclick=more(1) id="0a" style="display: block">mehr</a></td></tr>
<tr><td>Quell-Link:<input type="text" name="link_1" id="more_1" style="display: block"> <a href="#" onclick=more(2) id="1a" style="display: block">mehr</a></td></tr>
<tr><td>Quell-Link:<input type="text" name="link_2" id="more_2" style="display: block"> <a href="#" onclick=more(3) id="2a" style="display: block">mehr</a></td></tr>
<tr><td>Quell-Link:<input type="text" name="link_3" id="more_3" style="display: block"> <a href="#" onclick=more(4) id="3a" style="display: block">mehr</a></td></tr>
<tr><td>Quell-Link:<input type="text" name="link_3" id="more_4" style="display: block"> <a href="#" onclick=more(5) id="4a" style="display: block">mehr</a></td></tr>
<tr><td>Quell-Link:<input type="text" name="link_5" id="more_5" style="display: block"> <a href="#" onclick=more(6) id="5a" style="display: block">mehr</a></td></tr>
<tr><td>Quell-Link:<input type="text" name="link_6" id="more_6" style="display: block"> <a href="#" onclick=more(7) id="6a" style="display: block">mehr</a></td></tr>
<tr><td>Quell-Link:<input type="text" name="link_7" id="more_7" style="display: block"> <a href="#" onclick=more(8) id="7a" style="display: block">mehr</a></td></tr>
<tr><td>Quell-Link:<input type="text" name="link_8" id="more_8" style="display: block"> <a href="#" onclick=more(9) id="8a" style="display: block">mehr</a></td></tr>
<tr><td>Quell-Link:<input type="text" name="link_9" id="more_9" style="display: block"> <a href="#" onclick=more(10) id="9a" style="display: block">mehr</a></td></tr>
</table>

Also, ich würde gerne einen More-Button einbauen. Damit meine ich, dass neben dem ersten Eingabefeld "mehr" steht. Wenn ich nun darauf klicke, soll das nächste Eingabefeld auftauchen mit einem neuem "mehr" wobei das alte dann natürlich verschwinden sollte. Ist an sich nur ein Schönheits-Script..

Hmm was ich schon alles ausprobiert hab?! Ne menge.. aber mehr oder weniger sensless da ich das eigendliche Problem nicht verstehe. Entweder es geht garnicht, nur der erste "mehr" Button funktioniert oder der button bewirkt, dass alle Eingabefelder auftauchen. Beim vorletzten erwähnten meint er, dass er kein Objekt gefunden hätte, was ja schonmal nicht sein kann, da die klar definiert sind. Es ist vorhanden. Beim letzteren verstehe ich nicht warum er das dann auf alle andere <tr> bezieht. hab es da auch schonmal so versucht, dass ich alles in einen eigenen <table> geschrieben hab allerdings ohne erfolg.

geschrieben von Micha am 23.05.2006 - 09:00

Hallo,

Quick & Dirty auf die Schnelle:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14:

<script type="text/javascript">
var inp = null;
 function closeAll(){
	inp = document.getElementsByTagName("td");
	for(var i=1; i<inp.length; i++){
		inp[i].style.display = "none";
	}
 }
window.onload = closeAll;
  function more(a){
inp[a].style.display = "inline";
  }

</script>

Micha

geschrieben von René am 23.05.2006 - 10:17

PHP-Quelltext

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: <?php echo <<<EOF <script type="text/javascript">  </script> <table> <tr> <td>Quell-Link: <input id="more_0" name="link_0" type="text" value=""> <a id="a0" href="javascript:more(1);" style="display: block;">mehr</a></td> </tr> EOF; $anzahl_input = 9; for ($a = 1; $a <= $anzahl_input; $a++) { echo ' <tr id="more_' . $a . '" style="display: none;">' . "\r\n"; echo ' <td>Quell-Link: <input name="link_' . $a . '" type="text" value="">'; if ($a < $anzahl_input) echo "\r\n" . ' <a id="a' . $a . '" href="javascript:more(' . ($a + 1) . ');" style="display: block;">mehr</a>'; echo '</td>' . "\r\n"; echo ' </tr>' . "\r\n"; } echo '</table>'; ?>

----

@J.D. Emp

eine id="..." beginnt nicht mit einer Zahl. In deinen for - Schleifen verwendest du i = "10" das ist dann keine Zahl mehr sondern ein Sting. Du kannst froh sein das JavaScript und PHP wegen dem i++ daraus automatisch eine Zahl macht.

geschrieben von JDEmp am 24.05.2006 - 11:08

Hey, danke ihr zwei für die schnelle Hilfe!
Funktioniert beides gut wobei ich nach der letzten Lösung gesucht hab.
@René Danke, deswegen war ich mir so nochnicht bewust. Dann war das
wohl auch der Hauptgrund warum das ganze nicht Funktioniert hat.

Dank euch beiden nochmal!