range value an <a href> anhängen

Diskutiere range value an <a href> anhängen im JavaScript Forum im Bereich Programmierung; Hallo, ich programmiere eine eigene html-Seite für die Steuerung meiner Heimautomation. Bisher bin ich ganz gut mit HTML ausgekommen. Nun benötige...
F

Fraggle

New member
Beiträge
3
Punkte Reaktionen
0
Hallo,
ich programmiere eine eigene html-Seite für die Steuerung meiner Heimautomation.
Bisher bin ich ganz gut mit HTML ausgekommen.
Nun benötige ich aber anscheinend Javascript für mein Problem.
Ich habe einen Range-Slider (0-100). Je nach dem, was dort eingestellt wird, soll über einen Button eine URL in einem iFrame aufgerufen werden, die aus einem festen Bestandteil + dem Wert des Range-Sliders bestehen soll.
Im Code-Beispiel: URL -> http://test.fritz.box/menu/0?go=XXX (XXX soll durch den eingestellten Slider-Wert ersetzt werden und die URL beim Klick auf den Button in einem Dummy-iframe (height:0px; width:0px;border:0px also unsichtbar) geöffnet werden.
Könnte mir hierzu eventuell jemand helfen und mir meinen Code entsprechend erweitern. Ich habe leider selbst nach längerer Suche nichts passendes gefunden, und Javascript ist nicht so ganz mein Ding :-(

Code:
  <html>
  <body>
    <div id="container">
      <div style="clear : both"></div>
      <input type="range" value="25" min="0" max="100" id="prozent" oninput="this.nextElementSibling.value = this.value">
      <output>25</output>
      <p style="font-family: Arial, Verdana;margin:0px"><font size="3">&nbsp;---------------------------------------------------</font></p>
      <a href="http://test.fritz.box/menu/0?go=XXX" target="invisibleFrame"><button class="function">SET</button></a>
      <div style="clear : both"></div>  
    </div>
    <iframe name="invisibleFrame" style="height:0px; width:0px;border:0px none red;background-color:transparent;" />
  </body>
  </html>
 
Zuletzt bearbeitet:
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Gern, versuche dies:
Code:
<!DOCTYPE html>
<html>

<head>
    <title>Heimautomatisierung</title>
    <style>
        iframe {
            height: 0px;
            width: 0px;
            border: 0px none red;
            background-color: transparent;
        }
    </style>
    <script>
        function setIt() {
            const
                // Festen Teil der URL bereit stellen:
                url = 'http://test.fritz.box/menu/0?go=',
                // Wert des Rangesliders bereit stellen:
                val = document.querySelector('#prozent').value;
            // scr-Attribut auf die vollständige URL setzen:
            document.querySelector('iframe').src = url + val;
        }
    </script>
</head>

<body>
    <div id="container">
        <input type="range" value="25" min="0" max="100" id="prozent"
            oninput="this.nextElementSibling.value = this.value">
        <output>25</output>
        <hr>
        <!-- Funktion setIt beim Klick auf den Button aufrufen: -->
        <button class="function" onclick="setIt();">SET</button>
    </div>
    <iframe name="invisibleFrame" />
</body>

</html>
Um das src-Attribut des iFrame zu setzen brauchst Du kein a-href-Tag.

Ich war so frei, das CSS in den head zu setzen und die horizontale Linie durch ein hr-Tag zu ersetzen.

Dieses clear: both; weist darauf hin, dass Du float-Layout verwendest. In den allermeisten Fällen ist das veraltet und wird besser durch Flex- und Gridlayout ersetzt.
 
F

Fraggle

New member
Beiträge
3
Punkte Reaktionen
0
Vielen, vielen Dank für die schnelle Antwort und den Code-Schnipsel.
Ich habe es gleich in meine html-Datei eingebaut und es hat auf Anhieb funktioniert.
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Frage noch aus Neugier: Warum öffnest Du einen iFrame, der gar nicht sichtbar ist?
 
F

Fraggle

New member
Beiträge
3
Punkte Reaktionen
0
Ich spreche damit Shelly-Aktoren an, die beim Aufruf eine Seite zurück geben. Diese Seite interessiert mich aber nicht. Ich möchte, dass nur die action-URL ausgeführt wird, und dass meine Fernbedienungs-Web-Seite weiterhin angezeigt bleibt.
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Ich möchte, dass nur die action-URL ausgeführt wird, und dass meine Fernbedienungs-Web-Seite weiterhin angezeigt bleibt.
So etwas in der Richtung hatte ich schon vermutet. Wenn Du nur eine URL ausführen willst, kannst Du das ohne den Umweg über einen iFrame auch mit der fetch-API:
Code:
fetch('deine-action-url');
 
Thema:

range value an <a href> anhängen

Oben Unten