Warum gibt mir innerHTML nur den letzten Wert der for loop aus?

Hi! Ich bin absoluter Javascript Laie.

Ich habe mir eine simple for-Schleife gebastelt und wollte den Wert von i in einem div ausgeben.

Leider wird immer nur der letzte Wert angezeigt.

Warum zeigt mir console.log(i) hier aber jeden Wert von i in der Konsole an?

for (i = 0; i < 10; i++) { 
    let myBlock = document.getElementById('myblock');
    console.log(i)
    myBlock.innerHTML = i;
}

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

MarcelSpelsberg

18.12.2020, 18:23

Das ist, weil du jedes mal inner HTML überschreibst und nur mit += hinzufügen kannst. In der Konsole wir das immer angezeigt da console.log() einen neuen Konsoleneintrag erstellt und in der Konsole werden alle neuen angezeigt. Also könntest du:

for (i = 0; i < 10; i++) { 
    let myBlock = document.getElementById('myblock');
    console.log(i)
    myBlock.innerHTML += i;
}

schreiben, da würde im <div id="myblock"> nachher stehen:

0123456789

Hoffe ich konnte helfen! :)

Woher ich das weiß:Hobby

Ähnliche Beiträge

Aus Div-Container Inhalt per JavaScript auslesen?

Hallöchen,

Ich hab einen Link, wenn ich da drauf klicke möchte ich dass dem div ein String hinzugefügt wird. Der Link wird folgender Masen erzeugt:

<a href="javascript:aktion()">Link</a>

weiter oben steht dann das javascript:

function aktion() { document.getElementById('abl').innerHTML = document.getElementById('abl').innerHTML + "\n" + "hinzugefügt";}

der Div sieht so aus:

Plan

</div>

wenn ich jetzt auf den Link klicke, steht in dem Div: undefined hinzugefügt

Woran liegt das?

LG Checker0408

...zum Beitrag

JavaScript: Schachbrett Schleifen?

Leute, bitte, ich brauche Hilfe, wer programmieren kann.

Ich habe es versucht, aber keine Ahnung warum, es funktioniert nicht.

Ich wäre sehr dankbar, wenn ich Tipps oder so hier bekommen würde.

Was fehlt? Was ist falsch?

JavaScript:

"use strict";

window.addEventListener("load", init);

let i;
let t;
let tr;
let td;

function init() {
  console.log("Fenster ist geladen");

  let btn = document.getElementById("btn");
  btn.addEventListener("click", btn_angeklickt);
}

function btn_angeklickt() {
  console.log("btn angecklickt");

  let zeilen = document.getElementById("zeilen").value;
  console.log(zeilen);

  let spalten = document.getElementById("spalten").value;
  console.log(spalten);

  let table = document.getElementById("bratan");
  
  for (i = 0; i < spalten.value; i++);
  {
    tr = document.createElement("tr");
    table.appendChild(tr);

    for (t = 0; t < zeilen.value; t++);
    {
      td = document.createElement("td");

      if (i % 2 == t % 2) {
        td.style.backgroundColor = colors[0];
        td.style.height = "60px";
        td.style.width = "60px";
      }
      else {
        td.style.backgroundColor = colors[1];
        td.style.height = "60px";
        td.style.width = "60px";
      }
    }
  }

  tr.appendChild(td);
}

let colors = ["#044272", "#80AB52"];

HTML:

  <label for="Anzahl">Zeilen</label>
  <input type="number" id="zeilen">
  <br><br>
  <label for="Anzahl">Spalten</label>
  <input type="number" id="spalten">
</form>
<br>
<button type="button" id="btn" value="btn">erstelle Schachbrett</button>
<table id="bratan"></table>

...zum Beitrag

Mit JavaScript innerhtml einen Wert in einem Tag mit += addieren, funktioniert nicht?

Ich habe folgenden HTML Code...

<span id="300smartphoneQualiHaustiervideo">8</span>

In dem span-Tag befindet sich die Zahl 8. Nun möchte ich, dass die Zahl subtrahiert wird. document.getElementById("300smartphoneQualiHaustiervideo").innerHTML -= 4; Das Ergebnis ist nun 4, also hat es funktioniert. Später wird der span-Tag wieder addiert. document.getElementById("300smartphoneQualiHaustiervideo").innerHTML += 4; Was nun rauskommt ist aber nicht 8 sondern 44. Warum kann man subtrahieren aber nicht addieren. Wie kann ich das Problem lösen?

...zum Beitrag

JavaScript - document.getElementById für Class?

var x = document.getElementById('x').innerHTML;

Wie funktioniert diese Funktion, wenn man eine Klasse ansprechen will?

...zum Beitrag

Javascript for-of schleife ergebnise mit einander rechnen?

Hey,
folgendes: Ich möchte einen notendurchschnitt berechner bauen. Nun habe ich folgendes Problem: Ich trage die Noten in eine Tabelle ein. Mit einer for-of schleife tu ich drüber etarieren. Nur jetzt weiß ich nicht, wie ich die ganzen Zahlen zusammen rechnen soll.

Hier der Code:

let noten = e.target.parentNode.querySelectorAll(".noten");

for(let note of noten.values()){

if(note.value != 0){

console.log(note.value);

// Problem: Alle Noten miteinander verrechnen

}

...zum Beitrag

JavaScript Array nach gleichen durchsuchen?

Hallo ist es möglich ein Array (ohne for Schleife) nach gleichen werten zu durchsuchen und diese in ein neues Array zu speichern

...zum Beitrag

JavaScript interval mehrmals aufrufen?

Hallo, ich habe das Problem, dass ich ein Interval mehrmals aufrufen möchte.

Jedoch kann ich immer nur eines abbrechen.

Ich hätte das Abbrechen so versucht:

clearInterval(interval + thema);

Funktioniert leider nicht.

                var zahl = 0;
                var intervalphp = setInterval(erhoeheZahl, 100, 90, 'php');
                var intervalcss = setInterval(erhoeheZahl, 100, 100, 'css');


                function erhoeheZahl(max, kreis, thema) {
                    zahl++;
                    console.log(zahl);
                    document.getElementById(kreis).innerHTML = zahl;
                    document.getElementById(kreis + 'kreis').style.background = `conic-gradient(#712e1e ${zahl * 3.6}deg, #ffd5af 0deg)`;


                    if (zahl >= max) {
                        clearInterval(interval + thema);
                    }
                }

Danke im voraus!

...zum Beitrag

Javascript - Note berechnen?

Schönen guten Abend,

ich versuche mir selber JS beizubringen und merke, dass es doch nicht ganz so einfach ist. Ich versuche ein Rechner zu programmieren, mit welche man die Zeugnisnote berechnen kann. Leider habe ich Probleme die Werte die ich ins Input-Feld eingebe in JS aufzurufen und zu verarbeiten. Würde mir jemand diesbezüglich helfen?

Bitte verzichtet darauf mir zu sagte wie einfach das sei und wie schlecht ich bin, ich will mich weiter motivieren mich weiterzubilden und mir nicht erzählen lassen wie einfach oder dass ich es doch lassen solle.

Mein JS

function berechnung(){
    var at = document.getElementById("allgemein")
    var kl = document.getElementById("klausur")
    document.getElementById("ergebnis").innerHTML = kl;
    allgemein+klausur
    console.log
}

Mein HTML

<div class="section">
            <p><h2>Notenrechner</h2></p>

            <input type="int" id="allgemein"> <br>
            <input type="int" id="klausur">
            <button onclick="berechnung()">Note berechnen</button>
            <p id=ergebnis></p>


        </div>

...zum Beitrag

Wie muss ich diesen JavaScript-Code lesen (Schleifen)?

Hallo, ich befasse mich gerade mit Schleifen in JavaScript und ich verstehe das Prinzip ehrlich gesagt nicht wirklich, wie ich diesen Code in verständliche Sprache übersetze: Ich verstehe das Grundprinzip und bin mit Schlüsselwörtern wie continue oder break vertraut, aber ich verstehe nicht, wie ich die for-Schleife lesen muss: Was heißt let i = 0 zum Beispiel? Worauf bezieht sich die 0, auf den Index? Danach kommt ja die Bedingung i < numbers.length, was ist in dem Fall numbers.length, das Array? Und anschließend der Inkrementierungsausdruck, also erhöhe um 1.



const numbers = [2, 4, 56, 22, 65, 2, 54, 88, 29];         
console.log("Vor der Schleife");                           
for (let i = 0; i < numbers.length; i++) {                 
    const number = numbers[i];                             
    if (number % 2 === 1) {                                
        console.log("Ungerade Zahl gefunden.");           
        continue;                                             
    }                                                      
    console.log(number);                                   
}
console.log("Nach der Schleife.");

...zum Beitrag

JS - Warum funktioniert der Button nicht Richtig?

Ich wollte ein simples Spiel mit JS programmieren und wollte einen Refresh des Bildschirms einfügen. An sich funktioniert das auch, jedoch reagiert der Button nicht immer. Je schneller der Refresh erfolgt, desto schlechter Funktioniert der Button. Kann mir da vielleicht jemand helfen?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="miner.css" rel="stylesheet">
    <script src="miner.js"></script>
</head>
<body>
    <div class="monitor" id="monitor">
        <h1>Mine Tycoon</h1>
        <div>Mines: <font id="minesCounter">0</font></div><br>
        <div id="buyMineButton">
            <p class="button" onclick="buyMine()">Buy mine Cost: <font id="minesPrice">1</font></p>
        </div>
    </div>
</body>
</html>

body{
    background-color: #393939;
    color: #ffffff;
}


h1{
    text-align: center;
}


.button{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid red;
    outline-offset: 4px;
    text-align: center;
}
.buttonGreen{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid green;
    outline-offset: 4px;
    text-align: center;
}

var money = 100;


var mines = 0;
var minesPrice = 1;
var miners = 0;


var coal = 0;
var copper = 0;
var iron = 0;
var cobalt = 0;
var gold = 0;
var platinum = 0;
var diamond = 0;


var reload = 10;


function buyMine(){
    mines++;
    money -= minesPrice;
    minesPrice = minesPrice*2;
}


function loop(){
    
        setInterval(function(){
            refreshScreen();
        },1000/reload)
    
}


function refreshScreen(){
    minesCounter.innerHTML = mines;
    if(money < minesPrice){
        document.getElementById("buyMineButton").innerHTML = "<p class='button'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }else{
        document.getElementById("buyMineButton").innerHTML = "<p class='buttonGreen' onclick='buyMine()'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }
    document.getElementById("minesPrice").innerHTML = minesPrice;
}


loop();

...zum Beitrag

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.

...zum Beitrag

Gibt es einen weg das wider zu entschlüsseln?

ich habe auf der Seite https://obfuscator.io meinen JavaScript code verschlüsselt.

kann ich vom verschlüsselten code wieder zurück zum javascript code, wenn ja wie?

mein Code:

function be() {
    let eingabe = document.getElementById('password').value;
    if (eingabe == 'das ist gut') {
        re();
    } else {
        alert('Falsches Passwort');
    }
}

function re() {
    let feld = document.getElementById('pas');
    feld.remove();
}

function lock() {
    document.getElementById('bod').innerHTML += `<div class="pass" id="pas">
    <div class="pass-1">
        <div class="pass-2 pass-3">
            <h2>Passwort eingeben um fortzufahren</h2>
        </div>
        <div class="pass-2">
            <input type="password" id="password" placeholder="Passwort eingeben">
        </div>
        <div class="pass-2">
            <button class="pass-4" onclick="be()">Betätigen</button>
        </div>
    </div>
</div>`
}

...zum Beitrag

Kann man ein Array in Javascript mit werten aus einem For Loop befüllen?

Frage steht oben freue mich über Antworten : )

...zum Beitrag

JavaScript: Wie kann ich ein Array ohne Kommas ausgeben?

Also,

ich habe einen Array mit mehreren Strings, welche ich in HTML. Wie kann ich die Ausgabe ohne Kommas gestalten?

Beispiel:

var meinArray = ["string1 ", "string2"]
document.getElementById("wort").innerHTML = meinArray;

HTML AUSGABE >> string1 ,string2

Wie bekomme ich das Komma weg? Im Array können auch mehr als nur 2 Werte enthalten sein.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen