Beiträge von informatikerproblem

Dankeschön! Ich habe den Code jetzt soweit ergänzt, du hast mir wirklich sehr weitergeholfen.

Tut mir Leid, es ist auch nicht einfach mit mir. Die Funktion showVisitenkarte() kommt aus der Klasse Visitenkarte. Das hätte ich eher sagen müssen.

class Visitenkarte {
    
    constructor ( name, adresse, telefonnummer, fax){
        this.name = name;
        this.adresse = adresse;
        this.telefonnummer = telefonnummer;
        this.fax = fax;
    } // eof constructor
    
    showVisitenkarte(i) {
        document.getElementById('name').innerHTML = this.name;
        document.getElementById('adresse') = this.adresse;
        document.getElementById('telefonnummer') = this.telefonnummer;
        document.getElementById('fax') = this.fax;

    }

Die Basis für Tabelle 1 ist eine Visitenkartenliste, die ebenfalls eine eigene Klasse darstellt, die dann die einzelnen Visitenkarten pusht.

class Visitenkartenliste {
    
    constructor() {
        this.karten = [];
    } 
    
    hinzufuegen(name, adresse,telefonnummer, fax) {
        let k = new Visitenkarte(name, adresse,telefonnummer, fax);
        
        this.karten.push(k);
    } 

In der Html Datei habe ich dann einige Karten erstellt und mit der hinzufuegen Methode an das Array angehangen. Das klappt soweit auch.

Jetzt meckert nur noch die Konsole wegen der HTML Datei:

let domObjArr = document.getElementsByClassName('Visitenkarte');
            for(let i=0; i < domObjArr.length; i++)
                domObjArr[i].addEventListener('click', function(){
                showVisitenkarte(i);
            });

Die Funktion showVisitenkarte ist nicht definiert steht dort. Könnte das daran liegen, dass die Funktion aus der Klasse Visitenkarte kommt und daher noch einen "Bezugspunkt" braucht? sowas wie x.showVisitenkarte(i)? Das habe ich sonst immer so gemacht, wenn ich Funktionen aus einer Klasse in HTML verwendet habe.

domObjArr[i].showVisitenkarte(i); funktioniert leider auch nicht, laut Konsole ist das keine gültige Funktion.

Danke für deine Hilfe! Tatsächlich scheitert es jetzt nur noch am einlesen. Wie genau mache ich das? Erstelle ich einen String mit den Daten einer Karte?

function showVisitenkarte(i){

let str = '';
str = str + 'document.getElementById(name).innerHTML =' this.name ;
str = str + 'document.getElementById(adresse).innerHTML =' this.adressee ;
usw.
return str;
}

Ich verstehe nicht ganz, wo genau ich auf die ID zugreifen soll und wie ich dann den entsprechenden Wert in der Funktion showVisitenkarte() hinzufügen kann.

Es soll nur die angeklickte Karte ausgegeben werden, also müssten nur die Daten einer Karte ausgegeben werden.

Hier ist die vorgefertigte Tabelle:

<table>
<thead>
  <tr><th>Visitenkarte</th></tr>
</thead>
<tbody>
  <tr>
      <td>Name</td><td><input id="name" value="" type="text" style="width:125px;"></td>
  </tr>
  <tr>
  <td>Adresse</td><td><textarea id="adresse" rows="1" style="width:125px;"></textarea></td>
  </tr>
  <tr>
  <td>Telefonnummer</td><td><input id="telefonnummer" value="" style="width:125px;"
                             type="number"></td>
  </tr>
  <tr>
  <td> FAX</td> <td> <input id="fax" value="" style="width:125px;"
                     type="number"></td>
  </tr>
</tbody>
<tfoot>
</tfoot>
</table>

Ich merke gerade, dass ich mich vielleicht falsch ausgedrückt habe. Die Visitenkarte sind in einem Array gespeichert, und dieser wird als HTML Tabelle ausgegeben. Bei Auswahl einer Karte per Click Event sollen die entsprechenden Daten in eine neue Tabelle eingesetzt werden, die jeweils für die entsprechenden Daten ein Input Feld enthält. Hier zwei Beispiele:

<td> Name </td> <td> <input id="name" value="" type="text" style="width:125px;"> </td>                                                     <td> Adresse </td> <td> <textarea id="adresse" rows="1" style="width:125px;"></textarea> </td>

Die Daten sind alle bereits vorgegeben und haben alle eine entsprechende ID.

Ich habe mich schon gefragt, wie du den Code so posten konntest - danke!

War ich mit .innerHTML beziehungsweise der ID komplett auf dem Holzweg? Ich dachte eigentlich, das wäre eine gute Idee gewesen, da die vorgefertigte HTML Tabelle für die einzelnen Eingabefelder bereits ID'S vergeben hat, aber keinen Value enthält.

Leider klappt es immer noch nicht Habe in showVisitenkarte die Tabellen befüllt mit einem String:

showVisitenkarte() {

let str = '';

str = str + '<tr>';

str = str + '<td>' + this.name + '</td>';

str = str + '<td>' + this.adresse + '</td>';

str = str + '<td>' + this.telefonnr + '</td>' ;

str = str + '<td>' + this.mail + '</td>';

if (this.fax!=0){

str = str + '<td>' + this.fax + '</td>';

}else str = str + '<td></td>';

str = str + '</tr>';

return str;

Und in HTML sieht die Event Funktion jetzt so aus:

let domObjArr = document.getElementsByClassName('Visitenkarte');

for(let i=0; i < domObjArr.length; i++)

domObjArr[i].addEventListener('click', function(){

let rows = document.querySelector('table').rows;

for (let i = 0; i < rows.length; i++) {

let theRow = rows[i];

for (let j = 0; j < theRow.cells.length; j++) {

let theCell = theRow.cells[j];

theRow.cells[j].showVisitenkarte();

}

}

});

Könntest du nochmal drüber schauen? habe ich doch noch etwas falsch verstanden?

Liebe Grüße

Dankeschön! Ich werde es heute Abend mal ausprobieren und hoffe, deine Antwort bringt mich weiter

Danke für die Antwort! Was bedeutet querySelector? Ich bin leider noch ein totaler Anfänger was JS und HTML angeht.

Woher weiß das Prorgramm, welche Daten es ausgeben soll? Durch das j würde man durch die einzelnen Spalten voran gehen oder? und rows[i] wäre die Visitenkarte, die ich angeklickt habe?

Entschuldige die ganzen Fragen, ich bin echt ein wenig überfordert.

Hallo ihr Lieben!

Ich habe eine Frage bezüglich eines HTML Programms in Verbindung mit einem JavaScript Event. In der HTML Datei ist bereits eine leere Tabelle vordefiniert. In diese soll ich nun die Daten eines bestimmten Elements (einer Visitenkarte) eines Arrays einfügen. Die Auswahl des Element aus dem Array funktioniert, allerdings erschließt sich mir nicht, wie ich es schaffe, die entsprechenden Werte des Elements in die HTML Tabelle zu kopieren? Ich soll dafür eine Funktion der Elementenklasse benutzen.

Diese Programmteile habe ich bereits in der html datei:

let domObjArr = document.getElementsByClassName('Visitenkarte');

for(let i=0; i < domObjArr.length; i++)

domObjArr[i].addEventListener('click', function(){

domObjArr[i].showVisitenkarte();

});

und diesen in der Klasse Visitenkarte:

showVisitenkarte() {

let str= '';

str = str + document.getElementByID("die jeweilige ID").innerHTML = this.name;

str = str + document.getElementByID("die jeweilige ID").innerHTML = this.adresse;

str = str + document.getElementByID("die jeweilige ID").innerHTML = this.telefonnr;

return str;

}

Leider funktioniert diese Idee nicht. Könnte mir jemand einen anderen Hinweis geben?

Liebe Grüße!!