• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Javascript mehrfache Ausgabe

B

baacks

New member
Hallo zusammen,
ich hänge bei einer Aufgabe fest.
Vielleicht könnt ihr mir helfen?

Also ich sollte das Bild nach klicken auf den Button 10 mal ausgeben, dies habe ich bereits umgesetzt.
Jetzt sollte ich noch nach klick auf Daten mehrmals Anzeigen, den Name Alter und Geburtsort untereinander 10 mal ausgeben.




Bin um jede Hilfe froh.

Liebe Grüsse,
Hannes
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    110,5 KB · Aufrufe: 3
Warum machst du das nicht wie bei den Bildern?

Falls du das nicht möchtest, habe ich hier mal sowas gemacht:

Code: 
		<form action="#" method="post" id="ausgeabeformular">
		<div><label for="Name">Name</label>
		<input type="text" id="Name" placeholder="Kleinen Text eingeben" value="" />
		</div>
		<div><label for="Alter">Alter</label>
		<input type="number" id="Alter" value="" />
		</div>
		<div><label for="Ort">Ort</label>
		<input type="text" id="Ort" placeholder="Kleinen Text eingeben" value="" />
		</div>
		<input type="submit" id="submit" value="Werte 10 mal ausgeben" />
	</form>
		
<div id="ergebnis"></div>
		

<script type="text/javascript">
var output = "", ergebnisObj;
	
	document.getElementById('submit').onclick = function (evt) {

                for (i = 1; i < 11; i++)
                 {
		output += document.getElementById('Name').value + " " + document.getElementById('Alter').value + " " + document.getElementById('Ort').value + " " + "<br/>";
                 }

                ergebnisObj = document.getElementById( 'ergebnis' ).innerHTML = output;

		evt.preventDefault();
		return false;
	}
	
</script>

PS:
Ich weiß, das man normalerweise in einer Schleife mit 0 zu zählen anfängt, ich habe hier bewusst von 1 bis kleiner 11 genommen, um dem User zu zeigen, wo die Verzehnfachung stattfindet. Wenn ich hier bis <10 gezählt hätte, wäre dies eventuell verwirrend gewesen.
 
Zuletzt bearbeitet:
Hallo dbarthel,
danke für die schnelle Rückmeldung.

Die Bilder habe ich mit folgender Anweisung umgesetzt:

Code: 
function bilderLaden() {
            var bildDiv = document.getElementById("bilder");
            var bildPfad = _pers.getPfadBild();
            for(var i=0; i<10; i++) {
                var pic = document.createElement("img");
                pic.setAttribute("src",bildPfad);
                pic.setAttribute("style","width: 200px; margin-right: 5px;");
                bildDiv.appendChild(pic);
            }
        }

habe das gleiche auch bei den Daten versucht funktioniert aber leider nicht ganz.

- - - Aktualisiert - - -

Vollständiger Code HTML Datei:

Code: 
<!DOCTYPE html>

<html>
<head>
    <title>Klausur</title>
    <script src="js/functions.js"></script>
    <script src="js/gmiEventHelper.js"></script>
    <script>
        function init() {
            perverwaltung = new klausur1.Verwaltung();
            var _chno = new klausur1.PersonGrafisch("Hannes", 25, "Berlin", "images/ChNo.jpg");
            perverwaltung.addPerson(_chno);
            
            var daten = document.getElementById("daten");
            var button = document.createElement("input");
            button.setAttribute("type","button");
            button.setAttribute("id","btnDaten");
            button.setAttribute("value","Daten mehrmals anzeigen");
            daten.appendChild(button);
            
            var daten = document.getElementById("daten");
            var button = document.createElement("input");
            button.setAttribute("type","button");
            button.setAttribute("id","btnBilder");
            button.setAttribute("value","Bild mehrmals anzeigen");
            daten.appendChild(button);
            
            
            _pers = perverwaltung.getPersonen()[0];   
            document.getElementById("personName").value = _pers.getName();
            document.getElementById("personAlter").value = _pers.getAlter();
            document.getElementById("personGeburtsort").value = _pers.getGeburtsOrt();
            
            
            document.getElementById("btnDaten").addEventListener("click",datenLaden);
            
            document.getElementById("btnBilder").addEventListener("click",bilderLaden);
            
            
            
        }       
 	function datenLaden() {
                var output = "", datenObj;
	
                document.getElementById("btnDaten").onclick = function (evt) {

                for (i = 0; i < 10; i++)
                 {
		output += document.getElementById("personName").value + " " + document.getElementById("personAlter").value + " " +   document.getElementById("personGeburtsort").value + " " + "<br/>";
                 }

                datenObj = document.getElementById( "daten" ).innerHTML = output;

		evt.preventDefault();
		return false;

	}
            }
      
    
        function bilderLaden() {
            var bildDiv = document.getElementById("bilder");
            var bildPfad = _pers.getPfadBild();
            for(var i=0; i<10; i++) {
                var pic = document.createElement("img");
                pic.setAttribute("src",bildPfad);
                pic.setAttribute("style","width: 200px; margin-right: 5px;");
                bildDiv.appendChild(pic);
            }
        }
        

        function willkommen(){
            alert("Willkommen Bitte geben Sie die Daten ein")
        }
    
        
        window.onload=willkommen;
    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>

<body onload="init();">
    <div id="daten">
        <label>Name:</label><br/>
        <input type="text" id="personName" /><br/>
        <label>Alter:</label><br/>
        <input type="text" id="personAlter" /><br/>
        <label>Geburtsort:</label><br/>
        <input type="text" id="personGeburtsort" /><br/>
    </div>
    <div id="bilder">
        
    </div>
		
    <div id="daten">
            
    </div>


</body>
</html>
 
Naja, siehst ja oben von mir ein Beispiel, wie es funktioniert.
Da du dich ja schon etwas mit JS auskennst, kannst du das bestimmt für deine Bedürfnisse anpassen, oder?


PS:
Warum willst du die selben Daten eigentlich 10 mal ausgeben?
 
dbarthel schrieb:
Warum willst du die selben Daten eigentlich 10 mal ausgeben?
Zum Vergrößern anklicken....
Klingt mir stark nach einer Hausaufgabe.

Deinen Fehler solltest du finden, indem du dir überlegst, warum das Ganze beim zweiten Klick auf "Daten mehrmals ausgeben" funktioniert.

PS: setAttribute sollte man bei Standardattributen besser nicht verwenden.
PPS: Warum erzeugst du die Buttons eigentlich mit JS und schreibst die nicht direkt ins HTML?
PPPS: Deine Einrückung ist inkonsistent. Das solltest du beheben. Hilft dir auch, den Fehler zu finden.
PPPPS: Du solltest dich entscheiden, ob du den window.onload-Eventlistener im HTML oder JS (besser) setzt. So wie du es gemacht hast, wird ja nur init() ausgeführt und willkommen() gar nicht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben