Zugriff auf svg Element in HTML gibt immer "null" zurück?

Hallo zusammen,

folgendes Problem:

Ich möchte aus meinem javascript Code zu laufzeit auf meine sonarGrafik.svg zugreifen können um deren Elemente zu manipulieren (oder neue hinzufügen zu können).

So sieht erstmal der ganze HTML Code aus:

<!DOCTYPE html>
<html>
<head>
    <title>Arduino Daten</title>
    <link rel="icon" href="data:,">
    <script src="scripts/script.js"></script>
    <link rel="stylesheet" href="styles/style.css"> 
</head>
<body>
    <object id = "svgObject" data="styles/sonarGrafik.svg" type="image/svg+xml"></object>
</body>
</html>

Der betroffene Teil in meinem javascript Code:

function insertDots(cx, cy) {
    const svgObject = document.getElementById("svgObject");
    console.log(svgObject.contentDocument) // hier erhalte ich in der Console immer "null"


    svgObject.addEventListener("load", function() {
        if (svgObject && svgObject.contentDocument) {
            const sonarSVG = svgObject.contentDocument.getElementById("sonar");
            console.log(sonarSVG);
        }
    });
}

(Die funktion insertDots(cx, cy) wird alle paar sekunden aufgerufen und ich erhalte in der Browser Konsole immer nur null. Dementsprechend ist die if Bedienung darunter auch nie wahr)

In meiner .svg Datei gibt es definitv die id= "sonar":

<svg id="sonar" width="700" height="700" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="rgba(128, 128,   128, 0.25)" />
</svg>

So sieht meine Ordnerstruktur aus:

Website
│   SonarVisuallisierung.html
│
├── scripts
│       script.js
│
└── styles
        style.css
        sonarGrafik.svg


Gibt es irgendwo einen Fehler oder eine andere Möglichkeit auf die Elemente der .svg Datei über das script zuzugreifen? (Den Inhalt der .svg will ich ausgelagert lassen und nicht in das HTML einfügen wegen der Übersichtlichkeit)

Danke für alle Lösungsvorschläge.

HTML, Webseite, JavaScript, Code, Programmiersprache
Wieso funktioniert der Code nicht?

binärbaum:

wenn ich das in der main erstelle mit

Tree t1 = new Tree();
t1.add(9);
t1.add(1);
t1.add(23);
und dann t1.root ausprinte funktinoiert es, aber t1.root.left liefert null, also es gibt nen fehler, wieso aber?

hat es was damit zu tun " parent = new TNode(data);" ?ich übergeben den linken knoten der wurzel und das ist jetzt parent, und dann weise ich parent neu zu also ich weise den linken knoten der wurzel neu zu, wieso geht das aber nicht?


public class Tree {
    TNode root;


    Tree(){
        this.root = null;
    }


    public void add(int data){
        if(root == null){
            root = new TNode(data);
        }else{
            if(data < this.root.data){
                add(data, root.left);
                System.out.println("miosty");
            }else {
                add(data, root.right);
            }
        }
    }
     public void add(int data, TNode parent){
        if(parent == null){
            System.out.println("Zu");
           parent = new TNode(data);
        }else{
            if(data < parent.data){
                add(data, parent.left);
            } else {
                add(data, parent.right);
            }
        }
    }
}
HTML, Webseite, Java, JavaScript, Array, Code, PHP, Programmiersprache, Python, Webentwicklung, Algorithmus
Google Search Console einzelne Unterseiten entfernen lassen?
Bild zum Beitrag
PC, Computer, Marketing, Software, Windows, Browser, Google, Hardware, HTML, IT, Webseite, programmieren, CSS, WordPress, JavaScript, Mozilla Firefox, Suchmaschine, Google Chrome, Bing, CMS, Edge, Informatik, PHP, Programmiersprache, SEO, Webdesign, Webentwicklung, Indexierung, Laravel, google search console
Cross Origin Anfrage blockiert?

Ich möchte gerade eine REST-API für mein Heimnetzwerk einrichten um über z.B. einen button einen CMD befehl auf dem Server PC auszuführen.

Mein Pythonscript für die API:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/execute-command', methods=['POST'])
def execute_command():
  # Hier wird der Code zum Ausführen des Befehls eingefügt
  result = "Befehl wurde ausgeführt."
  return jsonify({"response": result})

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=5000)
Mein HTML Script<!DOCTYPE html>
<html>
<head>
  <title>API Test</title>
</head>
<body>
  <button id="executeBtn">Befehl ausführen</button>
<script>
  document.getElementById('executeBtn').addEventListener('click', function() {
    fetch('http://localhost:5000/execute-command', { // Verwende absolute URL
      method: 'POST',
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Fehler:', error);
    });
  });
</script>
</body>
</html> 

Ich bekomme als Fehler von Firefox in der Konsole:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:5000/execute-command. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

Fehler: TypeError: NetworkError when attempting to fetch resource

Entschuldigung wenn es offensichtlich ist, bin da noch sehr frisch und habe keine Lösung gefunden.

Netzwerk, HTML, Webseite, JavaScript, HTML5, Code, Netzwerktechnik, Port, Programmiersprache, Python, Webentwicklung, JSON, Flask
Value in jQuery Code?

ich habe für ein Projekt drei verschiede Options Felder (Ja/Nein) Fragen.

Es soll ein Wert (value) "1" ausgegeben werden wenn man, eins der drei Felder auf Ja setzt.

Wenn man aber alle drei Felder auf Nein setzt, soll ein Wert von "2" kommen.

Und wenn man nicht auswählt, also alles frei lässt, soll ein Wert "3" kommen

Hier ein dieser Options Felder:

      <div class="col-xs-6">
                                                        <div class="form-group">
                                                            <label for="Roeteln" style="width: 150px;">Röteln</label>
                                                                <input type="text" class="form-control" name="Roeteln" style="width: 80px;"
                                                                value="{if $values.Roeteln == 'X'}Ja{elseif $values.Roeteln == ''}Nein{elseif $values.Roeteln == ''}{/if}">
                                                                <select class="form-control" name="Roeteln" style="width: 80px;">
                                                                    <option value="" selected=""></option>
                                                                    <option value="X">Ja</option>
                                                                    <option value="">Nein</option>
                                                                </select>
                                                        </div>
                                                    </div>
HTML, Webseite, JavaScript, HTML5, JQuery, Programmiersprache, Webentwicklung, Frontend
Wie baue ich die php Codes in eine HTML Datei ein?
<?php
// time() 
$ms_aktuelle_uhrzeit                                = strtotime("+2 hour");
$ms_aktuelle_uhrzeit_formatiert                     = $ms_aktuelle_uhrzeit;
$ms_aktuelle_uhrzeit_stunde_0                       = date("G", $ms_aktuelle_uhrzeit);
$ms_aktuelle_uhrzeit_stunde_00                      = date("H", $ms_aktuelle_uhrzeit);
//$ms_aktuelle_uhrzeit_minute_0                     = date(" ", $ms_aktuelle_uhrzeit);
$ms_aktuelle_uhrzeit_minute_00                      = date("i", $ms_aktuelle_uhrzeit);
//$ms_aktuelle_uhrzeit_sekunde_0                    = date("H", $ms_aktuelle_uhrzeit);
$ms_aktuelle_uhrzeit_sekunde_00                     = date("s", $ms_aktuelle_uhrzeit);
$ms_aktuelle_uhrzeit_stunde_00_minute_00_sekunde_00 = $ms_aktuelle_uhrzeit_stunde_00 . ":" . $ms_aktuelle_uhrzeit_minute_00 . ":" . $ms_aktuelle_uhrzeit_sekunde_00 ;
$ms_dateiname                                       = $_SERVER['SCRIPT_FILENAME'];
$zaehler                                            = fopen("/storage/emulated/0/Venter/HopWeb/Projects/a1/Server/ZÄHLER_FOR_LOG_INFO.MS","r+");
$wert                                               = fgets($zaehler, 5);
$lesen                                              = file_get_contents("/storage/emulated/0/Venter/HopWeb/Projects/a1/Server/ZÄHLER_FOR_LOG_INFO.MS");
$user_info                                          = array("MS_Log_NR_" . $lesen, "_MS_LOG_TIME_" . $ms_aktuelle_uhrzeit_stunde_00_minute_00_sekunde_00, "_MS_FILE_" . $ms_dateiname);
$eintrag                                            = implode(";", $user_info)."\r\n";
?>




<?php
if($wert == "") $wert = 0;
$wert++                  ;
rewind($zaehler         );
fwrite($zaehler, $wert  );
fclose($zaehler         );
file_put_contents("/storage/emulated/0/Venter/HopWeb/Projects/a1/Server/MS_LOG_INFO.MS", $eintrag, FILE_APPEND);
echo "Log Infos werden dokumentiert!";
?>


HTML, PHP, Programmiersprache
IT-Fachkräfte im Informatik Unterricht in Schulen?

Hallo,

der klassische Weg um in Deutschland Lehrer zu werden ist über ein Lehramtsstudium oder mit zunächst Berufserfahrung sammeln im jeweiligen Fachbereich und dann auch mit einem Studium Berufsschullehrer werden.

Doch sind wir uns selbst mal gegenüber ehrlich welcher Fachinformatiker wird freiwillig, wenn er nicht auf den Kopfgefallen ist und 9+ Jahre Berufserfahrung hat auf das Jahresgehalt von jenseits über den 50.000,€ verzichten, um in einer unterbezahlten Lehrer Position anzufangen ?

Dieses Phänomen macht sich an den grund- und weiterbildenden Schulen [Grundschule, Realschule, Gymnasium,...] bemerkbar.

In den ersten Schuljahren gelten wichtigere Prioritäten wie lesen und schreiben lernen.

Doch aller spätestens ab der 5. Klasse werden die ersten Grundkenntnisse zum Computer vermittelt .

Im Unterricht wird meist mit den wichtigsten Office Programmen aus dem Hause Microsoft oder Open Office angefangen, doch dies zieht sich meiner Erfahrung nach bis zum Erhalt des Abschlusses.

Schüler mit Technischem Interesse erledigen die Textformatierung- oder Tabellenkalkulationsaufgabe in unter 15 Minuten und langweilen sich dann die Restliche Zeit der Unterrichtsstunde.

Und trotz des Informatikunterrichts werden IT´ler Tagtäglich zu Fehlertickets her zitiert wie z.B. mein Drucker druckt nicht, Passwort vergessen, Herr/Frau Ich-weiß-alles-besser und weiteren gerufen.

Bei uns in der Kommune hat nun ein neuer junger Bürgermeister angefangen, der sich die Digitalisierung auf die Fahne geschrieben hat.

Meine Idee wäre ihn an sein Wahlprogramm zu erinnern ihm von meiner damaligen Erfahrung mit Win 2000 im Jahre 2009 im Informatikunterricht  zu berichten und den späteren Erfahrungen in der weiterführenden Schule mit dem Quantensprung auf Windows 10.

Gleichzeitig möchte ich auch einen Vorschlag unterbreiten, um die Schüler für die sich stetig weiterentwickelte Computerwelt zu wappnen auch in Bezug auf das Internet [Social Media,..] und den damit verbundenen Risiken.

Also konkret IT-Fachkräfte planen aktiv den Unterricht gemeinsam mit den Lehrkräften, bieten außerdem eine Informatik AG an und kümmern sich um die IT-Infrastruktur der Schule.

Funfakt unser damaliges Netzwerk war so schlecht eingerichtet, dass jeder Schüler Admin Rechte am PC hatte und mit etwas Ahnung per Remote ganze Rechner herunterfahren konnte.

Wäre das rein rechtlich möglich das IT-Fachkräfte beratend ohne Lehrerstudium am Unterricht beteiligt sind ?

Bzw. der Bürgermeister das, wenn auch mit Abstimmung des KM einführen darf.

Computer, Microsoft Word, Lernen, Studium, Microsoft Excel, Schule, Microsoft PowerPoint, Netzwerk, HTML, CSS, Bildung, Java, Unterricht, JavaScript, Schüler, ASCII, Beamte, Fachinformatiker, Informatik, Informatiker, Informationstechnik, Informationstechnologie, Lehrer, Lehrerin, Pascal, Python, Team, turbo pascal, Rathaus, Bürgermeister, Fachinformatiker Systemintegration, kultusministerium, PowerShell, schulcomputer, Angular, lehren
Wie kann ich bei dieser Website den Link nach oben rechts verschieben?

Ich habe einen Link erstellt, der mich wieder zurück zur Hauptwebsite bringt. Nur möchte ich, dass der Link oben rechts ist. Kann mir da jemand helfen?

Die Webseite:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preise</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      padding-left: 100px;
      padding-right: 100px;
    }

    .preise-navbar {
      padding-left: 100px;
      color: rgb(52, 57, 56);
    }

    .preise-container {
      background-color: white;
      padding: 16px;
    }

    table {
      border-collapse: collapse;
    }

    td,
    th {
      padding: 16px;
      border-bottom: 2px solid #8ebf42;
      text-align: center;
      padding-left: 100px;
    }

    a {
    }
  </style>
</head>
<body>
  <div class="preise-container">
    <h1 class="preise-navbar">Preise:</h1>
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Erwachsene:</td>
      <td>20€</td>
    </tr>
    <tr>
      <td>Kinder unter 18</td>
      <td>10€</td>
    </tr>
    <td>Kinder unter 6</td>
    <td>3€</td>
  </table>
  <a href="Index.html">Zurück</a>
</body>
</html>
HTML, Webseite, CSS, HTML5, Programmiersprache, Webdesign, Webentwicklung, Visual Studio Code

Meistgelesene Beiträge zum Thema HTML