HTML "SELECT onchange=function()" löst JS Funktion nicht aus

cruunnerr · 1. Oktober 2020

Hallo,

ich habe irgendwie ein Problem, bei dem jeder Lösungsversuch scheitert... Ich beherrsche auch weder HTML, noch JS, aber möchte gerne in diesem Fall eine kleine HTML Seite bauen an welcher ich nun nach 6 Stunden Google und einlesen mit meinem Latein am Ende bin ^^

Hätte gerne eine Art Auswahlmenü, welches mir eine Variable ändert, die dann von JS weiterverarbeitet wird. Beim Klicken eines button, soll dann eben eine JS Funktion auslösen. Letzteres funktioniert auch, nur die Variable bekomm ich irgendwie nicht geändert.

Zeile 10-26 sind mein Problem. Die Variable ändert sich einfach nicht, wenn ich im Auswahlmenü den Wert 01 oder 02 auswähle.
Wenn ich die Zeile 25 zum Testen aktiviere, und dann einen Wert auswähle UND anschließend die Seite Neulade, dann wird auch der Wert geändert. Also scheint ja der prinzipielle Aufbau des Auswahlmenü zu funktionieren und JS kann auch den Wert abfragen. Das soll aber natürlich ohne Neuladen der Seite funktionieren.

Orientiert habe ich mich an diesem Beispiel: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange

HTML:

<!DOCTYPE html>
<html lang="de">

<head>
<title>Steuerzentrale</title>
</head>

<body>

    <p>Variable auswählen</p>
        <select id="ID" onchange="input_ID()">
            <option value="----">----</option>
            <option value="Eins">01</option>
            <option value="Zwei">02</option>
        </select>

<script>
                       
function input_ID() {
   var cam = document.getElementById("ID").value;
//  document.write(cam);
}

var cam
//var cam = document.getElementById("ID").value; 
document.write(cam);

function live() {
    const Http = new XMLHttpRequest();
    const url='http://10.10.30.5:57536/show?live';
    Http.open("GET", url+"&camera="+cam);
    Http.send();

    Http.onreadystatechange = (e) => {
        console.log(Http.responseText)
    }
}

</script>

</main>


<button type="button" onclick="live()">Live</button>


</body>

</html>

Raybeez · 1. Oktober 2020

Das onchange-Event wird ausgelöst. Daraufhin läuft die Funktion input-ID. In dieser Funktion wird eine neue Variable mit dem Namen "cam" erstellt und bekommt den Wert des Select-Elements zugewiesen. Dann ist die Funktion zu Ende und diese cam-Variable wird wieder gelöscht.

Es gibt auch eine zweite, globale cam-Variable (Zeile 24), aber die bekommt nie einen Wert zugewiesen. Aber genau mit dieser Variable versuchst du zu arbeiten.

Es wäre sinnvoll, wenn du ein JavaScript-Tutorial machst. Ohne zu wissen, was die Gültigkeitsbereiche von Variablen sind, wirst du JavaScript-Code nicht verstehen können.

Woodz · 1. Oktober 2020

HTML:

<!DOCTYPE html>
<html lang="de">

<head>
<title>Steuerzentrale</title>
</head>

<body>

    <p>Variable auswählen</p>
        <select id="ID" onchange="input_ID()">
            <option value="----">----</option>
            <option value="Eins">01</option>
            <option value="Zwei">02</option>
        </select>

<script>
    
var cam;

function input_ID() {
   cam = document.getElementById("ID").value;
//  document.write(cam);
}


//var cam = document.getElementById("ID").value;
document.write(cam);

function live() {
    const Http = new XMLHttpRequest();
    const url='http://10.10.30.5:57536/show?live';
    Http.open("GET", url+"&camera="+cam);
    Http.send();

    Http.onreadystatechange = (e) => {
        console.log(Http.responseText)
    }
}

</script>

Bin mir nicht sicher, aber so müsste es doch funktionieren.
Die Variable "cam" wird global deklariert, bekommt dann in der Funktion einen Wert zugewiesen (das var muss weg) und kann dann auch in den nachfolgenden Funktionen genutzt werden, da global deklariert.

cruunnerr · 1. Oktober 2020

Hey danke für die schnellen Antworten.

Bei beiden Antworten waren dann auch die entscheidenen Tips für mich dabei.
Habs jetzt so zum laufen gebracht. Ein einfaches input_id(); (Zeile 30) hat noch gefehlt

HTML:

<!DOCTYPE html>
<html lang="de">

<head>
<title>Steuerzentrale</title>
</head>

<body>

    <p>Variable auswählen</p>
        <select id="ID" onchange="input_ID()">
            <option value="----">----</option>
            <option value="Eins">01</option>
            <option value="Zwei">02</option>
        </select>

<script>

var protocol = "http"
var ip = "127.0.0.1";
var port = "57536";
   
var cam;

function input_ID() {
cam = document.getElementById("ID").value;
document.getElementById("auswahl").innerHTML = "Gewaehlte ID: " + cam;
}

input_id();

function live() {
const Http = new XMLHttpRequest();
const url=protocol+"://"+ip+":"+port+"/show?live";
Http.open("GET", url+"&camera="+cam);
Http.send();

Http.onreadystatechange = (e) => {
console.log(Http.responseText)
}
}

</script>

scooter010 · 1. Oktober 2020

Zu den "Best practices" beim Programmieren gehört es, globale Variablen nur als read-only zu verwenden und diese niemals innerhalb von Funktionen zu modifizieren, niemals. Arbeite doch mit return...

netzgestaltung · 1. Oktober 2020

scooter010 schrieb:
Zu den "Best practices" beim Programmieren gehört es

Da JS eine Prototype Basierte Sprache ist, kannst du diese Regel nicht 1:1 immer anwenden.
Da globale Variablen häufig als Namespaces fungieren werden deren Inhalte meistens laufend verändert.
Global bedeutet hier nur lediglich dass das Window Object erweitert wird.

Daher wäre meine Empfehlung einer best Practice eher die, einen eigenen Namespace zu nutzen:
https://stackoverflow.com/questions/881515/how-do-i-declare-a-namespace-in-javascript

Und natürlich wegkommen von inline JS vie Attributen.

Javascript:

;(function(){ // wird automatisch ausgeführt, variablen haben einen lokalen scope

  window.steuerzentrale = function(){
    // Privater space
    var protocol = "http",
        ip = "127.0.0.1",
        port = "57536",
        auswahl_id = 'auswahl',
        auswahl,
        cams_id = 'ID',
        cams,
        cam,
        button_id = 'live-button',
        button;
   
    // Public API
    return {
      ready: function ready(){
        var steuerzentrale = this;

        cams = document.getElementByID(cams_id);
        button = document.getElementByID(button_id);
        auswahl = document.getElementById(auswahl_id).;

        cams.addEventListener('change', function(){
          cam = cams.value;
          auswahl.innerHTML = "Gewaehlte ID: " + cam;
        });

        button.addEventListener('click', function(){
          steuerzentrale.live();
          return false;
        });
      },
      live: function(){
        const Http = new XMLHttpRequest();
        const url = protocol + "://" + ip + ":" + port + "/show?live";

        Http.open("GET", url + "&camera=" + cam);
        Http.send();
        Http.onreadystatechange = (e) => {
          console.log(Http.responseText);
        }
      }
    };
  }(); // der funktionsaufruf setzt die variable "steuerzentrale" auf den return wert der function

  if (document.readyState != 'loading'){
    steuerzentrale.ready();
  } else {
    document.addEventListener('DOMContentLoaded', steuerzentrale.ready);
  }
})();

~~wo die "live" funktion ausgeführt wird konnte ich aber nicht erkennen.~~ tja, nicht weit genug gescrollt.

würde dem button noch eine ID geben, zb "live-button", diese ID habe ich ins beispiel übernommen.

Suche

HTML "SELECT onchange=function()" löst JS Funktion nicht aus

cruunnerr

Captain

Raybeez

Lt. Junior Grade

Woodz

Lieutenant

cruunnerr

Captain

scooter010

Commander

netzgestaltung

Captain