Wert aus <td> auslesen mit JS?

Es ist sicher eine dumme Frage aber ich komme nicht weiter. Ich möchte den inhalt einer Tabellenzelle per alert ausgeben. Der Code:

let wert = document.getElementById('DieId');
alert(wert);

doch ausgegeben wird dann [object HTMLTableCellElement].

Ich habe das häufiger auch mit anderen Elementen. Was mache ich falsch?

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

LinuxLinda

23.02.2023, 12:42

let wert = document.getElementById('DieId').innerHTML;

Woher ich das weiß:Berufserfahrung – C++, Javascript, C# und C Dev

Bohne47

Fragesteller

23.02.2023, 12:47

Danke, ich dachte immer .innerHTML wäre nur zum ändern des Wertes. :-)

TheQ86

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

23.02.2023, 12:42

Für das bloß Auge hat ein HTML-Element nur seinen Inhalt als Eigenschaft. Aber der Code, den du hast, der gibt dir nicht den Inhalt der Zelle zurück, sondern das JavaScript Objekt der Zelle. Das heißt du musst noch an wert ein innerText schreiben.

alert(wert.innerText);

Bohne47

Fragesteller

23.02.2023, 12:49

Wo ist denn der Unterschied zwischen .innerHTML (Antwort von @LinuxLinda) und .inner Text? Was ist besser?

TheQ86

23.02.2023, 12:54

@Bohne47

https://www.javatpoint.com/innertext-vs-innerhtml

Wenn du nur reinen Text ausliest und in der Table Cell auch nur Text drin steht, dann ist es egal.

Wichtiger werden die Unterschiede, wenn innherhalb der Table Cell weiterer HTML Code ist, oder, wenn du diese EIgenschaft nicht nur lesen, sondern schreiben willst.

Ähnliche Fragen

Verstehe nicht, warum es falsch ist?

// loggen der Variabeln-Name für den Login-Button //

let loggen = document.getElementById("login");


loggen.addEventListener("click", function() {
  
// eingabeFeld ist der Name für das Inputfeld //  
let eingabeFeld = document.getElementById("field");

eingabeFeld.value;
if (eingabeFeld.includes("huso1234")) {
alert("Ja, das Passwort ist richtig");
}
else {
    alert("Das Passwort ist falsch");
}
eingabeFeld.textContent = "";
});

Funktioniert halt einfach nicht. Es handelt sich hierbei um die Programmiersprache JavaScript. Es kommt kein Alert und am Ende geht der Text auch nicht weg vom Inputfeld.

...zur Frage

C-Knopf im Taschenrechner programmieren?

Ich habe vor, einen Taschenrechner in HTML und JS zu coden, aber ich weiß nicht, wie ich diesen Knopf, der alles löscht in eine Funktion packen kann.

So habe ich es bisher versucht, aber es funktioniert nicht:

function deleteAll() {
  let container = document.getElementById("resultarea");
  let remove = clrs(container.innerHTML);
  container.innerHTML = remove;
}

...zur Frage

Es function iert nicht - Warum funktioniert Js Code nicht?

Ich habe vor ganz einfach als Übung für mich ein Textfeld mit Button zu programmieren, in das Textfeld schreibt man seinen Namen und wenn man den Button drückt soll ein alert kommen wo dann drin steht „Your name is + Name.“ Code:

 <script>
     function newfunction() {
     let namE = document.getElementById("name").value;
     alert('Your name is ' + namE)
     }
 </script>

Html:

<input type="text" placeholder="your name" id="name">
<button onclick="newfunction()">Know something that you never want to know</button>

...zur Frage

Einbindung von JS und CSS klappt nicht, könnte die Fehlerursache sein?

Hallo Leute, ich wollte gerade zum besseren Verständnis von getElementById() ein Beispiel nachbauen, dazu habe ich ein HTML-Dokument erstellt und die entsprechenden JavaScript- und CSS-Dateien eingebunden. Die CSS-Datei im Kopfbereich, die JS-Datei vor dem schließenden body-Tag. Am Ende soll ein roter Rahmen um eine Tabelle erzeugt werden.

Ich dachte erst, dass es am falsch eingegebenen Pfad liegen könnte, aber der ist soweit ich sehe auch richtig. Egal was ich tue, die HTML-Datei wird ausgegeben, aber ohne die JS- und CSS-Komponenten.

Hier der zugehörige JS-Code:

Hier der JS-Code:

function init() {
    // Selektion nach ID
    const mainElement = document.getElementById("main");
    mainElement.className = "border";
}

Hier der CSS-Code:

.border {
    border: thick solid red;
    border-radius: 25px;
    padding: 5px 25px 25px 25px;
}

...zur Frage

Was ist da schief (JS)?

Starte ich das Programm so beginnt es so wie ich es will. Irgendwann wird dann aber ein Fehler gezeigt

("main.js:27 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

at ClickIt (main.js:27)

at clickvol2 (main.js:21)

at HTMLParagraphElement.<anonymous> (main.js:30))

und mehrere Flächen farbig markiert und man muss manchmal doppelt klicken. Wo liegt hier der Fehler?

JS:
"use strict";

let genNum = function() {

let gen = Math.random() * 9;

let num = Math.round(gen);

let numers = ["null", "eins", "zwei", "drei", "vier", "fünf", "sechs", "sieben", "acht", "neun"];

let final = (numers[num]);

if(final === "zehn") {

genNum()

}

return final;

};

let i = 0;

document.getElementById("Punkteanzahl").textContent = i;

let clickvol2 = function() {

if (document.querySelector("#eins", "#zwei", "#drei", "#vier", "#fünf", "#sechs", "#sieben", "#acht", "#neun").hasAttribute("class")) {

console.log(".")

} else {

ClickIt(genNum())

}};

let ClickIt = function(num) {

let hash = "#";

let ident = hash.concat(num);

document.querySelector(ident).setAttribute("class", "click");

document.querySelector(ident).addEventListener("click", function() {

document.querySelector(ident).removeAttribute("class");

clickvol2();

i++;

})

};

ClickIt(genNum());

console.log(document.getElementById("Punkteanzahl").textContent)

...zur Frage

Kennt sich jemand mit Curl / Javascript aus?

Ich hab ne Dokumentation zur API und ein Beispiel in curl. Eigentlich müsste ich es ja nur noch in JS übersetzten, aber ich bekomme es einfach nicht hin. Es soll eine Datei "Datei" mit dem Inhalt value erstellt werden

curl -X POST "-d "param=value" http://server/Datei

JS:

let req = new XMLHttpRequest();
req.open("POST", "http://server/Datei?param=test");
req.send();

Die Datei wird tatsächlich erstellt, aber sie ist leer. Weißt jemand, wo mein Fehler liegt?

...zur Frage

Spotify API Get Methode Blocked?

Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js

const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";

function searchSong() {
    let songName = document.getElementById("song-name").value;

    fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
        headers: {
            "Authorization": `Bearer ${ACCESS_TOKEN}`
        }
    })
    .then(response => response.json())
    .then(data => {
        let songResults = data.tracks.items;

        if (songResults.length > 0) {
            let songList = document.createElement("ul");

            for (let i = 0; i < songResults.length; i++) {
                let song = songResults[i];

                let songItem = document.createElement("li");
                songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;

                songList.appendChild(songItem);
            }

            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "";
            songResultsDiv.appendChild(songList);
        } else {
            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "Sorry, no songs found.";
        }
    })
    .catch(error => {
        const errorMessage = document.getElementById("error-message");
        errorMessage.innerText = error;
    });
}

function selectSong(songId) {
    fetch("db.php", {
        method: "POST",
        body: JSON.stringify({songId: songId}),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert("Song added to the list!");
        } else {
            alert("Error adding song to the list.");
        }
    })
    .catch(error => {
        console.log(error);
    });
}

Hier ist dann noch die Index.html:

 <!DOCTYPE html>
<html>
<head>
    <title>DJ Song Request</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>DJ Song Request</h1>
    <form>
        <label for="song-name">Enter song name:</label>
        <input type="text" id="song-name" name="song-name">
        <button type="submit" onclick="searchSong()">Search</button>
    </form>
    <div id="song-results"></div>
</body>
</html>

Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D

...zur Frage

Div-Element mit javascript auslesen; wird eine Zahl als Zahl angesehen?

var x = document.getELementById("div-ID");

var y = document.getELementById("div-ID2");

var z = y.valueAsNumber * z.valueAsNumber;

Hallo zusammen,

ich habe das Problem, dass das Ergebnis aus zwei Div-Elementen, die einen Zahlwert enthalten, immer wieder bei dem Start der Funktion NaN ausspucken. Ich mache das nur aus Spaß und weiß gerde nicht weiter.

Können die Werte aus Div - Elementen nicht mit document.getElementByID ausgelesen werden, um dann mit den Variabeln weiterzurechnen?

Das ist oben nur skizziert, aber gebe ich bei var z als Variabel einen Zahlwert ein, dann klappt alles. Mein probelm scheint also da zu liegen.

...zur Frage

Browserfehler: "0: Unable to get property 'SavePersonalAndPaymentData' of undefined or null reference"?

Hallo,

ich habe eine Aufgabe gemacht und mein Browser gibt diesen Fehler aus:

0: Unable to get property 'SavePersonalAndPaymentData' of undefined or null reference

Ich glaube aber, dass die Aufgabe richtig ist!

Ich habe es auch einen Freund geschickt und bei ihm funktioniert es ebenfalls nicht.

HTML:

<!DOCTYPE html>
<html>
  <head lang="de">
    <meta charset="UTF-8" />
    <style type="text/css"></style>
    <title>Lieblings Professor</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Notenberechnung<br>Teilaufgaben</legend>

        <label for="aufgabe1">Aufgabe 1:</label>
        <input type="number" name="Augabe1" id="a">
        <br><br>

        <label for="aufgabe2">Aufgabe 2:</label>
        <input type="text" name="Aufgabe2" id="b">
        <br><br>

        <label for="aufgabe3">Aufgabe 3:</label>
        <input type="number" name="Augabe3" id="c">
        <br><br>

        <label for="aufgabe4">Aufgabe 4:</label>
        <input type= "number" name="Augabe4" id="d">
        <br><br>

        <button id="069" value="069">druck berechne</button>
      </fieldset>
    </form>
    <h1>Note</h1>
    <div id="note"></div>
    <script src="x1.js"></script>
  </body>
</html>
</form>
<h1>Note</h1>
<div id="note"></div>
<script src="x1.js"></script>
</body>
</html>

JavaScript:

"use strict"

window.addEventListener("load", init);

function init() {
  console.log("Fenster ist geladen");
  let btn = document.getElementById("069");
  btn.addEventListener("click", btnfk);

  function btnfk() {
    console.log("ich wurde geklickt!!!!");

    let aufgabe1 = document.getElementById("a").value;
    console.log(aufgabe1);
    let aufgabe2 = document.getElementById("b").value;
    console.log(aufgabe2);
    let aufgabe3 = document.getElementById("c").value;
    console.log(aufgabe3);
    let aufgabe4 = document.getElementById("d").value;
    console.log(aufgabe4);

    aufgabe1 = Number(aufgabe1);
    aufgabe2 = Number(aufgabe2);
    aufgabe3 = Number(aufgabe3);
    aufgabe4 = Number(aufgabe4);

    let note = document.getElementById("note");
    global = global + aufgabe1 + aufgabe2 + aufgabe3 + aufgabe4;

    note.textContent = global;
    let note5 = document.createElement("div");
    document.body.appendChild(note5);

    if (global < 12) {
      note5.textContent = "Ihre Note ist 5!!!!!";
    }

    if (global >= 12 && global <= 15) {
      note5.textContent = "Ihre Note ist 4 ...";
    }

    if (global >= 15 && global <= 18) {
      note5.textContent = "Ihre Note ist 3";
    }

    if (global >= 18 && global <= 21) {
      note5.textContent = "Ihre Note ist 2 super";
    }

    if (global >= 21) {
      note5.textContent = "Ihre Note ist 1 WOW";
    }
  }
}

let global = 0;

Wenn ich statt Zahlen aber Buchstaben eingebe, werden sie gespeichert. Ansonsten mit Zahlen werden sie nicht gespeichert und verschwindet sofort.

...zur Frage

JS ARRAYS + RECHNEN?

Also ich habe ein Programm wo man per Knopfdruck über einen Prompt etwas schreiben kann und das steht dann im Array, aber es soll so sein das wenn man auf einen anderen Button drückt ein Allert kommt in dem steht wie viel alles zusammen ist also ich möchte es + rechnen.

Falls es hilfreich ist hier mein Code:

<html>

<head>

</head>

<body>

<h1>Stromverbrauch</h1>

<button onclick="addNewItem(); updateList();">Neuen Verbrauch hinzufügen</button>

</ul>

let shoppingItems = getShoppingItemsFromLocalStorage();

updateList();

function getShoppingItemsFromLocalStorage() {

let items = localStorage.getItem('shoppingItems');

if (items == null || items == '') {

items = [];

} else {

items = items.split(',');

}

return items;

}

function addNewItem() {

let item = prompt('Welchen Verbrauch hast du?');

if (item != null) {

shoppingItems.push(item);

localStorage.setItem('shoppingItems', shoppingItems);

}

function removeItem(itemIndex) {

shoppingItems.splice(itemIndex, 1);

localStorage.setItem('shoppingItems', shoppingItems);

}

function updateList() {

document.getElementById('list').innerHTML = '';

for (let index = 0; index < shoppingItems.length; index += 1) {

document.getElementById('list').innerHTML += '<li>' + shoppingItems[index] +

' <button onclick="removeItem(' + index + '); updateList();">X</button></li>';

}

</script>

</body>

</html>

...zur Frage

Werte aus Datenbank anzeigen mit JS?

Hallo,

ich habe folgenden Code für mein Formular:

<form action="/message1" method="post">
  <div class="input">
    <input type="text" placeholder="Chat" id="input" name="input1">
  </div>
  <div class="send">
    <button type="submit" onclick="message();">Send</button>
  </div>
</form>

Nun noch das JS onclick-Event:

function message() {
  input = document.getElementById("input").value;
  count++;

  if (input == "") {
    alert("please type your message!");
  }
  else {
    if (count % 2 == 0) {
      let newDiv = document.createElement("div");
      newDiv.id = "divMessage";
      newDiv.style.display = "flex";
      newDiv.style.justifyContent = "flex-start";
      newDiv.style.margin = "45px";
      newDiv.style.backgroundColor = "#303032";
      newDiv.style.borderRadius = "10px";
      newDiv.style.padding = "10px";
      newDiv.style.marginTop = "80px";
      newDiv.style.color = "white";
      newDiv.style.marginBottom = "80px";
      newDiv.style.width = "120px";
      newDiv.innerHTML = input;

      let chatMessages = document.querySelector(".chat-messages");
      chatMessages.appendChild(newDiv);
    }

Und nun noch das Reinschreiben mit node.js in die MariaDB-Datenbank:

app.post('/message1', async (req, res) => {
  const input = req.body.input1;
  console.log(input);
  const conn = await pool.getConnection();
  await conn.query(`INSERT INTO test.handy (id, name) VALUES (2, '${input}')`);
  conn.release();
});

Nun möchte ich aber, das, was in die Datenbank geschrieben wurde, beim Aktualisieren der Seite immer noch im "newDiv" anzeigen. Wie geht das?

...zur Frage

Was funktioniert mit meinem Java Script/html code nicht?

Ich versuche gerade eine einfache Passwortabfrage mit Javascript zu programmieren. Ihr müsst mir auch nicht erst sagen das ich es lieber mit php machen sollte, ich weiß dass das überall steht aber das kapier ich überhauptnicht. Hier ist mein code:

<!DOCTYPE html>
<html>
    <head>
        <title>Basic Web Page</title>
        <script>
            let rightpass = 'hallo';
            let inpu = document.getElementById(input);
            let dkfjl = inpu == rightpass;
            function passwortabfrage() {
                if (dkfjl) {
                    alert('Es hat geklappt')
                } else {
                    alert('failed')
                }
            }
        </script>
    </head>
    <body>
        <form>
        <input type="text" id="input" >
        <input type="submit" onclick="passwortabfrage()">
        </form>
    </body>
</html>

Es geht mir dabei im Moment nicht um Sicherheit, sondern nur darum zu wissen wie was nicht funktioniert. Viele Grüße und Danke für eure Antworten

...zur Frage

Element-Inhalt abrufen?

Ich programmiere seit einiger Zeit mit HTML CSS und JS und habe mit Getboostrap eine Website erstmals geschrieben, wo mein Ziel es war dass man dort einen Key eingeben kann womit man dann auf eine weitere HTML Datei umgeleitet wird die den Namen hat. Damit meine ich das wenn man als Key hallo123 eingibt das man auf die Seite Hallo.html umgeleitet wird. Ist zwar nicht gerade so sicher aber es reicht für den Start aus. Ich habe jetzt aber das Problem das ich bei "document.getElementById()" nicht dem Inhalt aus dem Eingabe Feld erhalte wodurch man egal was man eingibt zu null.html umgeleitet wird. Weiß jemand wie ich das Behebe?

<!doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mit Projekt-Key herunterladen | LSprojects</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
body {
    background-color: rgb(26, 24, 24);
    color: white;
}
.btn  {
    background-color: rgb(161, 156, 156);
    color: white;
}
</style>
<script>
    function submit() {
        let code = document.getElementById(codeinput);
        window.location = "/codes/" + code + ".html"
    }
</script>


<body>
    <div class="vertical-center horizontal-center">
        <h1>Geben sie den Key hier ein:</h1>
        <div class="input-group mb-3 dark-backround">
            <button href="submit()" onclick="submit()" class="btn btn-outline-secondary" type="button"
                id="load">Laden</button>
            <input type="text" class="form-control" placeholder="Projekt-Key" id="codeinput" aria-label=""
                aria-describedby="load">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>


</html>

...zur Frage

OpenAI-API mit GPT4 eine Datei auslesen?

Hallo, ich würde gerne in JavaScript mit Node-JS, GPT4 eine einfache Textdatei schicken, die er dann lesen soll und mir den Inhalt zurückgibt. Sobald das funktionieren würde, würde ich dann auf meiner Website einen File-Upload machen, bei dem man dann .txt Dateien hochladen kann und diese weitergeschickt und ausgewertet werden. Wie gebe ich also eine Datei an die API? Wo muss sich die Datei befinden? Ist das mit dem File-Upload so umsetzbar?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen