Wie entsteht bei diesem Code der Fehler?

const stars = document.querySelectorAll(".points")

window.addEventListener("mousemove", function(event) {

stars.forEach(function(e) {

let marginLeft = parseFloat(e.style.marginLeft.replace("vw", ""));

let sum = ((event.clientX / window.innerWidth * 100) - marginLeft) / 10 + "vh";

e.style.marginLeft = sum;

})

Es gibt mehrere Divs mit der Klasse "points" die, wenn sich der Mauszeiger bewegt, ihre marginLeft ändern sollen. Eigt soll durch die Rechnung so am Ende bei jedem div eine andere veränderte marginLeft herauskommen - Führt man den Code aus wird dann zwar marginLeft verändert aber ist bei allen Elementen gleich hoch, wieso?

2 Antworten

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, CSS, JavaScript

11.05.2023, 00:55

Eigt soll durch die Rechnung so am Ende bei jedem div eine andere veränderte marginLeft herauskommen

Wie kommst du darauf?

Welcher Teil der Rechnung unterscheidet sich denn je Element?

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

The2nd

Fragesteller

11.05.2023, 18:29

Die jeweilige marginLeft - oder etwa nicht?

MrAmazing2

11.05.2023, 18:33

@The2nd

Kann sein, kann aber auch nicht sein.

Den liest du aus einem Style aus, welchen du in der Frage nirgends ansprichst oder herzeigst 🤷🏻‍♂️ Wenn du überall den selben marginLeft per Style gesetzt hast, dann käme da auch für jedes Element dasselbe raus.

bubbIes

10.05.2023, 22:25

parseFloat(e.style.marginLeft.replace("vw", ""))

Gibt immer denselben Wert zurückgibt, da die

marginLeft

Eigenschaft der Elemente mit der Klasse

points

im CSS-Stil definiert sein muss.

MrAmazing2

11.05.2023, 00:52

Und zwar inline, weil .style nur das Inline-CSS auslesen kann, nicht aber beispielsweise CSS-Eigenschaften, die mittels einer CSS-Datei oder eines <style>-Tags gesetzt wurde.

The2nd

Fragesteller

11.05.2023, 18:30

@MrAmazing2

Wenn mich nicht täuscht ist das inline gesetzt, marginLeft jedes einzelnen Elements wird vorher über js random generiert und hinzugefügt

bubbIes

11.05.2023, 19:02

@The2nd

const stars = document.querySelectorAll(".points")

window.addEventListener("mousemove", function(event) {

stars.forEach(function(e) {

let offsetLeft = e.offsetLeft;

let sum = ((event.clientX / window.innerWidth * 100) - offsetLeft) / 10 + "vh";

e.style.marginLeft = sum;

})

Hier wird die

offsetLeft

Eigenschaft jedes Elements verwendet, um seine tatsächliche linke Position relativ zum Elternelement zu berechnen, anstatt den

marginLeft

Wert zu extrahieren

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

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

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

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

Was mache ich falsch in JavaScript?

Ich will die Rotation einen 2D-Versors berechnen und dafür, will ich erstmal den Realteil ausrechnen.

Mein Problem ist: Es rechnet einfach nicht.

Was mache ich falsch?:

window.addEventListener('keydown', (event) => {
    if (event.keycode === '13') {
        return
    };
    function calculate (calculate)
}
)


function calculate (calculate) {
    let z_rotaited = document.getElementById('RotatedComplexversorZ');
    let Rez = document.getElementById('Re(z)');
    let Imz = document.getElementById('Im(z)');
    let Rotationangle = document.getElementById('Rotationangleindegree');
    let result = Math.sqrt(Rez ** 2 + Imz ** 2) * Math.cos(Rotationangle + Math.atan2(Rez, Imz) * 180 / Math.PI);
    z_rotaited = result;
}
function calcAngleDegrees(containerRez, containerImz) {
    return Math.atan2(containerRez, containerImz) * 180 / Math.PI;
  }

(Wenn ich Enter drücke, soll die eine Funktion laufen, welche das rotierte z ausrechnet.
Die Funktion (mathematich gesehen) lautet:

z_{rotiert} = sqrt(Re(z)² + Im(z)²) * (phi + cos(arctan2(Re(z), Im(z))) i * sin(phi + arctan2(Re(z), Im(z))))
z = 2D-Versor
phi = der dazu adierte Winkel

Die Seite sieht so aus:

...zur Frage

divs kreisförmig anordnen?

Hi,

ich würde gerne einige divs kreisförmig anordnen und habe auch eine pfiffige Rechnung gefunden. Doch mir fehlt als Anfänger noch irgendwie das Abstraktionsvermögen, um die Formel auch tatsächlich für den Code anwenden zu können. Die Idee: // N Gesamtanzahl der Elemente, n Laufindex, R Radius x[n] =R * cos(n/N * 2 * Math.Pi()) + M.x; y[n] =R * sin(n/N * 2 * Math.Pi()) + M.y;

Setze ich an "x" und "y" einfach die tags / Klassen / IDs und wie binde ich die Formel vernünftig in eine js Function ein? var a = function b () { Formel }

...zur Frage

Mit xhr Daten senden und mit PHP empfangen?

Hi,

ich versuche Daten per AJAX zu versenden.
Leider gelingt es mir nicht, die Daten mit PHP anzunehmen.

// Sammle alle Klassen
const words = document.querySelectorAll('.ocrx_word');
// Stelle ein leeres Array bereit
const datasBooks = [];
// Suche alle Wörter und packe sie in ein Array
 words.forEach((wordItems) => 
 {

    let word = wordItems.innerText;
        datasBooks.push(word);
   
});
// Go-AJAX
const  xhr = new XMLHttpRequest();
// Zielroute
xhr.open("POST", "actions/test.route.php", true);
// Antwort
xhr.onreadystatechange = function () 
{
    if (xhr.readyState==4 && xhr.status==200) 
    {
        console.log('xhr > Senden > ok');
    }
};
//Header
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
// Ciao 
xhr.send(datasBooks);

console.log(datasBooks);

In der Zielroute versuche ich:

$wordsInBook  = json_decode($_POST['datasBooks']);

Ich bekomme die Fehlermeldung:

<b>Warning</b>:  Undefined array key "datasBooks"

Nur, warum wird der Key nicht gefunden?

...zur Frage

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>

...zur Frage

addEventListener nacheinander für mehrere Elemente?

Hi,

ich versuche eine Art Notitzen-App zu coden. Es gibt also eine Seitenleiste in der die verschiedenen Notizen zu sehen sind und wenn diese angeklickt werden, soll der jeweilige Text in der großen textarea angezeigt werden. Bisher habe ich einen Zähler als Variable, der beim Hinzufügen einer neuen Notiz erhöht wird, so wird für jeden neuen Button eine eigene ID erstellt und ich speichere auch alle Notizen in einem Array und kann diese anzeigen lassen. Allerdings muss ich zu jedem Button ein onclick-Element mit der jeweiligen Notiz als Parameter hinzufügen, um sie anzeigen zu können. Das mache ich mit addEventListener. Aber wenn ich einfach document.getElementById(idNames[field]).addEventListener("click", function(){showNotice(toShow)}); verwende, funktioniert der Listener nur für die als letztes hinzugefügte Notitz, wenn ich idNames.forEach(element => document.getElementById(element).addEventListener("click", function(){showNotice(toShow);})) zeigen alle Button beim Klicken natürlich dieselbe Notiz an.

Weiß jemand, was in meinen Fall zu tun ist?

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

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

...zur Frage

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

...zur Frage

JavaScript Stoppuhr?

Das ist mein JavaScript-Code:

let startTime = new Date();
let timerHandle;

function Start() {
  if (startTime == null) {
    startTime = new Date();
    timerHandle = window.setInterval(updateTime, 10);
  }
  else {
    startTime = time;
    timerHandle = window.setInterval(updateTime, 10);
  }
}

function Stop() {
  window.clearInterval(timerHandle);
}

function Reset() {
  stop();
  startTime = new Date();
  updateTime();
  startTime = null;
}

function updateTime() {
  if (startTime == null) {
    let time = 0.0;
  }

  time = (new Date() - startTime) / 1000;
  let item = document.getElementsByTagName("h1")[0];
  item.innerHTML = time.toFixed(2) + " Sek.";
}

Der Fehler ist, wenn ich Start drücke und dann Stop und dann Start, dass bei irgendeiner großen Zahl weitergezählt wird.

Ich freue mich über Antworten.

Danke im Voraus.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen