• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ids dynamisch mit Schleife aufrufen, Java-Script

silberfuchs

silberfuchs

Neues Mitglied
Hallo miteinander,
ich habe auf einer (lokalen) html-Seite 9 Eingabefelder, denen ich dynamisch mit java-script einen Wert zuweisen will.
Die EF stehen in einem Div und haben die Ids "Z0" bis "Z8".
Ich habe versucht , das mit einer for-Schleife zu realisieren, leider funktioniert das nicht. Hier die von mir getesteten Funktionen:
function anzeigen() {
for(i = 0; i <= 8; i++)
{
var zaehler = "Z" + i ;
document.all.zaehler.value = "i";
}

Auch mit concat () habe ich es versucht
function anzeigen2() {
for(i = 0; i <= 8; i++)
{
var zeichen = "Z"
var zaehler = zeichen.concat(i);
document.all.zaehler.value = "i";
}

MIt alert wird die Variable zaehler ordendlich angezeigt, also Z0, Z1 usw. In der Zeile, mit der dem Eingabefeld der Wert zugewiesen werden soll (wegen der Einfachheit hier "i") wird die Zeichenfolge zaehler offensichtlich nicht als Id erkannt. Was mache ich da falsch?
Silberfuchs
 
Werbung:
Das würde dir so auch nichts bringen. Wenn du den Input-Feldern Werte zuweisen willst, benötigst du eine Funktion zum Zuweisen und natürlich auch die dazugehörigen Werte. Außerdem bietet sich eine foreach-Schleife an, weil der Array-Index zum Hochzählen der IDs verwendet werden kann. Wenn du jetzt noch jQuery verwendest, reichen dafür 3 Zeilen Code.

HTML
HTML: 
<div>
  <input id="z_0"><br>
  <input id="z_1"><br>
  <input id="z_2"><br>
  <input id="z_3"><br>
</div>

jQuery
Code: 
$.each(['eins', 'zwei', 'drei', 'vier'], function(index, wert) {
  $('#z_' + index).prop('value', wert);
});
 
Danke zunächst, ist die foreach-Schleife bei javascript möglich? Habe damit noch nie gearbeitet. CGI/Perl ist für mich Neuland, will auch wegen dieses einen Problems damit nicht anfangen(73):(
 
Werbung:
Mit CGI und Pearl hat das nichts zu tun. jQuery ist ein JS-Framework, das den Umgang mit JavaScript vereinfacht. Wenn du es lieber mit vanilla JS machen willst, dann käme eine forin-Schleife in Betracht.
 
Hallo Tronjer
auch jQuery und vanilla js sind mir im Moment noch "böhmische Dörfer. Aber wenns nicht anders geht, muss ich mich wohl damit beschäftigen. Aber gehts nicht doch einfacher ??
Vielleicht hat jemand noch eine Idee, warum mein Ansatz nicht funktioniert!
Danke trozdem
 
Na, so kompliziert sollte das doch nicht sein. Probiers mal so:
Code: 
function anzeigen() {
for(i = 0; i <= 8; i++)
{
    var id = "Z" + i ;
    document.getElementById(id).value = i;
}
 
Werbung:
Hallo Sempervivum,
habs versucht, klappt leider auch nicht. Habe auch mal die var id durch x ersetzt, um mögliche Namenskonflikte auszuschließen, hat auch nicht geholfen.
Trotzdem Danke, würde mich freuen, wenn Du noch weitere Tipps hättest !;)
Silberfuchs
 
Poste doch mal den Code, den Du jetzt hast, einschl. HTML. Oder besser die URL deiner Seite.
 
Werbung:
Hier ist der Code, ich habe den entscheidenden Teil herauskopiert: Unten steht dann noch die Datei extern.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Claus">
<meta name="editor" content="html-editor phase 5">
<script language="JavaScript" src="extern.js" type="text/javascript"> </script>

<style type="text/css">
input.kfeld1 {position:relative; left:2mm; top:2mm; width:5mm; text-align:center; font-weight:bold;}</style>

</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div name="mv" style="position:absolute; top:15%; left:0px; height:59%; width:30%; border:medium solid #FF7750;">
<p align="center" style="margin-left:5mm; font-weight:bold;">
Hier die Startzahlen eingeben!
</p>
<!-- Bereich 1 -->
<div style="position:absolute; top:10mm; left:7mm; height:24mm; width:27mm; background-color:#FF7750;">
<form>
<input id="Z1" type="text" class="kfeld1">
<input id="Z2" type="text" class="kfeld1">
<input id="Z3" type="text" class="kfeld1"><br>
<input id="Z4" type="text" class="kfeld1">
<input id="Z5" type="text" class="kfeld1">
<input id="Z6" type="text" class="kfeld1"><br>
<input id="Z7" type="text" class="kfeld1">
<input id="Z8" type="text" class="kfeld1">
<input id="Z9" type="text" class="kfeld1">
</form>
</div>
</div>

<div name="B2" align="center" style="position:absolute ; top:100px ; left:350px ;
background-color:#FF7750; height:20%; width:20%;">
<button type="button" name="Bu2" value="Text" style="width:50px ; position:relative; top:40%"
onclick="anzeigen();" >
<p>
Test
</p>
</button>
</div>
</body>
</html>

js-Datei, drei Varianten:
function anzeigen1() {
document.all.Z0.style.backgroundColor ="#E0FF00";
document.all.Z0.value="5";
document.all.Zelle1.style.backgroundColor ="#E0FF00";
document.all.Zelle1.value="8";
}

function anzeigen2() {
for(i = 0; i <= 8; i++)
{
var zeichen = "Z" + i;
var zaehler = String(zeichen);
alert(zaehler);
document.all.zaehler.value = "i";
}
}

function anzeigen() {
for(i = 0; i <= 8; i++)
{
var x ="Z" + i ;
document.getElementById(x).value = i;
}
}
 
Hallo, damit Ihr seht, wie hilfebedürftig ich bin, habe ich ein Avatar eingestellt. Im Übrigen habe ich die html-Datei mit "phase5" erstellt, auf anderen Browsern sieht das vielleicht nicht so übersichtlich aus
 
Werbung:
Da deine IDs bei Z1 anfangen und bis Z9 gehen, muss es heißen:
Code: 
function anzeigen() {
for(i = 1; i <= 9; i++)
{
var x ="Z" + i ;
document.getElementById(x).value = i;
}
}
 
Zuletzt bearbeitet von einem Moderator:
Besten Dank! !!
Ich benutze in diesem Fall die html-Seite nur als Oberfläche, soll niemals hochgeladen werden!
MfG Silberfuchs
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben