Wieso funktioniert array.push() nicht?

Bei folgendem Code funktioniert die array.push-Funktion nicht.

let XArray = [];

function Xcoordinate() {
  for (let i = 0; i <= width; i+= 30) {
    XArray.push(i);
  }
}
//width ist die breite des Canvas

Das Array füllt sich nicht.

Ich arbeite mit p5.js.

Kann mir jemand helfen?

VG Finja

03.01.2023, 22:42

EDDIT: array.unshift klappt auch nicht

SerenityStar

05.01.2023, 08:06

Hast du schonmal geguckt welchen ausgabewert width vor Ausführung der schleife hat?

Finja27727

Fragesteller

05.01.2023, 10:06

ja es ist 25

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Heinzfred

03.01.2023, 23:36

Hallo,

Syntaktisch ist der Code fehlerfrei.

Die Ursache für das leere Array kann im Grunde zwei Ursachen haben:

Der Block der for-Schleife wird niemals ausgeführt. Ich habe zwar keinerlei Kenntnis über die beiden von Dir verwendeten Variablen width und groesse, gehe aber mal stark davon aus, dass keiner der beiden Operanden negativ ist und das Ergebnis kleiner 0 ist.
Du hast einfach vergessen, die Funktion Xcoordinate aufzurufen.

Eines verstehe ich dann aber doch nicht so ganz:

let value = i ;
XArray.push(value);

Wozu eine weitere Referenz auf die Variable i, wenn du das Array ohnehin um diesen Wert erweitern möchtest? Schreibe lieber folgendes:

XArray.push(i);

Finja27727

Fragesteller

04.01.2023, 09:46

Danke für die Tipps ich werde Mal den Code ein wenig anpassen

Finja27727

Fragesteller

04.01.2023, 18:10

was meinst du genau mit der for loop wird nicht audgeführt, in welchem fall würde er denn wohl ausgeführt ?

(width/groesse = 25)

regex9

04.01.2023, 18:58

@Finja27727

Die Schleife wird nur dann ausgeführt, wenn die Bedingung im Kopf zutrifft (die war im Übrigen heute morgen auch noch anders, jemand muss den Fragetext bearbeitet haben).

i <= width

Angenommen, width hätte den Wert -1. Dann wäre die Bedingung nicht erfüllt, da der Wert von i (0) weder kleiner, noch gleich -1 ist.

Da du schreibst, dass die Division 25 ergibt, sollte die Schleife jedoch einmal ausgeführt werden.

i = 0, i < 25 => true
- Schleifenkörper wird ausgeführt
- i += 30

i = 30, i < 25 => false
Schleifenlauf ist beendet

An der Stelle könnte man dennoch noch einmal nachhaken, ob die Division auch zum Zeitpunkt der Ausführung deiner Funktion dieses Ergebnis liefert. Das kannst du ja ziemlich leicht herausfinden, indem du dir den Wert einmal in der Browserkonsole ausgeben lässt.

function Xcoordinate() {
  console.log(width / groesse);
  // Schleife, etc. ...
}

Wenn der Wert nicht passt, wird die Funktion zum falschen Zeitpunkt aufgerufen bzw. die Variablen haben zu dem Zeitpunkt noch nicht den richtigen Wert zugewiesen bekommen.

Solltest du keine Konsolenausgabe bei Ausführung deiner Anwendung erhalten, muss man davon ausgehen, dass die Funktion Xcoordinate nie aufgerufen wird. Entweder, weil du nirgendwo einen Aufruf in dein Skript integriert hast oder weil ein Programmzweig, in dem sie aufgerufen werden sollte, nie ausgeführt wird.

Heinzfred

04.01.2023, 21:22

@Finja27727

@regex9 hat den Ablauf der for-Schleife schon gut veranschaulicht.

Die Definition der Variable i wird einmalig ausgeführt. Anschließend wird die Bedingung im zweiten Teil des Kopfes der for-Schleife ausgewertet. Evaluiert diese zu true, wird zunächst der Schleifenkörper ausgeführt. Anschließend wird in deinem Falle der Wert der Variable i um 30 addiert. Nun wird die Bedingung erneut überprüft und der Code im Schleifenkörper ausgeführt, wenn diese weiterhin true ist. Das geht solange weiter, bis die Bedingung nicht mehr true, sondern false ergibt.

In deinem Falle würde die for-Schleife also nur dann niemals ausgeführt werden, wenn die Variable width bereits im ersten Durchlauf kleiner 0 wäre.

Davon würde ich allerdings eher weniger ausgehen. Entweder die Funktion wird nicht aufgerufen, oder width ist gar nicht definiert, hat also den Wert undefined.

Überprüfe auch das in der Konsole:

function Xcoordinate()
{
  console.log(width);
  // for-Schleife
}

Xcoordinate();

Finja27727

Fragesteller

04.01.2023, 22:22

@Heinzfred

OK vielen Dank

width ist eine festgelegte variable in der p5-library und ist immer die breite des Canvas.

ich werde also überprüfen, ob ich die funktion aufgerufen habe.

Finja27727

Fragesteller

04.01.2023, 22:23

@regex9

Vielen Dank, für deine Gute ausführung über den For loop ich denke ich habe es jetzt besser verstanden

10tel

03.01.2023, 23:01

Bist du sicher, dass

let XArray = [];

innerhalb der function bekannt ist? Ich würde

var XArray = [];

setzen.

Heinzfred

03.01.2023, 23:22

Stellt in JavaScript kein Problem dar. Variablen bzw. Konstanten, die im globalen Gültigkeitsbereich definiert sind, sind in sämtlichen Funktionen und Blöcken auch sichtbar. Davon mal abgesehen sind die var-Zeiten glücklicherweise vorbei ;-)

Ähnliche Fragen

was ist hier falsch gelaufen?

<!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>Rocket vs Aliens</title>
  <style>
    canvas {
      background-color: gray;
    }
    
  </style>
  <script>
    let KEY_SPACE = false;
    let KEY_UP = false;
    let KEY_DOWN = false;
    let canvas;
    let ctx;
    let backgroundImage = new Image();
    let rocket = {
      x: 100,
      y: 200,
      width: 200,
      height: 80,
      src: 'img/rocket.png'
    };
    let spaceship = {
      x: 500,
      y: 200,
      width: 100,
      height: 40,
      src: 'img/spaceship.png'
    };
    document.onkeydown = function(e) {
      if (e.keyCode ==32) { // Leertaste gedrückt
        KEY_SPACE = true;
      }
      if (e.keyCode ==32) { // unten gedrückt
        KEY_SPACE = true;
      }
    
      if (e.keyCode ==38) { // Oben gedrückt
        KEY_UP = true;
      }
    }
    document.onkeyup = function(e) {
      if (e.keyCode ==32) { // Leertaste losgelassen
        KEY_SPACE = false;
      }
    
      if (e.keyCode ==38) { // oben losgelassen
        KEY_UP = false;
      }
      if (e.keyCode ==40) { // unten losgelassen
        KEY_DOWN = false;
      }
    }
    function startGame () {
      canvas = document.getElementById('canvas');
       ctx = canvas.getContext('2d');
      loadImages();
      draw();
      // calculate
    }
    function loadImages() {
      backgroundImage.src = 'img/background.png';
      rocket.img = new Image();
      rocket.img.src = rocket.src;
      spaceship.img = new Image();
      spaceship.img.src = spaceship.src;
    }
    function draw() {
      ctx.drawImage(backgroundImage, 0, 0);
      ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.widht, rocket.height);
      
      requestAnimationFrame(draw);
    }
  </script>
</head>
<body onload="startGame()">
<canvas id="canvas" width="720" height="480"></canvas>
</body>
</html>

...zur Frage

Canvas wird nicht angezeigt?

Guten Tag, ich versuche gerade eine JS Canvas resposnive zu machen und habe dabei einen div conatiner benutzt. Alles hat funktioniert außer das Skalieren der Canvas.

Ich dachte es liegt vielleicht an dem div Container, also habe ich diesen zu einem canvas tag geändert.
Jetzt wird der Inhalt der Canvas gar nicht angezeigt. In der Konsole sthet zwar, dass dies vorhanden ist, aber man sieht keinen Inhalt.

Woran liegt das?

Grüße Alex

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

Wie kann ich in p5.js per Mausklick jedes Mal einen anderen Buchstaben anzeigen lassen?

Das ist zur Zeit mein Code:

function setup() {
  createCanvas(700, 700,);
  background(20);
  frameRate(7);
}

function draw() {
  translate(width / 2, height / 2);
  rotate(mouseX, mouseY);
  noFill();
  stroke(255);
  textFont("Helvetica");
  textSize(400);
  textAlign(CENTER, CENTER);
  text("D", 0, 0);
}

function mousePressed() {
  setup();
}

Ich bin eigentlich zufrieden damit. Er ist sehr einfach. Ich würde nur gerne per Mausklick jedes Mal einen anderen Buchstaben anzeigen lassen.

Ich habe es schon geschafft, dass der Sketch per Mausklick von vorne anfängt, aber jetzt würde ich noch gerne mehrere Buchstaben haben. Sprich, dass ich eine Variable oder Array erstelle. Ich weiß nicht ganz, was ich da dann brauche und dort soll das ganze Alphabet zur Auswahl stehen und per Mausklick bekomme ich dann jedes Mal einen anderen Buchstaben zu sehen (aber immer nur einen).

...zur Frage

Wie kann ich JavaScript-Code in Processing-Code umschreiben?

Hallo,

also ist es möglich, einen Java-Code in einen Processing-Code umzuschreiben oder besser gesagt, könnte jemand helfen? Ich bin noch sehr am Anfang, habe aber einen Code gefunden, der mir sehr gut gefällt und mit dem ich gerne ein bisschen herumprobieren würde. Nur funktioniert er eben in Processing nicht und mit Java kenne ich mich noch weniger aus, darum würde ich ihn gerne umschreiben.

So sieht das Ganze aus:

let shapes = [];
let colors = ["#ffc857", "#e9724c", "#c5283d", "#481d24", "#255f85", "#a5bccc"];

function setup() {
  createCanvas(1000, 800);
  rectMode(CENTER);
  translate(width / 2, height / 2);
  scale(1.4);
  rotate(random(PI));
  translate(-width / 2, -height / 2);
  background(random(colors));
  let seg = int(random(25, 45));
  let w = width / seg;

  for (let i = 0; i < seg; i++) {
    for (let j = 0; j < seg; j++) {
      let x = i * w;
      let y = j * w;

      if ((i + j) % 2 == 0) {
        shapes.push(createVector(x + w / 2, y + w / 2, w * 2.01));
      }
    }
  }

  shuffle(shapes, true)
  noStroke();

  for (let s of shapes) {
    let rnd = int(random(4));
    shuffle(colors, true);
    push();
    translate(s.x, s.y);
    fill(random(colors));

    if (rnd == 0)
      circle(0, 0, s.z);
    else if (rnd == 1)
      square(0, 0, s.z);
    else if (rnd == 2) {
      let n = int(random(1, 5));
      
      for (let i = 0; i < n; i++) {
        let ss = map(i, 0, n, s.z, 0);
        fill(colors[i]);
        circle(0, 0, ss);
      }
    }
    else if (rnd == 3) {
      let n = int(random(1, 10));

      for (let i = 0; i < n; i++) {
        let ss = map(i, 0, n, s.z, 0);
        fill(colors[i % colors.length]);
        square(0, 0, ss);
      }
    }

    pop();
  }
}

function draw() {
}

...zur Frage

Sprung vom letzten Array Element in den Ersten?

Hallo,

ich habe folgende Funktion:

function getNextWeekday(day) {
  let i = 0;
  while (i < weekdays.length) {
    if (day == weekdays[i]) {
      console.log(weekdays[i+1]) ;
      return weekdays[i+1];
    }
    i = i + 1
  }
  console.log("Error!");
  return null;
}

Wenn man getNextWeekday("Monday") eingibt, wird Tuesday ausgegeben etc. Wenn ich aber Sonntag eingebe, sollte Montag herauskommen. Weiss jemand was ich an meiner Zählervariable abändern muss, damit das funktioniert?

...zur Frage

HTML Canvas: Wo ist mein Fehler?

HTML:

<canvas id="screen" style="width:200px; height:200px;"></canvas>

JS:

const canvas = document.getElementById("screen");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(0, 0, 80, 80);

Das sollte ein grünes Quadrat malen. Jedoch bekomme ich ein grünes Rechteck, das doppelt so hoch ist wie breit.

Warum?

Was mache ich falsch / Was habe ich übersehen?

Hier ein JSFiddle: https://jsfiddle.net/7cenmwh5/2/

...zur Frage

JS - Wie kann ich die Höhe eines Rechtecks mit einem Schieberegler / Slider (range) im Canvas vergrößern und verkleinern?

Hallo,

meine Code sieht gerade so aus. Es funktioniert aber nicht. Was müsste ich hier ändern?

<hmtl>
  <head>
    <title>hi guys</title>
  </head>
  <body>
    Schieberegler:
    <br>
    <canvas id="canvas" height='400' width='600'></canvas>
  </body>
  <br>
  <input id='slider' type='range' max="100" min="0">
  <p id='outpRadius'> 50 </p>
  <input type='color'>
  <hr>
  <script>
    'use strict';

    window.onload = function() {
      var slider = document.getElementById('slider')
      var output = document.getElementById('outpRadius');
      slider.addEventListener('input', aendereRadius, false)

      function aendereRadius() {
        output.innerHTML = slider.value;
        console.log(output.innerHTML);
      }

      var canvas = document.getElementById('canvas');
      canvas.style.backgroundColor = 'yellow';
      var ctx = canvas.getContext('2d');
      ctx.fillRect(50,50,50,output.innerHTML);
    }
  </script>
</html>

...zur Frage

wie kann ich in javasccript auf einen array in einem array zugreifen?

wie kann ich in javasccript auf einen array in einem array zugreifen?

Hier ein Beispielcode:

let myArray = [[1,2],[1,2],[1,2]];

Wie kann ich jetzt auf einen Wert davon zugreifen?

ich selbst habe es folgendermaßen versucht:

// auf den wert [0] in myArray[0] zugreifen:
console.log(myArray[0][0]);

dieser code hat jedoch nicht funktioniert und in der console "undefinied" angezeigt.

Wie kann ich dann auf den Wert zugreifen?

Vielen Dank im Voraus für alle Antworten. :-)

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

HTML CSS Problem, Kann wer helfen?

Ich habe vor ein Spiel auf HTML responsiv zu machen. Ich würde es gerne so machen, dass der Button oben links neben dem Canvas angezeigt wird, doch erscheint der unten am Rand. Ich weiß nicht wie ich es ändern kann. Bei der Console habe ich geguckt und das Canvas (width: 320px) nimmt den ganzen Bereich im Feld ein (Im Bild der blaue Bereich). Kann mir wer von euch helfen? Danke im voraus.

Kann mir auch jmd sagen, ob es extra ein deutsches Forum gibt, wo ich fragen wie diese stellen kann?

<!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>Tetris</title>
    <link rel="icon" href="css/img/galaxsite/galaxsiteIcon.png">
    <style>
        .gameField {
            max-width: 50%;
            margin: 25px auto;
            background-color: #151618;
            box-shadow: 20px 20px 15px black;
            padding-top: 2%;
            padding-bottom: 2%;
            padding-left: 2.5%;
            padding-right: auto;
        }

        canvas {
            background-color: #000000;
            border: 3px solid #a60cf0;
            width: clamp(50px, 50%, 320px);
        }


        .buttonStart {
            background-color: #a60cf0;
        }
    </style>
</head>
<body>
    <div class="gameField">
        <canvas class="canvas" width="320px"  height="640px    </canvas>
        <button class="buttonStart">Start</button>
    </div>
</body>
<script type="text/javascript" src="js/tetris.js" defer></script>
</html>

...zur Frage

JavaScript Canvas Bilder werden Komisch angezeigt, Lösung?

Hallo,

ich bastele gerade mit dem HTML5 Canvas herum und möchte dort mit JavaScript ein Bild anzeigen, dies Funktioniert auch allerdings werden sie sehr komisch angezeigt, meist zu groß oder verschwommen hier der JavaScript code:

"function drawImage(url) {

var img = new Image();

img.onload = function () {

ctx.drawImage(img,10, 10, 35, 35);

}

img.src = url

hier habe ich schon mit den drawImage Parametern rumgespielt um es anzupassen allerdings kam kein gutes Ergebnis heraus...

Hier noch die canvas daten: width: 900px; height: 700px;

diese habe ich mit CSS angegeben.

Schonmal vielendank für eure Hilfe!

...zur Frage

Node.js: Wie kann ich den push-Fehler verhindern?

Code:

function file_tree(dir1, files1) {
 const filesArray = fs.readdirSync(dir).filter(file => fs.lstatSync(dir+file))
 for (let i = 0; i < filesArray.length; i++) {
  
 // Use stat() method
 fs.stat(dir+filesArray[i], (err, stats) => {
  if (!err) {
   if (stats.isDirectory()) {
    dir1.push(filesArray[i]);
   }
   else if (stats.isFile()) {
    files1.push(filesArray[i]);
    
   }
 }
 else
   throw err;
});
}
console.log(files1)
return dir1, files1
}
var dir1 = new Array();
var files1 = new Array();
dir1[n] = new Array();
files1[n] = new Array();
dir, files = file_tree(dir1, files1)
console.log(dir)
console.log(files);

Ausgabe:

undefined
[]
[]
    files1.push(filesArray[i]);
        ^
TypeError: Cannot read properties of undefined (reading 'push')
  at <dir>.js:32:16
  at FSReqCallback.oncomplete (node:fs:201:5)
Node.js v20.5.1

Frage:

Wie kann ich den push-Fehler verhindern?

Ich habe es so versucht, doch:

var dir1 = new Array();
var files1 = new Array();
dir1[n] = new Array();
files1[n] = new Array();

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen