Text von Option auslesen und darstellen

Diskutiere Text von Option auslesen und darstellen im JavaScript Forum im Bereich Programmierung; Hallo, bin JS Anfänger, also bitte habt Gnade mit mir. Ich habe folgenden Code: JS: function addCards(){ var table =...
B

Blvcksquid

Member
Beiträge
17
Punkte Reaktionen
0
Hallo,
bin JS Anfänger, also bitte habt Gnade mit mir.

Ich habe folgenden Code:
JS:
Javascript:
function addCards(){
  var table = document.getElementById("giving"),
      tr = table.getElementsByTagName('tr')[1],
      td = tr.getElementsByTagName('td')[1];
   

   
   
var chosenCard  =  document.getElementById('card').value;
   
   
 var chosenQuantity = document.getElementById('quantity').value;

  td.innerHTML = (chosenCard + "\n" + chosenQuantity + "x");
};

und HTML:
Code:
.....

<tr>
                <td>
                    <select >
                       
                     <option value="empty" selected disabled>Wähle eine Karte:</option>  
    <option value="F">BLA</option>
    <option value="A">BLABLA</option>
    <option value="B">1234</option>
    <option value="Q">5678</option>
    </select>
    </td>
        </tr>
    </table>
   
   
       
        <label id="number-label" placeholder="1" for="number"> Stückzahl</label><input id="quantity" type="number" placeholder="number" name="amount" value="1" required min="1" max="10">
  </input>
   
   
         </form>
       
       
              <button  onclick="addCards()">Karte(n)zum Angebot hinzufügen</button>
               
                <div>
  <p>Angebotsübersicht</p>
 

        <table id="giving">
  <tr>
    <th>Tauschpartner</th>
    <th>Ich erhalte</th>
    <th>Ich gebe</th>
  </tr>
           
  <tr>
      <td></td>
    <td></td>
 
    <td></td>
  </tr>
           
</table>


Ich möchte in der Tabelle mit der Id "giving" im Html Dokument nicht die value anzeigen lassen sondern den Text der in meiner Option angezeigt wird.
Gibt es da ein ähnlich einfaches Konzept im JS script? Also anstatt .value einfach etwas anderes einbauen?

Suche jetzt schon mehrere Stunden im Netz und habe nichts brauchbares gefunden o_O

Liebe Grüße,
Matthias
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
B

Blvcksquid

Member
Beiträge
17
Punkte Reaktionen
0
Danke hat geklappt!

Ja , die ID "card" war der ersten Tabelle zugeordnet.

Andere Frage:
Ich habe aktuell vier Karten zur Auswahl, für jede individuelle Karte soll bei hinzufügen eine eigene Reihe und Zeile in der Tabelle "giving" erstellt werden.
Außerdem soll die Menge der jeweiligen Karte bei hinzufügen aktualisiert werden. Wie geht das?
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
für jede individuelle Karte soll bei hinzufügen eine eigene Reihe und Zeile in der Tabelle "giving" erstellt werden.
Das ist kein Problem, lege ein Template mit dem HTML der Tabellenzeile an, siehe hier:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template?retiredLocale=de
Das HTML passt fast eins-zu-eins auf deine Aufgabe, nur das Javascript ist ein wenig kompliziert. Ich würde das Einfügen in die Tabelle lieber mit insertAdjacentHTML machen:
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML?retiredLocale=de

Außerdem soll die Menge der jeweiligen Karte bei hinzufügen aktualisiert werden. Wie geht das?
Wenn ich mir deinen vorhandenen Code ansehe, soll die Menge wohl in der Tabelle #giving eingetragen werden, in die mittlere Zelle der neuen Zeile?

Übrigens: Ein <input> hat kein schließendes </input>
 
B

Blvcksquid

Member
Beiträge
17
Punkte Reaktionen
0
So nach langer Abwesenheit melde ich mich wieder,

mit folgendem Code:
HTML:
     <tr>
                <td>
                    <select id="card" onchange="showCard()" required>
                        
                     <option value="empty" selected disabled>Wähle eine Karte:</option>   
    <option value="F">Flamara</option>
    <option value="A">Aquana</option>
    <option value="B">Blitza</option>
    <option value="Q">Quajutsu</option>
    </select>
    </td>
        </tr>
    </table>
    
    
        
        <label id="number-label" placeholder="1" for="number"> Stückzahl</label><input id="quantity" type="number" placeholder="number" name="amount" value="1" required min="1" max="10">
 
    
    
         </form>
                
  

    
                <button  id="insert">Karte(n)zum Angebot hinzufügen</button>
                <button id="reset">Reset</button>
    
                <div>
                    <p>Angebotsübersicht</p>

              
                    <table id="producttable">
  <thead>
    <tr>
      <td>Karte</td>
      <td>Anzahl</td>
    </tr>
  </thead>
  <tbody id="subject">
      
    
    
  </tbody>
</table>

<template id="productrow">
 

</template>

    

                    
                    
    </div>

und JS:

Javascript:
const insert = document.querySelector('#insert');
insert.addEventListener('click', () => {
  const subject = document.querySelector('#subject');
    var sub = document.getElementById("subject");
    
 
             var   card = document.getElementById("card").value;
            var quantity = parseInt(document.getElementById("quantity").value);
              
                alert(quantity);
    
      
var existingquantity = 0;
    
                if(card == "F" && existingquantity == 0){
                    
                    window.existingquantity += quantity;
    
                    alert(existingquantity);
                    
              
                    
                
                    
                    subject.insertAdjacentHTML("beforeend", '<tr> <td ><strong>Flamara</strong></td><td id="test">'+existingquantity+'</td></tr>');
                    
      
                }
  else {
      alert("es hat geklappt");
    };
    
    
    
    


    
});

const reset = document.querySelector('#reset');
reset.addEventListener('click', () => {
  document.location.reload();
});


Was ich im Prinzip will ist, die ausgewählte Quantität einer individuellen Karte zu erhöhen ohne eine neue Tabellenreihe zu erstellen, sollte diese Karte bereits in der Tabelle sein.
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Erst mal zwei allgemeine Hinweise:

Diese beiden Zeilen ermitteln jeweils das selbe Objekt:
Code:
  const subject = document.querySelector('#subject');
    var sub = document.getElementById("subject");
D. h. eine davon ist überflüssig. Ich empfehle, die modernen Varianten const oder let statt var zu verwenden.

Wenn Du das HTML so definierst:
Code:
subject.insertAdjacentHTML("beforeend", '<tr> <td ><strong>Flamara</strong></td><td id="test">'+existingquantity+'</td></tr>');
brauchst Du kein Template, Du kannst die Tags weg lassen.

Was ich im Prinzip will ist, die ausgewählte Quantität einer individuellen Karte zu erhöhen ohne eine neue Tabellenreihe zu erstellen, sollte diese Karte bereits in der Tabelle sein.
Das macht die Sache ein ganzes Stück klarer. In dem Fall musst Du zunächst, nachdem eine Karte ausgewählt wurde und der Insert-Button geklickt, die Tabelle durchsuchen mit einer Schleife mit forEach um zu prüfen, ob die Karte schon vorhanden ist. Ist das der Fall, erhöhst Du die Anzahl in der Tabelle, wenn nicht, fügst Du eine neue Zeile ein.
https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Array/forEach
Versuche es und wenn Du nicht zum Ziel kommst, melde dich wieder.

Man kann es auch anders aufziehen:
Ein Abbild der Karten in einem Objekt mit dem Kürzel der Karte als Schlüssel und dem Namen und der Anzahl als Werte. Dann nach jeder Änderung den kompletten Tabellenkörper neu generieren.
 
B

Blvcksquid

Member
Beiträge
17
Punkte Reaktionen
0
In dem Fall musst Du zunächst, nachdem eine Karte ausgewählt wurde und der Insert-Button geklickt, die Tabelle durchsuchen mit einer Schleife mit forEach um zu prüfen, ob die Karte schon vorhanden ist. Ist das der Fall, erhöhst Du die Anzahl in der Tabelle, wenn nicht, fügst Du eine neue Zeile ein.
Da komme ich einfach nicht drauf.

So sieht mein JS jetzt aus:
Javascript:
const insert = document.querySelector('#insert');
insert.addEventListener('click', () => {
  const subject = document.querySelector('#subject');
 
    
 
             var   card = document.getElementById("card").value;
            var quantity = parseInt(document.getElementById("quantity").value);
              
                alert(quantity);
    
let test = [card,]   
    
test.forEach(function (s, i, o) {


    subject.insertAdjacentHTML("beforeend", '<tr> <td id="'+s+'"><strong>'+s+'</strong></td><td>'+quantity+'</td></tr>');
    
});
    
    

    


    
});

const reset = document.querySelector('#reset');
reset.addEventListener('click', () => {
  document.location.reload();
});
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Sieh dir dies an, das ist die Implementierung meines ersten Vorschlags:
Javascript:
        const
            // Der Button für das Einfügen:
            insertBtn = document.querySelector('#insert-btn'),
            // Die Tabelle mit der Buchführung für die Karten:
            subject = document.querySelector('#subject');
        insertBtn.addEventListener('click', () => {
            const
                // Die Option, die ausgewählt wurde:
                selectedOption = document.querySelector('#select-card option:checked'),
                // Das value-Attribut in der Option:
                cardValue = selectedOption.value,
                // Der Name der Karte in der Option:
                cardName = selectedOption.innerHTML,
                // Die Tabellenzeilen:
                tableRows = subject.querySelectorAll('tr');

            let found = false;
            // Alle Tabellenzeilen durchsuchen:
            tableRows.forEach(row => {
                const
                    // Die Zelle mit der Anzahl:
                    countCell = row.querySelector('.count-cell'),
                    // Die Zelle mit dem Value-Attribut:
                    valueCell = row.querySelector('.value-cell');
                // Stimmt das value-Attribut in der Tabelle
                // mit dem ausgewählten überein?
                if (valueCell.textContent == cardValue) {
                    // Merken, dass die Karte gefunden wurde:
                    found = true;
                    // Anzahl um 1 erhöhen:
                    countCell.textContent = parseInt(countCell.textContent) + 1;
                }
            });
            // Wurde die Karte nicht gefunden?
            if (!found) {
                // Tabellenzeile mit Anzahl 1 einfügen:
                subject.insertAdjacentHTML("beforeend", '<tr><td class="value-cell">' + cardValue + '</td><td ><strong>' + cardName + '</strong></td><td class="count-cell">1</td></tr>');
            }
        });
Ich habe es ausführlich kommentiert, damit Du es auch verstehst.
HTML:
    <select id="select-card">
        <option value="empty" selected disabled>Wähle eine Karte:</option>
        <option value="F">BLA</option>
        <option value="A">BLABLA</option>
        <option value="B">1234</option>
        <option value="Q">5678</option>
    </select>

    <button id="insert-btn">Karte(n)zum Angebot hinzufügen</button>
    <button id="reset">Reset</button>

    <div>
        <p>Angebotsübersicht</p>

        <table id="producttable">
            <thead>
                <tr>
                    <td>Karte</td>
                    <td>Anzahl</td>
                </tr>
            </thead>
            <tbody id="subject">
            </tbody>
        </table>

    </div>
 
B

Blvcksquid

Member
Beiträge
17
Punkte Reaktionen
0
Danke erstmal. Der Code funktioniert, aber sofort nach ausführen des gesamten Codes lädt die Seite neu und die Tabelle ist wieder verschwunden. Woran liegt das?
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Hm, es gibt ja noch den Reset-Button. Hast Du den vielleicht hinzu gefügt? Versuche mal, ob Du den Code document.location.reload(); findest und poste den Code darum herum.
 
B

Blvcksquid

Member
Beiträge
17
Punkte Reaktionen
0
Die Funktion habe ich komplett entfernt und das reloaden trifft immer noch "zufällig" nach hinzufügen einer Karte ein.

Javascript:
const
            // Der Button für das Einfügen:
            insertBtn = document.querySelector('#insert-btn'),
           // Die Tabelle mit der Buchführung für die Karten:
           subject = document.querySelector('#subject');

        insertBtn.addEventListener('click', () => {
            
  const
            
                //die ausgewählte Anzahl der Karten von Blvcksquid
                selectedquantity =  document.getElementById('quantity').value,
            
            
                // Die Option, die ausgewählt wurde:
                selectedOption = document.querySelector('#card option:checked'),
                // Das value-Attribut in der Option:
                cardValue = selectedOption.value,
                // Der Name der Karte in der Option:
                cardName = selectedOption.innerHTML,
                // Die Tabellenzeilen:
                tableRows = subject.querySelectorAll('tr');

        
            
            
            let found = false;
            // Alle Tabellenzeilen durchsuchen:
            tableRows.forEach(row => {
                const
                    // Die Zelle mit der Anzahl:
                    countCell = row.querySelector('.count-cell'),
                    // Die Zelle mit dem Value-Attribut:
                    valueCell = row.querySelector('.value-cell');
                // Stimmt das value-Attribut in der Tabelle
                // mit dem ausgewählten überein?
                if (valueCell.textContent == cardValue) {
                    // Merken, dass die Karte gefunden wurde:
                    found = true;
                    // Anzahl um selectedquantity erhöhen:
                    countCell.textContent = parseInt(countCell.textContent) + parseInt(selectedquantity);
                }
            });
            // Wurde die Karte nicht gefunden?
            if (!found) {
                // Tabellenzeile mit Anzahl 1 einfügen:
                subject.insertAdjacentHTML("beforeend", '<tr><td class="value-cell">' + cardValue + '</td><td ><strong>' + cardName + '</strong></td><td class="count-cell">'+selectedquantity+'</td></tr>');
            }
        });
 
T

tk1234

Active member
Beiträge
33
Punkte Reaktionen
2
Danke erstmal. Der Code funktioniert, aber sofort nach ausführen des gesamten Codes lädt die Seite neu und die Tabelle ist wieder verschwunden. Woran liegt das?
Ich würde mal darauf tippen dass es ein Formular um das ganze gibt - und da der Button kein type=button hat, ist er ein Submit-Button und schickt das Formular ab.
 
Thema:

Text von Option auslesen und darstellen

Oben Unten