Webentwicklung – die neusten Beiträge

Wordpress Astra Customizer in Teilen resetbar?

Hallo,

Ich habe den Auftrag, für jemanden eine Webseite zu erstellen. Diese wird in WordPress erstellt und dabei wird das "Astra" Theme (Astra Pro) verwendet. Seit einiger Zeit habe ich ein gewisses Problem beim Customizer im Bereich "Header" oder "Footer", bei denen ich bestimmte Elemente (weiß leider nicht wie man die korrekt benennt) wie "Copyright" oder "HTML 1" "HTML 3" nicht mehr bearbeiten kann. Diese Elemente müssten auch mit einem CSS und PHP verknüpft sein.

Mit "nicht mehr bearbeiten" meine ich, dass diese Elemente zwar auf der Webseite vorhanden sind, ich aber deren Inhalt, die Position usw. nicht mehr im Customizer bearbeiten kann. Zudem hängt sich das Customizer-Interface auf, wenn ich jene Elemente anwähle, und ich muss den Customizer neu starten (Strg+R).

Ich habe Zugriff auf den zugrunde liegenden Dateimanager der Webseite (wp-functions etc.), allerdings bin ich in diesem Bereich neu und weiß nicht, wo ich suchen muss. Ich frage, wie ich am besten vorgehen sollte, um das Problem analytisch zu lösen. Im Idealfall muss ich nicht auf ein halbjähriges Backup zurückgreifen, da ich befürchte, vieles dann neu machen zu müssen. Es wäre toll, wenn ich das Problem so lösen könnte.

Ich habe bereits verschiedene Ansätze versucht (Backup-Dateien mit den aktuellen verglichen), bisher jedoch erfolglos, da ich in diesem neuen Terrain tappe und nicht richtig weiß, wo ich suchen soll. Auch ein Blick mit dem Developer Tool in Microsoft Edge hat mir bisher nicht verraten (zumindest augenscheinlich), wo ich die zugrunde liegenden Dateien/Skripte besagter Elemente dateihierarchisch finden kann.

Ich gehe davon aus, dass das Problem vermutlich nicht am Customizer liegt, da ich in der Vergangenheit auch schon durch das Anpassen dieser Elemente das Interface lahmgelegt habe (damals mit Backup gelöst, irgendwann mal vergessen und nun den Mist in der aktuellen Version).

Ich kenne mich relativ "gut" mit anderen Programmiersprachen (C++, C#...) aus, aber mit CSS und HTML bin ich noch nicht so vertraut. Möchte dies anmerken, da ich mir auch einen tendenziell technisch anspruchsvolleren Lösungsansatz, wenn erforderlich, zutrauen würde.

Ich bedanke mich schon einmal herzlich,

Alex

Homepage, HTML, Webseite, CSS, WordPress, PHP, Webentwicklung, Wordpress Theme

Wieso geht der Code nicht?

Hallo

Ich möchte mit js ein Programm bauen, welches meinen Körper erkennt und dort drauf dann ein T-Shirt-Modell legt. Also so eine virtuelle Garderobe quasi. Wieso geht der Code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Try-On Final</title>
<style>
 body { margin: 0; overflow: hidden; }
 #webcam {
  position: absolute;
  transform: scaleX(-1);
  opacity: 0.5;
  z-index: 1;
 }
 #output {
  position: absolute;
  z-index: 2;
 }
</style>
</head>
<body>
<video id="webcam" autoplay playsinline></video>
<canvas id="output"></canvas>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script>
const video = document.getElementById('webcam');
const output = document.getElementById('output');
let net, scene, camera, renderer, shirt;
let bodyPosition = { x: 0, y: 0, width: 0, height: 0 };
async function setupWebcam() {
 try {
  const stream = await navigator.mediaDevices.getUserMedia({
   video: {
    width: { ideal: 640 },
    height: { ideal: 480 },
    facingMode: 'user'
   }
  });
  video.srcObject = stream;
  
  return new Promise(resolve => {
   video.onloadedmetadata = () => {
    output.width = video.videoWidth;
    output.height = video.videoHeight;
    resolve();
   };
  });
 } catch (error) {
  console.error('Webcam error:', error);
  alert('Bitte Webcam-Zugriff erlauben!');
 }
}
function initThreeJS() {
 scene = new THREE.Scene();
 camera = new THREE.PerspectiveCamera(
  60,
  output.width / output.height,
  0.1,
  1000
 );
 camera.position.set(0, 0, 2);
 renderer = new THREE.WebGLRenderer({
  canvas: output,
  alpha: true,
  antialias: true
 });
 renderer.setClearColor(0x000000, 0);
 // Beleuchtung
 const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
 scene.add(ambientLight);
 const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
 directionalLight.position.set(0, 2, 5);
 scene.add(directionalLight);
 loadShirtModel();
}
async function loadShirtModel() {
 const loader = new THREE.GLTFLoader();
 try {
  const gltf = await loader.loadAsync('tshirt_model.glb');
  shirt = gltf.scene;
  
  // Material-Anpassung
  shirt.traverse(child => {
   if (child.isMesh) {
    child.material = new THREE.MeshPhongMaterial({
     color: 0xffffff,
     transparent: true,
     opacity: 0.9,
     depthWrite: false
    });
   }
  });
  shirt.scale.set(0.3, 0.3, 0.3);
  scene.add(shirt);
  console.log('T-Shirt Modell geladen');
 } catch (error) {
  console.error('Modellfehler:', error);
  addFallbackCube();
 }
}
function addFallbackCube() {
 const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
 const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
 shirt = new THREE.Mesh(geometry, material);
 scene.add(shirt);
}
function calculateBodyPosition(segmentation) {
 const data = segmentation.data;
 let minX = Infinity, maxX = -Infinity;
 let minY = Infinity, maxY = -Infinity;
 for (let y = 0; y < segmentation.height; y++) {
  for (let x = 0; x < segmentation.width; x++) {
   if (data[y * segmentation.width + x] === 1) {
    minX = Math.min(minX, x);
    maxX = Math.max(maxX, x);
    minY = Math.min(minY, y);
    maxY = Math.max(maxY, y);
   }
  }
 }
 if (minX !== Infinity) {
  bodyPosition = {
   x: (minX + maxX) / 2,
   y: (minY + maxY) / 2,
   width: maxX - minX,
   height: maxY - minY
  };
 }
}
function updateShirtPosition() {
 if (!shirt) return;
 // Koordinatenumrechnung
 const x = (bodyPosition.x / output.width - 0.5) * 2;
 const y = -(bodyPosition.y / output.height - 0.5) * 2;
 
 shirt.position.set(x, y, 0);
 
 // Skalierung basierend auf Körpergröße
 const scaleFactor = bodyPosition.height / output.height * 2;
 shirt.scale.set(scaleFactor, scaleFactor, scaleFactor);
}
async function detectBody() {
 try {
  // Ganzkörper-Segmentierung
  const segmentation = await net.segmentPerson(video, {
   segmentationThreshold: 0.7,
   internalResolution: 'high',
   maxDetections: 1
  });
  calculateBodyPosition(segmentation);
  updateShirtPosition();
  // Rendering
  const ctx = output.getContext('2d');
  ctx.clearRect(0, 0, output.width, output.height);
  renderer.render(scene, camera);
  requestAnimationFrame(detectBody);
 } catch (error) {
  console.error('Detektionsfehler:', error);
 }
}
(async () => {
 await setupWebcam();
 net = await bodyPix.load({
  architecture: 'ResNet50',
  outputStride: 32,
  quantBytes: 2
 });
 initThreeJS();
 detectBody();
})();
</script>
</body>
</html>

Freundliche Grüsse

HTML, Webseite, CSS, JavaScript, HTML5, Code, Datenbank, Programmiersprache, Webentwicklung, Frontend

DESKTOP vs. SMARTPHONE?

Hallo zusammen. Ich kriege mein Problem seit Wochen nicht gelöst trotz offiziellen Support daher noch mal die Frage anders formuliert. 

Meine WordPress Webseite: https://mecker-ecke.com/ hat massive Unterschiede in der Ausführung von Links auf dem Smartphone. Auf dem Desktop funktioniert alles perfekt, nur auf dem Smartphone geht die "Suche" und das Anklicken von "Letzte Beiträge" nicht und springt beim Anklicken immer wieder auf die Startseite. ... und das seit Wochen.

- Caches und Cookies wurden mehrere mal gelöscht 

- Verschiedene Browser wurden verwendet 

- Unterschiedliche Smartphones wurden verwendet 

- Ich habe alle Plugins, ausser dem ASGAROS Forum, deaktiviert und es gab keine Unterschiede

- ... und einiges mehr.

Hier ein Beispiel wie die Links ausgeführt und es hier ein und derselbe Link ist und der erste logischerweise nicht gefunden werden kann:

SMARTPHONE: https://mecker-ecke.com/#postid-202

WEBSEITE: https://mecker-ecke.com/forum/topic/alice-weidel-uebernnacht-verwehrt/

https://mecker-ecke.com/forum/topic/alice-weidel-uebernnacht-verwehrt/#postid-202

Ich tippe auf die wp-options wo ein Eintrag steht, der bei einer Plugintestinstallation für rediretcion von URL's installiert und wieder gelöscht wurde. N.b. Ich hatte dort den gleichen Effekt auf dem Desktop, aber schlimmer - meine ich!

Weiss jemand, wie so ein Effekt zustande kommt und wenn es nur ein kleiner Hinweis ist?

Smartphone, Forum, Desktop, Webseite, WordPress, URL, Android, Fehlerbehebung, Link, Webentwicklung, Wordpress Plugin

(PHP-Script) Wieso funktioniert das einmal und einmal nicht?

Hab mal eine Frage zu einer Formular-PHP-aus-einer-json-Datei-auslese-und-wieder-eintrag Funktion, die ich versuche genauer zu verstehen. Genauer gesagt komm ich da an einer Stelle nicht weiter (weil sich Teile der Funktion scheinbar komplett willkürlich verhält!)

Also wenn ich in PHP eine Funktion in der Struktur hier habe:

if ($_SERVER["REQUEST_METHOD"] == "POST") {
   $params = [
   "p1" => isset($_POST['p1']) ? $_POST['p1'] : null,
   "p2" => isset($_POST['p2']) ? $_POST['p2'] : null,
   "p3" => isset($_POST['p3']) ? $_POST['p3'] : null,
       "p4" => isset($_POST['p4']) ? $_POST['p4'] : null,
   // A_settings
       "P5" => [
           "SP1" => $_POST['P1'],
           "SP2" => $_POST['P2'],
       ],
   ];

und der Inhalt der auszulesenden json Datei so aussieht:

{
   "p1": "antwort1",
   "p2": "antwort2",
   "p3": "antwort3",
   "p4": "antwort4",
   "self": {
       "P5": {
           "SP1": antwort5,
           "SP2": antwort6
       }
   }
}

klappt scheinbar alles hervorragend. Die Parameter werden gefunden und nach dem Absenden des Formulars korrekt überschrieben.

Wenn ich allerdings wie im folgenden Beispiel etwas mehr Parameter hinzufüge wie in dieser Struktur hier und für die Benennung etwas längere Namenschemen verwende:

if ($_SERVER["REQUEST_METHOD"] == "POST") {
   $params = [
      /// calculation nr1:
      "Self.P1" => isset($_POST['Self.P1']) ? $_POST['Self.P1'] : null,
      "Self.P2" => isset($_POST['Self.P2']) ? $_POST['Self.P2'] : null,
      "Self.P3" => isset($_POST['Self.P3']) ? $_POST['Self.P3'] : null,
      "Self.P4" => isset($_POST['Self.P4']) ? $_POST['Self.P4'] : null,
      .....
      "Self.P18" => isset($_POST['Self.P18']) ? $_POST['Self.P18'] : null,
      "Self.P19" => isset($_POST['Self.P19']) ? $_POST['Self.P19'] : null,
      "Self.P20" => isset($_POST['Self.P20']) ? $_POST['Self.P20'] : null,
      "Self.P21" => isset($_POST['Self.P21']) ? $_POST['Self.P21'] : null,
      ///
    // A_settings
       "self.A_settings" => [
           "w1" => $_POST['w1'],
           "w2" => $_POST['w2'],
       ],
      // B_settings
       "self.B_settings_2" => [
           "w3" => $_POST['w3'],
           "w4" => $_POST['w4'],
       ],

sieht die json-Datei nach dem Absenden für die ersten einfachen Parameter plötzlich so aus:

{
   "Self.P1": null,
   "Self.P2": null,
   "Self.P3": null,
   .....
    "Self.P21": null,

Nur die verschachtelten Parameter, die danach kommen:

"self.A_settings": {
       "w1": "Antwort1",
       "w2": "Antwort2"
   },
   "self.B_settings_2": {
       "w3": "Antwort3",
       "w4": "Antwort4"
   },

werden nach wie vor korrekt in die Datei geschrieben! 

Weiß einer oder hat eine Theorie wieso das eine problemlos funktioniert und bei der anderen Variante plötzlich systematisch alle einfachen Parameter (also Self.P1-21) den Wert "null" zurückgeben? 

Internet, Webseite, Formular, Code, PHP, Programmiersprache, Webentwicklung, Parameter

Snake Game HTML Score?

Ich will in meinem Snake Game: (Hier der Code)

Einen Score einbauen (ein Food = + ein Score) Kann mir jemand helfen?

//board
var blockSize = 25;
var rows = 20;
var cols = 20;
var board;
var context; 

//snake head
var snakeX = blockSize * 5;
var snakeY = blockSize * 5;

var velocityX = 0;
var velocityY = 0;

var snakeBody = [];

//food
var foodX;
var foodY;

var gameOver = false;

window.onload = function() {
    board = document.getElementById("board");
    board.height = rows * blockSize;
    board.width = cols * blockSize;
    context = board.getContext("2d"); //used for drawing on the board

    placeFood();
    document.addEventListener("keyup", changeDirection);
    // update();
    setInterval(update, 1000/10); //100 milliseconds
}

function update() {
    if (gameOver) {
        return;
    }

    context.fillStyle="black";
    context.fillRect(0, 0, board.width, board.height);

    context.fillStyle="red";
    context.fillRect(foodX, foodY, blockSize, blockSize);

    if (snakeX == foodX && snakeY == foodY) {
        snakeBody.push([foodX, foodY]);
        placeFood();
    }

    for (let i = snakeBody.length-1; i > 0; i--) {
        snakeBody[i] = snakeBody[i-1];
    }
    if (snakeBody.length) {
        snakeBody[0] = [snakeX, snakeY];
    }

    context.fillStyle="lime";
    snakeX += velocityX * blockSize;
    snakeY += velocityY * blockSize;
    context.fillRect(snakeX, snakeY, blockSize, blockSize);
    for (let i = 0; i < snakeBody.length; i++) {
        context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize);
    }

    //game over conditions
    if (snakeX < 0 || snakeX > cols*blockSize || snakeY < 0 || snakeY > rows*blockSize) {
        gameOver = true;
        alert("Game Over");
    }

    for (let i = 0; i < snakeBody.length; i++) {
        if (snakeX == snakeBody[i][0] && snakeY == snakeBody[i][1]) {
            gameOver = true;
            alert("Game Over");
        }
    }
}

function changeDirection(e) {
    if (e.code == "ArrowUp" && velocityY != 1) {
        velocityX = 0;
        velocityY = -1;
    }
    else if (e.code == "ArrowDown" && velocityY != -1) {
        velocityX = 0;
        velocityY = 1;
    }
    else if (e.code == "ArrowLeft" && velocityX != 1) {
        velocityX = -1;
        velocityY = 0;
    }
    else if (e.code == "ArrowRight" && velocityX != -1) {
        velocityX = 1;
        velocityY = 0;
    }
}


function placeFood() {
    //(0-1) * cols -> (0-19.9999) -> (0-19) * 25
    foodX = Math.floor(Math.random() * cols) * blockSize;
    foodY = Math.floor(Math.random() * rows) * blockSize;
}
HTML, Webseite, CSS, JavaScript, Code, Programmiersprache, Webentwicklung

JavaScript: Wie kann ich eine große Tabelle schneller sortieren?

Hallo zusammen,

ich habe eine große Tabelle in meiner ASP.NET Core Razor Pages Anwendung, die ich clientseitig mit JavaScript sortieren möchte.

Allerdings dauert die Sortierung bei einer großen Datenmenge zu lange, und ich suche nach einer performanten Lösung.

Meine aktuelle Implementierung:

Ich nutze Array.sort() und vergleiche Strings und Zahlen entsprechend, das funktioniert aber das ist nicht effizient genug.

Besonders wenn die Tabelle viele Zeilen (z. B. >10.000) hat, wird die Sortierung langsam.

Meine Anforderungen:

✅ Die Sortierung muss komplett in JavaScript (clientseitig) erfolgen

✅ Sie muss sowohl Texte (Strings mit Umlaute, Sonderzeichen, etc.) als auch Zahlen (inkl. Währungen mit €) schnell sortieren

✅ Die Tabelle wird nachträglich dynamisch mit Daten befüllt (also keine initiale Sortierung im Backend möglich)

✅ Die Lösung soll sehr schnell auch bei großen Datenmengen sein

Ich habe bereits probiert:

❌ Array.sort() (wird langsam bei vielen Zeilen)

❌ localeCompare() (korrekt für Strings, aber langsam)

❌ TypedArrays für Zahlenwerte (bringt nicht genug Speed)

Gibt es eine bessere Möglichkeit, eine HTML-Tabelle performant zu sortieren?

Vielleicht mit Web Worker, einer anderen Datenstruktur oder anderen Algorithmen?

oder gibt es andere Funktionen/Möglichkeiten, die ich noch probieren kann?

hier mein aktueller Ansatz:

Tabelle:

    <div class="col-lg-9 col-md-7 col-12">
      <div class="table-container">
        <table class="table-modern table-hover w-100" id="statistikTable">
          <thead>
            <tr>
              <th onclick="sortTable(0, this)">Datum <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(1, this)">PID <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(2, this)">Nachname <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(3, this)">Vorname <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(4, this)">Rechnungsnetto <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(5, this)">Belegnummer <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
            </tr>
          </thead>
          <tbody>
            @if (Model.StatistikData != null && Model.StatistikData.Rows.Count > 0)
            {
              foreach (DataRow row in Model.StatistikData.Rows)
              {
                <tr>
                  <td>@(((DateTime)row["Datum"]).ToString("dd.MM.yyyy"))</td>
                  <td>@row["PID"]</td>
                  <td>@row["KundeNachname"]</td>
                  <td>@row["KundeVorname"]</td>
                  <td>@Convert.ToDecimal(row["Rechnungsnetto"]).ToString("N2")</td>
                  <td>@row["Belegnummer"]</td>
                </tr>
              }
            }
            else
            {
              <tr>
                <td colspan="6" class="text-center">Keine Daten gefunden</td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </div>

meine sort Funktion:

  function sortTable(columnIndex, header) {
    const table = document.getElementById("statistikTable");
    const tbody = table.tBodies[0];
    const rows = Array.from(tbody.rows);
    const ascending = table.dataset.sortOrder !== "asc";

    const isNumericColumn = !isNaN(parseFloat(rows[0].cells[columnIndex].textContent.replace("€", "").replace(",", ".").trim()));

    let sortedRows;
    if (isNumericColumn) {
      sortedRows = rows
        .map(row => ({
          element: row,
          value: parseFloat(row.cells[columnIndex].textContent.replace("€", "").replace(",", ".").trim()) || 0
        }))
        .sort((a, b) => ascending ? a.value - b.value : b.value - a.value);
    } else {
      const collator = new Intl.Collator("de", { numeric: true, sensitivity: "base" });
      sortedRows = rows
        .map(row => ({
          element: row,
          value: row.cells[columnIndex].textContent.trim()
        }))
        .sort((a, b) => ascending ? collator.compare(a.value, b.value) : collator.compare(b.value, a.value));
    }

    const fragment = document.createDocumentFragment();
    sortedRows.forEach(({ element }) => fragment.appendChild(element));
    tbody.appendChild(fragment);

    table.dataset.sortOrder = ascending ? "asc" : "desc";

    updateSortIcons(header, ascending);
  }

  function updateSortIcons(header, ascending) {
    document.querySelectorAll(".sort-icon").forEach(icon => {
      icon.src = "/img/dgvsort.png";
      icon.style.display = "inline";
    });

    const icon = header.querySelector(".sort-icon");
    if (icon) {
      icon.src = ascending ? "/img/dgvsortup.png" : "/img/dgvsortdown.png";
      icon.style.display = "inline";
    }
  }

Freue mich über jede Hilfe! 😊

HTML, Webseite, programmieren, CSS, JavaScript, HTML5, Programmiersprache, Webdesign, Webentwicklung, Frontend

PHP Fehler?

Moinsen Leude,

Ich bin gerade etwas am verzweifeln. Ich arbeite noch nicht so lange mit php und stoße die ganze zeit immer wieder auf den gleichen fehler:

Warning: Undefined array key "password" in C:\xampp\htdocs\website\metropolisx\index.php on line 21

Hier die PHP-Datei um die es geht:

<?php
session_start();
require_once "includes/config.php"; // Datenbankverbindung

$error = "";

// Nur fortfahren, wenn das Formular per POST abgesendet wurde
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Überprüfen, ob die Felder 'username' und 'password' in $_POST gesetzt sind
    $username = isset($_POST['username']) ? $_POST['username'] : '';
    $password = isset($_POST['password']) ? $_POST['password'] : '';

    // Überprüfen, ob beide Felder nicht leer sind
    if (!empty($username) && !empty($password)) {
        // Datenbankabfrage, um den Benutzer zu finden
        $stmt = $pdo->prepare("SELECT * FROM accounts WHERE USERNAME = ?");
        $stmt->execute([$username]);
        $user = $stmt->fetch();

        // Wenn der Benutzer existiert und das Passwort korrekt ist
        if ($user && password_verify($password, $user['password'])) {
            $_SESSION['user'] = $user['username'];
            // Weiterleitung zum Dashboard
            header("Location: pages/dashboard.php");
            exit();
        } else {
            $error = "Falsche Anmeldedaten!";
        }
    } else {
        // Fehlermeldung, wenn eines der Felder leer ist
        $error = "Bitte Benutzername und Passwort eingeben!";
    }
}
?>

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | MetropolisX</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="login-container">
    <h2>MetropolisX - Login</h2>

    <?php if ($error): ?>
        <p class="error"><?php echo htmlspecialchars($error); ?></p>
    <?php endif; ?>

    <form method="post">
        <input type="text" name="username" placeholder="Benutzername" required>
        <input type="password" name="password" placeholder="Passwort" required>
        <button type="submit">Anmelden</button>
    </form>
</div>

</body>
</html>

Wenn einer von euch weiß warum ich diesen fehler die ganze zeit kriege, gebt gerne bescheid. Danke schonmal im vorraus :D

SQL, HTML, Webseite, Code, Datenbank, MySQL, PHP, Programmiersprache, Webdesign, Webentwicklung

JS Fehlermeldung Hilfe: null is not an object evaluating…?

Ich brauche Hilfe dabei: mir wird dieser Fehlermeldung angezeigt…es soll das Volumen des 2. Körpers ausrechnen aber das Ergebnis erschein nicht und die Fehler meldung taucht auf:

//Javascript
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var btn = document.getElementById("btn");
var erw_input = document.getElementById("erw-input");
var erw_input2 = document.getElementById("erw-input2");
var volumen_out = document.getElementById("volumen-out");
var volumen_out2 = document.getElementById("volumen_out2");


const koerper = ["zylinder", "kegel", "kugel", "würfel", "quader", "pyramide"];


var foundInput1 = koerper.includes(input1.value.toLowerCase());

btn.addEventListener("click", function() {
  if (koerper.includes(input1.value.toLowerCase())) {
    for (var i1 = 0; i1 < koerper.length; i1++) {
      if (koerper[i1] == input1.value.toLowerCase()) {
        if (koerper[i1] == koerper[0]) {
          zylinder();
        }
        if (koerper[i1] == koerper[1]) {
          kegel();
        }
        if (koerper[i1] == koerper[2]) {
          kugel();
        }
        if (koerper[i1] == koerper[3]) {
          wuerfel();
        }
        if (koerper[i1] == koerper[4]) {
          quader();
        }
        if (koerper[i1] == koerper[5]) {
          pyramide();
        }
      }
    }
  } else {
    console.log("falsch");
  }

  if (koerper.includes(input2.value.toLowerCase())) {
    for (var i2 = 0; i2 < koerper.length; i2++) {
      if (koerper[i2] == input2.value.toLowerCase()) {
        if (koerper[i2] == koerper[0]) {
          zylinderZwei();
        }
        if (koerper[i2] == koerper[1]) {
          kegelZwei();
        }
        if (koerper[i2] == koerper[2]) {
          kugelZwei();
        }
        if (koerper[i2] == koerper[3]) {
          wuerfelZwei();
        }
        if (koerper[i2] == koerper[4]) {
          quaderZwei();
        }
        if (koerper[i2] == koerper[5]) {
          pyramideZwei();
        }
      }
    }
  } else {
    console.log("falsch");
  }
  
});


function kugel() {
  erw_input.innerHTML = "<h4>Radius 1:</h4> " + "<input required type='text' placeholder='Radius Kugel' id='rKug'>"
}

function kugelZwei() {
  erw_input2.innerHTML = "<h4>Radius 2:</h4> " + "<input required type='text' placeholder='Radius Kugel' id='rKug2'>";
}


  if (input1.value.toLowerCase() == koerper[2]) {
    var erg_kug = 4 / 3 * Math.PI * Math.pow(rKug.value, 3);
    volumen_out.innerHTML = "Volumen 1 - Kugel: <br>" + "V = 4 &#247; 3 &#183; &#960; &#183; r&#179; <br>" + "V = 4 &#247; 3 &#183; &#960; &#183; " + rKug.value + "&#179; <br>" + "V = " + erg_kug.toFixed(2) + " cm&#179";
  }

    if (input2.value.toLowerCase() == koerper[2]) {
      var erg_kug2 = 4 / 3 * Math.PI * Math.pow(rKug2.value, 3);
      volumen_out2.innerHTML = "Volumen 2 - Kugel: <br>" + "V = 4 &#247; 3 &#183; &#960; &#183; r&#179; <br>" + "V = 4 &#247; 3 &#183; &#960; &#183; " + rKug2.value + "&#179; <br>" + "V = " + erg_kug2.toFixed(2) + " cm&#179";
    }

    Den Rest habe ich rausgekürzt, da es sonst zu lang wäre. Danke schonmal im Vorraus !

Bild zum Beitrag
Webseite, JavaScript, Code, Programmiersprache, Webentwicklung

Frage zu Responsive Nav, Burger Button?

Hi, also ich verstehe hier folgendes nicht :

Warum das Hamburger Symbol bei bei zutreffender Mediaquerry "@media (max-width: 768px)", angezeigt wird, denn schließlich ist doch der ".menu-toggle" auf "display: none;" ???

Eventuell verstehe ich es richtig, dass durch ".classList.toggle('nav-active');" in der "function toggleMenu()" irgendwie der Burger aktiviert wird, durch eine versteckte VanillaJS Funktion, aber wie genau?

Danke

LG

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Meine Website</title>
   <style>
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: Arial, sans-serif;
       }
       body {
           display: flex;
           flex-direction: column;
           align-items: center;
       }
       .navbar {
           width: 100%;
           background-color: #333;
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 15px;
       }
       .logo {
           color: white;
           font-size: 24px;
           font-weight: bold;
       }
       .nav-links {
           list-style: none;
           display: flex;
       }
       .nav-links li {
           margin: 0 15px;
       }
       .nav-links a {
           color: white;
           text-decoration: none;
           font-size: 18px;
       }
       .menu-toggle {
           display: none;
           font-size: 24px;
           color: white;
           cursor: pointer;
       }
       @media (max-width: 768px) {
           .nav-links {
               display: none;
               flex-direction: column;
               background-color: #333;
               position: absolute;
               top: 60px;
               right: 0;
               width: 100%;
               text-align: center;
           }
           .nav-links li {
               padding: 10px 0;
           }
           .menu-toggle {
               display: block;
           }
           .nav-active {
               display: flex;
           }
       }
   </style>
</head>
<body>
   <nav class="navbar">
       <div class="logo">Mein Logo</div>
       <span class="menu-toggle" onclick="toggleMenu()">&#9776;</span>
       <ul class="nav-links">
           <li><a href="#">Home</a></li>
           <li><a href="#">Über</a></li>
           <li><a href="#">Leistungen</a></li>
           <li><a href="#">Kontakt</a></li>
       </ul>
   </nav>
   <script>
       function toggleMenu() {
           document.querySelector('.nav-links').classList.toggle('nav-active');
       }
   </script>
</body>
</html>


ps:Ok hat sich geklärt...ich depp habe übersehen das die unteren css eigenschaften ja in der Mediaquerry drinne sind
HTML, Webseite, CSS, JavaScript, HTML5, Programmiersprache, Webdesign, Webentwicklung

Domain mit Sepa oder Psc mieten?

Moin Leute,

Ich bin 17 Jahre alt und habe gestern mit dem Programmieren angefangen. Ich habe mir ein Portfolio gecoded (HTML und CSS) um einfach mal irgendwo anzufangen. Da ich letzte Woche die Schule beendet habe und mich aktuell für Ausbildungsplätze als Systemintegrator bewerbe, möchte ich diese Website gerne öffentlich machen. (Bisher ist sie sozusagen nur die HTML datei auf meinem PC.)

Das problem hierbei ist, dass ich meinen Laptop natürlich nicht 24/7 laufen lassen kann um diese selber zu hosten. Ich habe vor mir einen V-Server über Zap-Hosting zu mieten, da ich mich demnächst auch z.B. an API's heran tasten möchte. (Zap-hosting hab ich früher schon benutzt um mir meine Minecraft Server zu mieten. Fand die eigentlich immer günstig und zuverlässig.)

Bei Zap-Hosting kann ich sogut wie alles mit z.B. Paysafe, zap-coins (guthaben) oder sofortüberweisung bezahlen. Jedoch keine Domains.

Ich habe ein Bankkonto, was beudeutet, dass Sepa-Mandate oder Sofort Überweisungen möglich wären.

Jetzt habe ich bei anderen Webseiten wie z.B. Ionos geschaut, um mir eine Domain zu mieten, aber alle wollen entweder PayPal oder Kreditkarte (Geht beides nicht, da ich erst in 2 Monaten 18 werde)

Meine Frage an euch währe jetzt, kennt ihr seriöse webseiten, bei denen man Domains mit Sepa, Sofort-Überweisung oder Paysafe-Karten mieten kann?

Danke schonmal im vorraus für eure hilfreichen Antworten,

Ben :)

PS: Meine Eltern nach ihrer Kreditkarte/PayPal zu fragen ist keine Option (Persönliche Gründe)

HTML, Webseite, Domain, Webentwicklung, Webhosting

PHP: Wie kann ich die Videoladezeit verbessern?

Hallo,

ich habe folgendes Problem:

Ich habe diese PHP-Datei erstellt und bei mir auf meinem iPhone lädt es die Videodatei sehr langsam bis gar nicht. Wenn ich aber auf PC im gleichen Netflix schaue, lädt es sehr schnell.

Ich habe es bei anderen Freunden testen lassen, die auch ein iPhone haben. Bei der einen Person lädt es auch sehr schnell, bei der anderen auch nicht, so wie bei mir. Bei mir lädt es immer nur schnell, wenn ich mobile Daten anhabe.

Die Videodateien sind 2-7 GB groß.

Vielleicht kann jemand eine Lösung für mich finden, das zu beheben. Wichtig ist, dass ich die Größe der Videodateien nicht verkleinern kann. Das heißt, es muss trotzdem schnell die Videodatei laden.

Ich sage schon einmal danke an die Person, die sich die Zeit und Mühe nimmt, mir zu helfen.

Bei einer Verbindung mit dem normalen Heimnetz sieht es auf dem iPhone so aus:

Wenn ich über LTE (mobile Daten) lade:

Der PHP-Code:

<?php 
  require 'db.php'; // Die Datenbankverbindung einbinden
  require 'is_premium.php'; // Die Datenbankverbindung einbinden

  // Überprüfen, ob eine ID übergeben wurde
  if (!isset($_GET['id']) || !is_numeric($_GET['id'])) {
    die('Ungültige Film-ID.');
  }

  $movie_id = intval($_GET['id']);
  // Film aus der Datenbank abfragen
  $stmt = $db->prepare('SELECT * FROM movies WHERE id = ?');
  $stmt->bind_param('i', $movie_id);
  $stmt->execute();
  $result = $stmt->get_result();

  if ($result->num_rows === 0) {
    die('Film nicht gefunden.');
  }

  $movie = $result->fetch_assoc();
  $stmt->close();
  $db->close();

  // Erkennen, ob die URL ein lokales Video ist oder über HTTPS geladen werden soll
  $is_local_video = strpos($movie['video'], 'uploads/videos/') === 0;
  $is_https = strpos($movie['video'], 'https://') === 0;
  $thumbnail = htmlspecialchars($movie['thumbnail']); // Thumbnail aus der Datenbank
?>
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php echo htmlspecialchars($movie['name']); ?> - MovieVel</title>
  <style>
   #css code
  </style>
</head>
<body>
  <div class="container">
    <div class="movie-detail">
      <h1><?php echo htmlspecialchars($movie['name']); ?></h1>
      <!-- Movie Video -->
      <div class="<?php echo $is_local_video ? 'video-container' : 'iframe-container'; ?>">
        <div class="play-btn">
          &#9654; <!-- Play-Symbol -->
        </div>
        <?php if ($is_local_video): ?>
          <!-- Video für progressive Web-Optimierung mit Bild-in-Bild-Unterstützung -->
          <video id="video-player" controls autoplay preload="auto" poster="<?php echo $thumbnail; ?>"
              onclick="this.requestPictureInPicture()" muted playsinline>
            <source src="<?php echo htmlspecialchars($movie['video']); ?>" type="video/mp4">
            Ihr Browser unterstützt dieses Videoformat nicht.
          </video>
        <?php elseif ($is_https): ?>
          <iframe 
            src="<?php echo htmlspecialchars($movie['video']); ?>" 
            allowfullscreen>
          </iframe>
        <?php else: ?>
          <p>Video konnte nicht geladen werden. Überprüfen Sie die URL oder die Serverkonfiguration.</p>
        <?php endif; ?>
      </div>
      <!-- Movie Description -->
      <div class="description-box">
        <h2>Über den Film</h2>
        <p><?php echo htmlspecialchars($movie['description']); ?></p>
      </div>
      <!-- Back Button -->
      <a href="index.php" class="back-btn">Zurück zur Übersicht</a>
    </div>
  </div>
  <script>
    const video = document.getElementById('video-player');
     
    // Überprüfen, ob Picture-in-Picture unterstützt wird
    if ('pictureInPictureEnabled' in document) {
      video.addEventListener('click', async () => {
        try {
          // Versuchen, Bild-in-Bild zu aktivieren
          if (document.pictureInPictureElement !== video) {
            await video.requestPictureInPicture();
          } else {
            // Wenn das Video schon im Bild-in-Bild-Modus ist, es wieder schließen
            await document.exitPictureInPicture();
          }
        } catch (err) {
          console.error('Fehler beim Wechseln in den Bild-in-Bild-Modus:', err);
        }
      });
    }
  </script>
</body>
</html>
Bild zum Beitrag
Homepage, SQL, HTML, Webseite, CSS, JavaScript, HTML5, Code, Datenbank, MySQL, PHP, Webdesign, Webentwicklung, phpMyAdmin

Meistgelesene Beiträge zum Thema Webentwicklung