Text von Option auslesen und darstellen

[Blvcksquid]

Hallo,
bin JS Anfänger, also bitte habt Gnade mit mir.

Ich habe folgenden Code:
JS:

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:

.....

<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

Liebe Grüße,
Matthias

 

[Sempervivum]

Ja, Du kannst mit document.querySelector und der Pseudoklasse :checked die selektierte Option ermitteln:

var chosenCard  =  document.querySelector('#card option:checked').textContent;

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector?retiredLocale=de
https://stackoverflow.com/questions...ss-similar-to-checked-but-for-option-elements

Allerdings finde ich in dem Code, den Du gepostet hast, die ID "card" nicht. Beim Posten verloren gegangen?

 

[Blvcksquid]

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?

 

[Sempervivum]

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>

 

[Blvcksquid]

So nach langer Abwesenheit melde ich mich wieder,

mit folgendem Code:

     <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:

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.

 

[Sempervivum]

Erst mal zwei allgemeine Hinweise:

Diese beiden Zeilen ermitteln jeweils das selbe Objekt:

  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:

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.

 

[Blvcksquid]

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:

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();
});

 

[Sempervivum]

Sieh dir dies an, das ist die Implementierung meines ersten Vorschlags:

        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.

    <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>

 

[Blvcksquid]

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?

 

[Sempervivum]

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.

 

[Blvcksquid]

Die Funktion habe ich komplett entfernt und das reloaden trifft immer noch "zufällig" nach hinzufügen einer Karte ein.

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>');
            }
        });

 

[tk1234]

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.

 

[Blvcksquid]

Ja, es hat geklappt!
Vielen Dank euch beiden!