Javascript-forum
Portal

Durchsuche Foren

(Erweiterte Suche)

Foren-Statistiken
» Mitglieder: 43.439
» Neuestes Mitglied: charmemedical
» Foren-Themen: 508
» Foren-Beiträge: 2.100

Komplettstatistiken

Benutzer Online
Momentan sind 113 Benutzer online
» 0 Mitglieder
» 111 Gäste
Bing, Yandex

Aktive Themen
Memorable Experience With...
Forum: Javascript
Letzter Beitrag: chandadelhiaerocity
Vor 5 Stunden
» Antworten: 0
» Ansichten: 6
Escort Service in Aerocit...
Forum: Javascript
Letzter Beitrag: chandadelhiaerocity
Vor 5 Stunden
» Antworten: 0
» Ansichten: 8
div(tabelle) neugeladen b...
Forum: Javascript
Letzter Beitrag: black79
26.04.2024, 16:40
» Antworten: 4
» Ansichten: 87
What are the psychologica...
Forum: Css
Letzter Beitrag: azaviona
26.04.2024, 07:58
» Antworten: 0
» Ansichten: 32
Ajax Abfrage
Forum: Php
Letzter Beitrag: taxlegit24
25.04.2024, 06:43
» Antworten: 3
» Ansichten: 396
Probleme Firebase Databas...
Forum: Javascript
Letzter Beitrag: PrimoCenturio
22.04.2024, 14:15
» Antworten: 4
» Ansichten: 139
Verbindung von Entscheidu...
Forum: Javascript
Letzter Beitrag: Ashriel
16.04.2024, 11:02
» Antworten: 3
» Ansichten: 125
Neu laden ohne Scrolling
Forum: Javascript
Letzter Beitrag: Tom
16.04.2024, 08:48
» Antworten: 0
» Ansichten: 44
Formularfelder addieren u...
Forum: Javascript
Letzter Beitrag: heena123
16.04.2024, 08:03
» Antworten: 17
» Ansichten: 430
FMOVIES
Forum: Javascript
Letzter Beitrag: xomanig690
16.04.2024, 07:07
» Antworten: 0
» Ansichten: 50

  animierte Zeitleiste
Geschrieben von: Eifelkrimi - 04.03.2023, 08:27 - Forum: Javascript - Antworten (4)

Guten Morgen,

die Plattform »eifelkrimi.de« präsentiert nicht nur Bücher und Autoren, sondern auch Filme und TV-Serien, die seit den dreißiger Jahren in der Region gedreht worden sind.
Als besonderer »Eyecatcher« wird eine horizontale Zeitleiste am oberen Seitenrand auf das Jahr der Veröffentlichung bewegt - allerdings bisher noch viel zu schnell.
Beispiel: https://www.wackerberg.de/tatort/maik.php

Die Anweisung  --- document.body.style.scrollBehavior = 'smooth; --- reicht für den gewünschten Effekt offensichtlich nicht aus. Statt dessen würde ich gerne einen Parameter mit der gewünschten Zeitdauer der Bewegung einführen (z.B. 4.000 Millisekunden) und zusätzlich eine Art »ease-in-out« nutzen.

In den bestehenden Code (s.u.) soll diese Funktionalität mit ein paar Zeilen JavaScript/JQuery integriert werden. Dazu fehlen mir als absoluter Anfänger und »Nicht-Programmierer«  jedoch die Fähigkeiten.

Code:
<script type="text/javascript">
  let timelineYear = 2018
  let paddingRight = 136
  let delayForScriptToRun = 1000// ms

  const ScrollTimelineYearIntoView = (timelineYear, paddingRight) => {
    document.body.style.scrollBehavior = 'smooth;'
    let timelineDiv = document.getElementsByClassName("timelines-years")[0]
    let targetParent = document.getElementById(timelineYear)
    let targetSpan = targetParent.getElementsByTagName("span")[0];
    let getDistance = function (){ return window.innerWidth - $(targetParent).position().left - paddingRight}

    targetSpan.className="rot"
   
    timelineDiv.scrollBy({
      left: getDistance() < 0 ? -getDistance() : 0,
      behavior: 'smooth'
    });
  }

  $(document).ready(function(){
    setTimeout(ScrollTimelineYearIntoView(timelineYear, paddingRight), delayForScriptToRun);
    console.debug(`ScrollTimelineYearIntoView(${timelineYear}, ${padding}), ${delayForScriptToRun})`)
  });
</script>
Drucke diesen Beitrag

  Daten aus Website auslesen
Geschrieben von: Oly - 27.02.2023, 14:56 - Forum: Javascript - Antworten (4)

Hallo zusammen,

vielleicht hat da jemand eine schönere Lösung als ich momentan.
Als Beispiel folgendes


[Bild: 20230227145401d2b5ca33bd970f64a6301fa75ae2eb22.png]

möchte ich gerne die Zahl "7900316091" aus dem ganzen auslesen. Gibt es da eine bessere Lösung als die Meine?

Bis jetzt ermittel ich mit 

Code:
document.getElementById("invoice_data").innerText;


den Text und speicher es in einer Variable und bearbeite sie bis es passt. Geht noch.

Doch manchmal stehen mehr Werte drin und dann wird es echt mühselig.


[Bild: 20230227145401d2b5ca33bd970f64a6301fa75ae2eb22.png]


gibt es einen leichteren Wert an die Ziffer "7900316091" zu kommen als den ganzen String zu zerlegen ect. pp?

Drucke diesen Beitrag

  Canvas Download-Button
Geschrieben von: El Gordo - 27.02.2023, 09:45 - Forum: Javascript - Antworten (1)

Hallo zusammen,
ich bin ganz neu hier und auch nicht der Javascript-Profi!
Ich verzweifle gerade an meinem Script.
Ich habe mir eine html/Javascript Datei gebaut, bei dieser gibt es ein Bild (image.png) auf diesem werden per input type Namen eingegeben und mit canvas Namen auf dem Bild platziert. Es klappt auch alles ganz Prima, das Problem ist, ich habe noch einen Dowload-Button eingebaut, mit dem man das neu generierte Bild mit den Namen herunterladen können soll. Nur dieser will einfach nicht, es passiert nichts! Es wird nur Lokal auf meinem Rechner ausgeführt, es gibt keine Webseite.
Hier kommt mal mein Code HTML:

Code:
<body>
<div class="input-container">
  <h2 style="display: flex; align-items: center; justify-content: center;">Platzierungen eingeben</h2>
 
  <div class="ranking-container">
    <div class="ranking">
      <h3 style="display: flex; align-items: center; justify-content: center;">1.er</h3>
      <label>Name 1:</label>
      <input type="text" id="name1-1">
      <label>Name 2:</label>
      <input type="text" id="name1-2">
      <label>Name 3:</label>
      <input type="text" id="name1-3">
      <label>Name 4:</label>
      <input type="text" id="name1-4">
      <label>Name 5:</label>
      <input type="text" id="name1-5">
    </div>
   
    <div class="ranking">
      <h3 style="display: flex; align-items: center; justify-content: center;">2.er</h3>
      <label>Name 1:</label>
      <input type="text" id="name2-1">
      <label>Name 2:</label>
      <input type="text" id="name2-2">
      <label>Name 3:</label>
      <input type="text" id="name2-3">
      <label>Name 4:</label>
      <input type="text" id="name2-4">
      <label>Name 5:</label>
      <input type="text" id="name2-5">
    </div>
   
    <div class="ranking">
      <h3 style="display: flex; align-items: center; justify-content: center;">3.er</h3>
      <label>Name 1:</label>
      <input type="text" id="name3-1">
      <label>Name 2:</label>
      <input type="text" id="name3-2">
      <label>Name 3:</label>
      <input type="text" id="name3-3">
      <label>Name 4:</label>
      <input type="text" id="name3-4">
      <label>Name 5:</label>
      <input type="text" id="name3-5">
    </div>
  </div>
 
  <button onclick="generateNames()">Generieren</button>
</div>

    <div class="output-container">
        <canvas id="canvas"></canvas>
        <button onclick="downloadImage()">Bild herunterladen</button>
    </div>
    
    <script>
HIER ZWISCHEN STEHT DER UNTEN AUFGEFÜHRTE JAVASCRIPT-CODE
    </script>
</body>
Hier der Javascript-Teil
PHP-Code:
        function generateNames() {
            // Canvas initialisieren
            const canvas = document.getElementById('canvas');
            canvas.width = 400;
            canvas.height = 400;
            const ctx = canvas.getContext('2d');
    
            // Hintergrundbild laden
            const img = new Image();
            img.src = 'image.png';
            img.onload = function() {
                // Hintergrundbild zeichnen
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        
                // Namen generieren
                const names1 = [];
                const names2 = [];
                const names3 = [];
                for (let i = 1; i <= 5; i++) {
                const name1 = document.getElementById(`name1-${i}`).value;
                if (name1) names1.push(name1);
                const name2 = document.getElementById(`name2-${i}`).value;
                if (name2) names2.push(name2);
                const name3 = document.getElementById(`name3-${i}`).value;
                if (name3) names3.push(name3);
                }
        
                // Namen auf dem Canvas zeichnen
                const fontSize = 14;
                const x1 = canvas.width / 2;
                const y1 = canvas.height / 1.2;
                const x2 = canvas.width * 0.2;
                const y2 = canvas.height / 1.2;
                const x3 = canvas.width * 0.78;
                const y3 = canvas.height / 1.23;
        
                ctx.font = `${fontSize}px Arial`;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                
                // Namen in 3D zeichnen
                ctx.font = `bold ${fontSize}px Arial`;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillStyle = 'white';
                ctx.shadowColor = 'black';
                ctx.shadowOffsetX = 2;
                ctx.shadowOffsetY = 2;
                ctx.shadowBlur = 2;

                // Platz 1 Namen
                ctx.fillStyle = 'gold';
                for (let i = 0; i < names1.length; i++) {
                    const name = names1[i];
                    const y = y1 + (i - (names1.length - 1) / 2) * fontSize;
                    ctx.fillText(name, x1, y);
                }
        
                // Platz 2 Namen
                ctx.fillStyle = 'silver';
                for (let i = 0; i < names2.length; i++) {
                    const name = names2[i];
                    const y = y2 + i * fontSize;
                    ctx.fillText(name, x2, y);
                }
        
                // Platz 3 Namen
                ctx.fillStyle = '#CD7F32';
                for (let i = 0; i < names3.length; i++) {
                    const name = names3[i];
                    const y = y3 + i * fontSize;
                    ctx.fillText(name, x3, y);
                }
                
                // Kreiert Download
                function downloadImage() {
                  const canvas = document.getElementById('canvas');
                  const dataURL = canvas.toDataURL('image/png');
                  const link = document.createElement('a');
                  link.download = 'ranking.png';
                  link.href = dataURL;
                  document.body.appendChild(link);
                  link.click();
                  document.body.removeChild(link);
                }
            };
} 

Würde mich freuen, wenn mal einer drüberschauen könnte und mir vielleicht eine Lösung geben kann.
Vielen Dank vorab, El Gordo

Drucke diesen Beitrag

  Tutorial/ Seiten / Lecktüre
Geschrieben von: Oly - 25.02.2023, 13:49 - Forum: Hilfe bei Add-ons programmieren - Antworten (2)

Hallo zusammen,

ich möchte mich in Zukunft mehr um dieses Thema beschäftigen .
Könnt Ihr mir hilfreiche Tips geben wo ich einiges ansehen bzw..nachlesen kann? 
Die Anfänger Videos wie man eine Grundstruktur aufbaut helfen mir leider nicht, möchte da etwas mehr in die Tiefe gehen. Finde da leider nichts gescheites was die Chrome Addon Programmierung angeht. Wäre super wenn ihr nützliche Seiten, Tut's oder Bücher empfehlen könnt.

Danke

Drucke diesen Beitrag

Exclamation Anfänger-Verständnisfrage
Geschrieben von: sunlite - 25.02.2023, 11:43 - Forum: Javascript - Antworten (5)

Hallo liebe Community,

ich bin also gerade dabei, mir Javascript beizubringen und habe die ersten Schritte tatsächlich schon gemacht. Im Zuge einer meiner Übungen habe ich folgendes Script erstellt.

Code:
  if (window.attachEvent) {
    window.attachEvent('onresize', function() {
      if (window.innerWidth < 400)
        console.log("Less than 400");
      else if(window.innerWidth < 900)
        console.log("Less than 900");
      else{
        console.log("More than 900");
      }
    });
  }else if (window.addEventListener) {
  window.addEventListener('resize', function() {
    if (window.innerWidth < 400)
      console.log("Less than 400");
    else if(window.innerWidth < 900)
      console.log("Less than 900");
    else {
      console.log("More than 900");
    }
  }, true);
} else {
  //...
}


Dabei gehts es um Bildschirmgrößen. Das Script wird in der Console tadellos ausgegeben. Wenn ich also das Browser-Bild verkleinere/respektive vergrößere und über die Breiten 400 und 900 gehe, zeigt mir das Consolenfenster das entsprechend an. Super. Verstanden.

Nun dachte ich mir aber: Wenn die Console diese Werte ausspuckt, dann kann man das doch sicher auch im Bild machen. Ich habe mich also an den Anfang des Javascript-Lernens erinnert und eine Variable in das Script eingefügt.

Code:
var inhalt; // Das ist die Variable, habs auch mit let probiert gehabt
if (window.attachEvent) {
    window.attachEvent('onresize', function() {
      if (window.innerWidth < 400)
        console.log("Less than 400");
        inhalt='kleiner als 400'; // Variable mit Inhalt füllen
      else if(window.innerWidth < 900)
        console.log("Less than 900");
        inhalt='kleiner als 900'; // Variable mit Inhalt füllen
      else{
        console.log("More than 900");
        inhalt='größer als 900'; // Variable mit Inhalt füllen
      }
    });
  }else if (window.addEventListener) {
  window.addEventListener('resize', function() {
    if (window.innerWidth < 400)
      console.log("Less than 400");
      inhalt='kleiner als 400'; // Variable mit Inhalt füllen
    else if(window.innerWidth < 900)
      console.log("Less than 900");
      inhalt='kleiner als 900'; // Variable mit Inhalt füllen
    else {
      console.log("More than 900");
      inhalt='größer als 900'; // Variable mit Inhalt füllen
    }
  }, true);
} else {
  //...
}
// Und hier gebe ich diese Variable nun aus, zumindest war das der Plan
document.write(inhalt);

Hatte mich schon sehr darauf gefreut, etwas im Bild zu sehen. AAAAber ...

Uncaught SyntaxError: Unexpected token 'else' (at ... 

KONKRET geht es dabei um diese Zeile im (window.attachEvent)-Bereich.

Code:
else if(window.innerWidth < 900)

Das verstehe ich gerade nicht. Warum eine Variable mit einem einfachen und festgelegten String so etwas auslöst. 

Meine Frage nun: Warum passiert dieser Fehler? Sieht ja so aus, als wäre es ein Fehler in der If-Clause. Aber warum funktioniert das dann in der Console problemlos und sobald ich eine einfache Variable hinzupacke, gibt es diesen Fehler?


Vielen Dank
Beste Grüße
Sunny

Drucke diesen Beitrag

  Frage bezüglich Discord Bot
Geschrieben von: Hurald - 24.02.2023, 21:49 - Forum: Javascript - Antworten (1)

Code:
const { Client, GatewayIntentBits } = require('discord.js');
const client = new Client({
  intents: [
    GatewayIntentBits.Guilds,
    GatewayIntentBits.GuildMessages,

  ]
});

const TOKEN = 'BOT_TOKEN';
const CHANNEL_NAME = '📸bilder';

client.on('ready', () => {
  console.log(`Logged in as ${client.user.tag}!`);

  // Start the timer to check for messages without images every 60 seconds
  setInterval(checkForNonImageMessages, 60 * 1000);
});

client.on('messageCreate', async (message) => {
  console.log("Nachricht gesendet");

  // Check if the message is in the designated channel
  if (message.channel.name !== CHANNEL_NAME) return;
  console.log("Channel erfolgreich erkannt");

  // Check if the message has any attachments or mentions
  const hasAttachment = message.attachments.size > 0;

  // If the message has no attachment, mention, or reaction, delete it
  if (!hasAttachment && !message.thread) {
    console.log(`Nachricht wurde gelöscht`);
    try {
      await message.delete();
    } catch (error) {
      console.error(`Error deleting message: ${error}`);
    }
  }
});

async function checkForNonImageMessages() {
  const channel = client.channels.cache.find(c => c.name === CHANNEL_NAME);
  const messages = await channel.messages.fetch();

  messages.forEach(async (message) => {
    // Check if the message has any attachments or mentions
    const hasAttachment = message.attachments.size > 0;

    // If the message has no attachment, mention, or reaction, delete it
    if (!hasAttachment && !message.thread) {
      console.log(`Nachricht ohne Bild gefunden. Nachricht wird gelöscht.`);
      try {
        await message.delete();
      } catch (error) {
        console.error(`Error deleting message: ${error}`);
      }
    }
  });
}

client.login(TOKEN);
Ich habe hier einmal einen Discord bot Skript eingefügt der normalerweise alle in dem 📸bilder gesendeten Nachrichten prüfen sollte ob diese Bilder sind. Und sollten es keine Bilder sein werden sie gelöscht. Außer sie wurden in einen Thread geschrieben. Und das ist nun die Theorie aber in der Praxis funktioniert der Code nicht denn es werden nicht nur die normalen Text Nachrichten gelöscht sondern auch die Bilder. Was nicht so schön ist deswegen wollte ich fragen ob jemand noch eine idee hat diesen Code so zu verbessern das er auch das tut was er tuen soll. Und nein ich habe nicht bei BOT_TOKEN das vergessen wegzumachen und durch einen eigenen Bot Token zu ersetzen. Und ja der Bot hat genug Berechtigungen. Das Problem ist nur das er Dinge Löscht die er gar nicht löschen soll. 

Drucke diesen Beitrag

  window.print() reagiert nicht
Geschrieben von: Oly - 24.02.2023, 15:07 - Forum: Hilfe bei Add-ons programmieren - Antworten (14)

Hallo zusammen,

ich finde den Fehler nicht. In einem Popup habe ich ein Button hinterlegt und soll mir bei einem click das Druckmenü öffnen. Tut aber nix und ich weiss nicht warum.

Code:
const sendMessageId = document.getElementById("Button_click");
let test;

if (sendMessageId) {
    sendMessageId.onclick = function() {
window.print();

  };
};
wenn ich allerdings das window.print() durch alert("test"); ersetze , läuft es-
Woran kann es liegen?

Drucke diesen Beitrag

Music Zeichen Verkettung
Geschrieben von: daggel - 23.02.2023, 16:23 - Forum: Javascript - Antworten (1)

Hallo Leute,

ich mache gerade meine ersten "Gehversuche" in Javasript und habe hier ein Problem.

Code:
<meta charset="utf-8"/>

<script>
"use strict";

var text1 = window.prompt("Schreib was, nur klein und ohne Leerzeichen:", " ");
var text2 = " ";
var kette = text1.length;

for (var nr = 0; nr < kette; nr++)
{
    text2 += text1[kette - nr - 1];
}

document.write(text2 + " <br> ");

if (text1 == text2)

    document.write("Palindrom");


</script>

Das ist mein Code. Wenn ich z. B. in der Box folgenden Text eingeb "einehordebedrohenie", dann soll FireFox mit das ausgeben und zusätzlich, weil es auch Rückwärts so heißt "Palindrom".

Ich ernalte aber folgende Fehlermeldung: ????? Kann man hier keinen Shortcut einfügen? Währe schön einfach.

Vielleicht könnt Ihr mir ja auch so helfen.

Lieben Dank

daggel
Hallo Leute,

hat sich erledigt.
Code:
var text1 = window.prompt("Schreib was, nur klein und ohne Leerzeichen:", " ");
var text2 = " ";
var kette = text1.length;
Bei           var text2 = " "; muss es       var text2 = ""; heißen. Es darf keine Leerschritt zwischen den Anführugszeichen stehen.
Hallo Leute,

hat sich erledigt.
Code:
var text1 = window.prompt("Schreib was, nur klein und ohne Leerzeichen:", " ");
var text2 = " ";
var kette = text1.length;
Bei     var text2 = " "; darf keine Leerzeichen zwischen den Anführungszeichen stehen. Es muss heißen: var text2 = "";

Drucke diesen Beitrag

  Javascripted Werte aus HTML in json-Datei speichern
Geschrieben von: MrShady187 - 18.02.2023, 18:44 - Forum: Javascript - Antworten (3)

Hi zusammen,

ich habe eine HTML Seite geschrieben, in der ich mit einem button Klick über javascript einige Werte ändere (ON/OFF button -> solange ON -> solange werden die Werte geändert).
Nun möchte ich diese ständig aktualisierten Werte irgendwie über Flutter in eine Andoird App bekommen.
Der "Webserver" ist ein Raspberry PI und ich habe in Flutter eine App geschrieben, mit der ich json Werte in die App laden kann.
Jetzt wollte ich irgendwie aus meiner HTML-Seite die ständig aktualisierten Werte in eine eigene JSON-Datei automatisch "speichern" lassen und darauf mit meiner App zugreifen um diese Werte zu laden.
Gefunden habe ich bisher nur wie man komplette HTML-Seiten in JSON konvertiert (aber nicht die mit javascript aktualisierten Werte) oder halt komplette HTML-Seiten in einer App laden kann (Flutter Webview), aber das ist alles irgendwie nicht das was ich brauche.
Gibt es da eine simple Lösung?

Ein Ausschnitt aus meiner HTML-Seite:

Code:
<tbody>
    <tr>
        <td><button id = "btnRes" onclick = "getRes();">Reset</button></td>
        <td><p>Summe</p></td>
        <td><p id = "t_valSum">0</p></td>
        <td><p id = "t_totSum">0</p></td>
        <td><p id = "t_perSum"> </p></td>
    </tr>
</tbody>
Geändert werden dann über Javascript t_valSum usw..

Vielen Dank im Voraus und Grüße

Drucke diesen Beitrag

  Ein Link/Button soll zwei unterschiedliche Aktionen ausführen
Geschrieben von: sunlite - 17.02.2023, 17:16 - Forum: Javascript - Antworten (7)

Hallo liebe Java-Community,

als blutiger Anfänger würde mich interessieren, ob es mit reinem Javascript (also nicht JQuery, Vanilla, etc.) möglich ist, einen Link oder Button so zu gestalten, dass er zwei Aktionen zu unterschiedlichen Zeitpunkten ausführen kann? Falls das geht, wie würde ich das anstellen?

Hier meine Idee:
Ich habe einen Link (alternativ auch <button>).

PHP-Code:
<a href="/teil1.html" target="_self">Hier drücken</a> 

Wenn ich nun einfach da drauf drücke, soll er auf die Seite /teil1.html wechseln.

Wenn ich aber den Link drei Sekunden lang gedrückt halte, dann soll er auf die Seite /teil2.html wechseln.

Ist sowas mit purem Javascript möglich?

Vielen Dank schon einmal für Eure Ideen.

Beste Grüße
Sunny

Drucke diesen Beitrag