Avatar billede badazz Novice
11. maj 2018 - 01:48 Der er 9 kommentarer og
1 løsning

Link/knap der kalder html men ikke åbner

Hej.

Det er efterhånden rigtig mange år siden jeg har leget med html og java, så jeg er blevet mere end rusten..

jeg skal have en knap, som kalder et link, men ikke åbner linket, hvordan hulen er det nu det gøres?

(det er et relæ til lys der kan styres on/off med et http kald)
Avatar billede Slater Ekspert
11. maj 2018 - 05:42 #1
Hvad mener du med "kalder men ikke åbner"?
Avatar billede Bucher Juniormester
11. maj 2018 - 08:08 #2
Alternativt kunne du lave en lille popup med en iframe som kalder dit relæ og lav det så din popup lukker af sig selv igen.

Ellers ville jeg nok kikke i Java retningen fx http://www.baeldung.com/java-http-request

Jeg laver selv smart relæstyring af mine ting og lys i huset og jeg har valgt at lave mit eget program til PC i VB.NET som jeg med tiden vil lave til android også.
Avatar billede a3-seo.dk Ekspert
12. maj 2018 - 04:14 #3
Kan dette fra Lars Bachmann "Friske op" på hukommelsen:
http://www.larsbachmann.dk/guide-til-shortcodes-i-wordpress.html

Blot glem "shortcodes" og kig på funktionen ;-)
Avatar billede badazz Novice
12. maj 2018 - 04:54 #4
Jeg har hvis ikke fået forklaret mig godt nok..  jeg har brug for en knap... når jeg trykker på den knap, så må siden ikke skifte.. den skal blive på aktuelle side, men når jeg trykker på knappen, så skal henvisningen som er en http://adresse "kaldes" så funktionen bliver aktiveret...

jeg har fået rodet følgende sammen, ud fra noget jeg fandt på nettet:

<button type="button" onclick="loadDoc()">Lampe 1</button>

<p id="demo1"></p>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo1").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "http://192.168.10.79/cm?cmnd=Power1%20TOGGLE", true);
  xhttp.send();
}
</script>

Og det fungerer egentlig fint.. dog kan jeg nu ikke finde ud af at lave en knap mere.. jeg kan ikke lige lure hvordan jeg får udvidet koden til at kunne indsætte 2,3,4,5 osv knapper.. i <p id="demo1"> får jeg en tilbagemelding fra relæet " {"POWER1":"OFF"} " og der vil jeg gerne have at alle knapper giver tilbagemeldingen samme sted.. alter i samme <p id> hvis muligt
Avatar billede a3-seo.dk Ekspert
12. maj 2018 - 05:06 #5
Hvad med at lave en "function loadDoc2()"  til kald af "demo2"

;-)
Avatar billede Bucher Juniormester
12. maj 2018 - 05:43 #6
Bare af interesse hvad hardware bruger du?

Som a3-seo skriver, har du prøvet dette?

<button type="button" onclick="loadDoc1()">Lampe 1</button>
<button type="button" onclick="loadDoc2()">Lampe 2</button>
<button type="button" onclick="loadDoc2()">Lampe 3</button>

<p id="demo1"></p>

<script>
function loadDoc1() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo1").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "http://192.168.10.79/cm?cmnd=Power1%20TOGGLE", true);
  xhttp.send();
}

function loadDoc2() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo1").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "http://192.168.10.79/cm?cmnd=Power2%20TOGGLE", true);
  xhttp.send();
}

function loadDoc3() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo1").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "http://192.168.10.79/cm?cmnd=Power3%20TOGGLE", true);
  xhttp.send();
}
</script>
Avatar billede olsensweb.dk Ekspert
12. maj 2018 - 08:42 #7
#6
lille forbedring, det er vel det sammen der sker i alle 3 functioner, det eneste der er forskel er url, hvorfor ikke slå dem sammen til en function og tage en parameter med url med over ??

<button type="button" onclick="loadDoc('http://192.168.10.79/cm?cmnd=Power1%20TOGGLE')">Lampe 1</button>
<button type="button" onclick="loadDoc('http://192.168.10.79/cm?cmnd=Power2%20TOGGLE')">Lampe 2</button>
<button type="button" onclick="loadDoc('http://192.168.10.79/cm?cmnd=Power3%20TOGGLE')">Lampe 3</button>

<p id="demo1"></p>

<script>
function loadDoc(url) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo1").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
</script>
Avatar billede badazz Novice
12. maj 2018 - 10:14 #8
Det vil jeg lige lege med alt det i har foreslået.. havde prøvet med "loadDoc()" havde bare parkeret tallet indeni parantesen, istedet for, lige før parentesen..

Hardwaren er billige sonoff basic relæer til 35kr stykket på eBay, flashet med ny firmware..
Avatar billede olsensweb.dk Ekspert
12. maj 2018 - 11:02 #9
>havde bare parkeret tallet indeni parantesen, istedet for
det kan du også gøre, og nøjes med at tage tallet over som parameter
<button type="button" onclick="loadDoc('1')">Lampe 1</button>
<button type="button" onclick="loadDoc(2)">Lampe 2</button>
<button type="button" onclick="loadDoc('3')">Lampe 3</button>

<p id="demo1"></p>

<script>
function loadDoc(nr) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo1").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", 'http://192.168.10.79/cm?cmnd=Power'+nr+'%20TOGGLE', true);
  xhttp.send();
}
</script>

med tal kan du selv bestemme om du vil have tallet over som tal eller string
her er 1 og 3 som en string, og 2 som tal.


<button type="button" onclick="loadDoc('1')">Lampe 1</button>  <!-- som string -->

<button type="button" onclick="loadDoc(2)">Lampe 2</button> <!-- som tal -->

<button type="button" onclick="loadDoc(knap)">Lampe 3</button> <!-- som variabel, skal være sat før denne linje -->


man kunne overveje at gøre html coden pænere, ved at lave en addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/EventListener
https://www.w3schools.com/js/js_htmldom_eventlistener.asp

det kræver bare man har sat en value på knappen, eller sat en data- attribut man kan læse fra
https://www.w3schools.com/tags/att_button_value.asp
https://stackoverflow.com/questions/12835550/how-to-use-a-buttons-data-attribute-to-call-a-selected-javascript-function?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
Avatar billede badazz Novice
12. maj 2018 - 11:17 #10
Jeg er i mål nu, så behøver koden ikke være pænere, jeg har pyntet knapper lidt, så et det længe fint...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester