[HTML/JS] Textbox en pop-up, feedback van popup naar textbox

donderdag 28 januari 2016 16:47

Pizza_Boom schreef op donderdag 28 januari 2016 @ 17:29:
[...]

Oh, wacht, je gaat mij toch niet vertellen dat ik had moeten zeggen:
HTML:
1
nummer = document.getElementById("tweak");
had moeten doen hè?

edit:
Nee, bij nader inzien zal dat het denk ik ook niet zijn. Maar wat dan wel.

[...]
Je wilt natuurlijk alleen die proberty vervangen. Anders had je waarschijnlijk dat element in eerste instantie niet eens hoeven neerzetten, maar had dat neergezet kunnen worden in je document.getElementById();

Het element dat je pakt met getElementById is je input-textbox. Daar wil je de value property van hebben.
De manier daarvoor is dus

JavaScript:

1	document.getElementById("id").{propertyNaam}

Kijk ook eens hier om te zien wat je ermee kan: https://developer.mozilla...I/Document/getElementById

Voor dit soort standaard javascript-dingetjes vind je het vaak het best op de MDN websites, mozzila heeft erg goede documentatie.

Acties:

+2 Henk 'm!

donderdag 28 januari 2016 17:07

Je prompt haalt de data op en stopt die in de variabele "nummer". Dat nummer kan je weer gebruiken om weg te schrijven naar je textbox.
Wat je daarvoor kan doen, is je textbox een ID geven en die ID gebruiken in je javascript:

JavaScript:

1	document.getElementById("jouwIDHier")

Dat element heeft een property genaamd value, daar kan je je nummer weer instoppen.
Ik ga hier niet de hele code posten, maar volgens mij moet je hier al flink mee uit de voeten kunnen.

Acties:

0 Henk 'm!

donderdag 28 januari 2016 17:12

Topicstarter

Dus dan, als ik het goed begrijp, zou dat er zo uit komen te zien? Ik twijfel heel erg over de declaratie van het ID.

HTML:

<body>
    <form>
        <input type="text" name="nummer" id="tweak" value="tweak" readonly="readonly">
        <input type="submit" value="Nieuw nummer" onclick="msg()">
    </form>
</body>

<script>
    function msg() {
        var nummer = prompt("voer nummer in");
        document.getElementById("tweak") = nummer;
        }
</script>

Merethil schreef op donderdag 28 januari 2016 @ 16:47:
Ik ga hier niet de hele code posten, maar volgens mij moet je hier al flink mee uit de voeten kunnen.

Dat verwacht ik ook niet. Maar eens een goede schop in de juiste richting is wel eens fijn.

Acties:

+1 Henk 'm!

donderdag 28 januari 2016 17:29

Pizza_Boom schreef op donderdag 28 januari 2016 @ 17:07:
Dus dan, als ik het goed begrijp, zou dat er zo uit komen te zien? Ik twijfel heel erg over de declaratie van het ID.
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <form>
        <input type="text" name="nummer" id="tweak" value="tweak" readonly="readonly">
        <input type="submit" value="Nieuw nummer" onclick="msg()">
    </form>
</body>

<script>
    function msg() {
        var nummer = prompt("voer nummer in");
        document.getElementById("tweak") = nummer;
        }
</script>
[...]
Dat verwacht ik ook niet. Maar eens een goede schop in de juiste richting is wel eens fijn.

Je declaratie van ID is helemaal prima, maar lees even goed wat document.getElementById doet. Je haalt een element uit je document op, namelijk het element met ID "tweak". Daarna ga je proberen om dat element te declareren als "nummer". Waar gaat het fout denk je?

Let ook goed op dat ik zei dat er een property aan je element zit, genaamd value. Zou je dan je hele element of alleen die property willen vervangen met het getal dat in "nummer" staat?

Acties:

0 Henk 'm!

donderdag 28 januari 2016 17:47

Topicstarter

Merethil schreef op donderdag 28 januari 2016 @ 17:12:
Je declaratie van ID is helemaal prima, maar lees even goed wat document.getElementById doet. Je haalt een element uit je document op, namelijk het element met ID "tweak". Daarna ga je proberen om dat element te declareren als "nummer". Waar gaat het fout denk je?

Oh, wacht, je gaat mij toch niet vertellen dat ik had moeten zeggen:

HTML:

1	nummer = document.getElementById("tweak");

had moeten doen hè?

edit:
Nee, bij nader inzien zal dat het denk ik ook niet zijn. Maar wat dan wel.

Let ook goed op dat ik zei dat er een property aan je element zit, genaamd value. Zou je dan je hele element of alleen die property willen vervangen met het getal dat in "nummer" staat?

Je wilt natuurlijk alleen die proberty vervangen. Anders had je waarschijnlijk dat element in eerste instantie niet eens hoeven neerzetten, maar had dat neergezet kunnen worden in je document.getElementById();

[ Voor 4% gewijzigd door Pizza_Boom op 28-01-2016 17:36 ]

Acties:

Beste antwoord ✓
+1 Henk 'm!

donderdag 28 januari 2016 20:26

Pizza_Boom schreef op donderdag 28 januari 2016 @ 17:29:
[...]

Oh, wacht, je gaat mij toch niet vertellen dat ik had moeten zeggen:
HTML:
1
nummer = document.getElementById("tweak");
had moeten doen hè?

edit:
Nee, bij nader inzien zal dat het denk ik ook niet zijn. Maar wat dan wel.

[...]
Je wilt natuurlijk alleen die proberty vervangen. Anders had je waarschijnlijk dat element in eerste instantie niet eens hoeven neerzetten, maar had dat neergezet kunnen worden in je document.getElementById();

Het element dat je pakt met getElementById is je input-textbox. Daar wil je de value property van hebben.
De manier daarvoor is dus

JavaScript:

1	document.getElementById("id").{propertyNaam}

Kijk ook eens hier om te zien wat je ermee kan: https://developer.mozilla...I/Document/getElementById

Voor dit soort standaard javascript-dingetjes vind je het vaak het best op de MDN websites, mozzila heeft erg goede documentatie.

Acties:

0 Henk 'm!

Creepy

Tactical Espionage Splatterer

Oja: Waarom die in PROG staat? Omdat het uiteindelijk de bedoeling is dat aan de hand van het ingevoerde nummer een txtfile wordt aangemaakt met als naam het ingevoerde nummer. Dus de kans heel groot is dat ik daarop door wil gaan in dit topic.

Dat zal best, maar het het probleem dat je nu hebt is een puur client side JS / DOM iets. En dat hoort toch echt in Webdesign, Markup & Clientside Scripting. Mocht je straks tegen een ander probleem aanlopen, dan kan je een nieuw topic openen op de juiste plek.

Programming -> Webdesign, Markup & Clientside Scripting

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney

donderdag 28 januari 2016 22:54

Acties:

0 Henk 'm!

vrijdag 29 januari 2016 12:31

Topicstarter

Merethil schreef op donderdag 28 januari 2016 @ 17:47:
[...]

Het element dat je pakt met getElementById is je input-textbox. Daar wil je de value property van hebben.
De manier daarvoor is dus

It is working

HTML:

<body>
    <form>
        <input type="text" name="nummer" id="tweak" value="test" readonly="readonly">
        <input type="submit" value="Nieuw nummer" onclick="msg()">
    </form>
</body>

<script>
    function msg() {
        var nummer = prompt("voer nummer in");
        document.getElementById("tweak").value = nummer;
        }
</script>

Kijk ook eens hier om te zien wat je ermee kan: https://developer.mozilla...I/Document/getElementById

Voor dit soort standaard javascript-dingetjes vind je het vaak het best op de MDN websites, mozzila heeft erg goede documentatie.

Had ik ook al zitten kijken ja. Komt veel naar boven drijven bij zoekopdrachten.

Acties:

0 Henk 'm!

vrijdag 29 januari 2016 12:40

Topicstarter

Merethil schreef op donderdag 28 januari 2016 @ 17:47:
Het element dat je pakt met getElementById is je input-textbox. Daar wil je de value property van hebben.
De manier daarvoor is dus

Hmmm, toch nog iets dat ik niet wil. Op het moment dat ik op "OK" gedrukt heb op mijn pop up, waar ik ook 123456780 ingevuld heb, komt er een refresh en verandert de url van 192.168.0.x/pagina naar 192.168.0.x/pagina/?nummer=1234567890 en wordt mijn textbox toch weer leeg, terwijl het juist de bedoeling was dat de waarde in de textbox blijft staan.

Het liefste kom ik helemaal af van die pagerefresh en de daarbij behorende url verandering, maar die waarde die in het textvak blijft staan is het belangrijkste. Momenteel ben ik aan het stoeien met de [url=http://www.w3schools.com/html/html5_webstorage.asp]sessionStorage scripts[/code], maar die doen nog niet wat ik wil.

Hij blijft namelijk de URL veranderen waardoor ik het gevoel heb dat het systeem denkt dat het een andere sessie is en dus niets invult.

HTML:

<body>
    <form>
        <input type="text" name="nummer" id="tweak" value="test" readonly="readonly">
        <input type="submit" value="Nieuw nummer" onclick="msg()">
    </form>
</body>

<script>
    if(typeof(Storage) !== "undefined")
        {
            if(sessionStorage.nummer)
                {
                    sessionStorage.nummer = nummer;
                }
            else
                {
                    sessionStorage.nummer = "";
                }
        }
    else
        {
        document.getElementById("tweak").value = "";
        }
    </script>
    
    <script>
    function msg() 
        {   
            var nummer = prompt("voer nummer in");
            document.getElementById("tweak").value = nummer;
        }
    </script>

Acties:

+1 Henk 'm!

vrijdag 29 januari 2016 13:23

Pizza_Boom schreef op vrijdag 29 januari 2016 @ 12:31:
[...]
Hmmm, toch nog iets dat ik niet wil. Op het moment dat ik op "OK" gedrukt heb op mijn pop up, waar ik ook 123456780 ingevuld heb, komt er een refresh en verandert de url van 192.168.0.x/pagina naar 192.168.0.x/pagina/?nummer=1234567890 en wordt mijn textbox toch weer leeg, terwijl het juist de bedoeling was dat de waarde in de textbox blijft staan.

Het liefste kom ik helemaal af van die pagerefresh en de daarbij behorende url verandering, maar die waarde die in het textvak blijft staan is het belangrijkste. Momenteel ben ik aan het stoeien met de [url=http://www.w3schools.com/html/html5_webstorage.asp]sessionStorage scripts[/code], maar die doen nog niet wat ik wil.

[..]

Dat komt omdat je button in de form een submit doet naar de form target (in dit geval dezelfde pagina) en alle inputs als requests meeneemt.
Ik zou zelf ook geen submit-button maken voor zoiets als jij nu doet, maar een <a> gebruiken. Zoiets als dit:

JavaScript:

1	<a href="javascript:void(0)" onclick="myJsFunc();">KLIK HIER</a>

Dit voorkomt dat je een submit van je form doet, maar je voert wel je javascript functie uit. De <a> kan je dan weer stylen als een button, mocht dat echt nodig zijn.

Edit: Ik zou me als ik jou was wel wat meer inlezen in wat de HTML die je gebruikt precies doet. Er is een reden waarom een <form> met een <input type="submit"> dit doet en wat het precies doet. Eveneens voor Javascript.
Je kan namelijk prima doorgaan met wat proberen en hopen dat 't werkt, maar het lijkt erop dat je gewoon de basis mist en die is behoorlijk belangrijk met dit soort zaken. Extra indien je dit zou willen gaan uitbreiden buiten een simpele pagina "HTML met een beetje Javascript".

Edit2: Trouwens, je zet je gegevens nergens in de storage. Dus je kan prima zoeken of de Storage bestaat en of nummer erin zit, maar aangezien je hem na het plaatsen in de textfield niet meer in je storage zet, zal je hem er ook nooit uit kunnen halen.

[ Voor 33% gewijzigd door Merethil op 29-01-2016 12:53 ]

Acties:

+1 Henk 'm!

Spinal

Merethil schreef op vrijdag 29 januari 2016 @ 12:40:
[...]
Ik zou zelf ook geen submit-button maken voor zoiets als jij nu doet, maar een <a> gebruiken. Zoiets als dit:
JavaScript:
1
<a href="javascript:void(0)" onclick="myJsFunc();">KLIK HIER</a>

Gebruik dan een <button type="button">, want dat is het type element dat hier voor gemaakt is. Zeker als je daarna zegt:

Ik zou me als ik jou was wel wat meer inlezen in wat de HTML die je gebruikt precies doet.

Full-stack webdeveloper in Groningen

vrijdag 29 januari 2016 13:28

Acties:

+1 Henk 'm!

vrijdag 29 januari 2016 13:43

Spinal schreef op vrijdag 29 januari 2016 @ 13:23:
[...]

Gebruik dan een <button type="button">, want dat is het type element dat hier voor gemaakt is. Zeker als je daarna zegt:

[...]

Behalve als je bijvoorbeeld een non-javascript fallback wilt hebben. Een button doet vrij weinig als Javascript uitstaat terwijl je een <a>-tag kan gebruiken met een URL als je JS-functie het niet doet omdat Javascript bij de gebruiker uitstaat.

Edit: Woops, hier stond een fout.

[ Voor 7% gewijzigd door Merethil op 29-01-2016 13:28 ]

Acties:

+1 Henk 'm!

vrijdag 29 januari 2016 13:49

NaN

<button type="button">klik</button> doet inderdaad niets zonder javascript, maar <button type="submit">klik</button> werkt prima zonder javascript. Daar het standaardgedrag van uitschakelen als javascript beschikbaar is (progressive enhancement) lijkt me gemakkelijker dan elementen toevoegen voor fallback.

Do you seek to engage in or have you ever engaged in terrorist activities, espionage, sabotage, or genocide?

Acties:

+1 Henk 'm!

vrijdag 29 januari 2016 14:07

8088 schreef op vrijdag 29 januari 2016 @ 13:43:
<button type="button">klik</button> doet inderdaad niets zonder javascript, maar <button type="submit">klik</button> werkt prima zonder javascript. Daar het standaardgedrag van uitschakelen als javascript beschikbaar is (progressive enhancement) lijkt me gemakkelijker dan elementen toevoegen voor fallback.

Niet als je geen page-refresh wilt hebben. Het komt erop neer dat de TS een functie wil laten uitvoeren zonder de form te laten triggeren, dan is <button type="submit"> helemaal niet handig, want hij wil Javascript laten uitvoeren. Als je later toch fallback wilt toevoegen is een <a>-tag dan beter geschikt, tenzij je de fallback echt als form-submit wilt laten verlopen maar dat zie ik niet vaak.

Edit: Ik zie trouwens geen enkele mogelijkheid om submit te voorkomen in een <input type="submit"> wanneer je ook een onclick hebt. Ik probeerde in de onclick false te retourneren, maar zo te zien kan je niet makkelijk zonder jQuery zomaar de submit catchen en overriden met een eigen stukje code als iemand Javascript enabled heeft.

Edit2: Zo te zien toch wel. Je kan het volgende doen:

HTML:

<form>
    <input type="text" id="test" name="test" />
    <input type="submit" onclick="return validate();" />
</form>

function validate() {
    document.getElementById("test").value="Hello!";
    return false;
}

Blijkbaar annuleert dit het standaardgedrag tenzij je Javascript hebt uitstaan.

[ Voor 29% gewijzigd door Merethil op 29-01-2016 14:00 ]

Acties:

+1 Henk 'm!

vrijdag 29 januari 2016 14:20

NaN

Een andere mogelijkheid is gebruik maken van e.preventDefault() en/of e.stopPropagation().

Do you seek to engage in or have you ever engaged in terrorist activities, espionage, sabotage, or genocide?

Acties:

+1 Henk 'm!

vrijdag 29 januari 2016 14:36

8088 schreef op vrijdag 29 januari 2016 @ 14:07:
Een andere mogelijkheid is gebruik maken van e.preventDefault() en/of e.stopPropagation().

Zonder jQuery ingeladen te hebben werkt dat niet bij mij. Ik zie ook zo snel geen google hits die 't aan de praat krijgen zonder jQuery.

Acties:

+1 Henk 'm!

vrijdag 29 januari 2016 15:05

NaN

Oh, misschien vergis ik me daarin. Heb nu geen tijd om het uit te zoeken, maar dat wil ik nog wel doen.

Do you seek to engage in or have you ever engaged in terrorist activities, espionage, sabotage, or genocide?

Acties:

0 Henk 'm!

vrijdag 29 januari 2016 15:15

Topicstarter

Je bent even een paar uur bezig en je halve topic is vol gediscussieerd.

Ik volg jullie niet helemaal, maar ben wel heel erg blij dat er meer mensen zijn die met mij mee willen denken en mij in de juiste richting willen helpen. $_/-\o_$ $_/-\o_$ Daarvoor alvast mijn dank.

Merethil schreef op vrijdag 29 januari 2016 @ 12:40:
Dat komt omdat je button in de form een submit doet naar de form target (in dit geval dezelfde pagina) en alle inputs als requests meeneemt.
Ik zou zelf ook geen submit-button maken voor zoiets als jij nu doet, maar een <a> gebruiken. Zoiets als dit:
JavaScript:
1
<a href="javascript:void(0)" onclick="myJsFunc();">KLIK HIER</a>
Dit voorkomt dat je een submit van je form doet, maar je voert wel je javascript functie uit. De <a> kan je dan weer stylen als een button, mocht dat echt nodig zijn.

Die <a> kan je ook weer omstylen naar een knop als klikbaar plaatje toch? Daar kan ik wel weer wat voor knutselen. Een grote knop is wel handig, gezien het idee van de interface nog steeds een touchscreen is.

Edit: Ik zou me als ik jou was wel wat meer inlezen in wat de HTML die je gebruikt precies doet. Er is een reden waarom een <form> met een <input type="submit"> dit doet en wat het precies doet. Eveneens voor Javascript.
Je kan namelijk prima doorgaan met wat proberen en hopen dat 't werkt, maar het lijkt erop dat je gewoon de basis mist en die is behoorlijk belangrijk met dit soort zaken. Extra indien je dit zou willen gaan uitbreiden buiten een simpele pagina "HTML met een beetje Javascript".

Busted.

Ik ben niet in deze materie opgeleid, ik ben een jonge werktuigbouwer/elektrotechneut, ook daar mis ik ervaring. Dus ja, programmeren kan ik wel wat, maar als ik het over programmeren heb, bedoel ik daarmee al snel het schrijven van firmware voor chipjes en dergelijke. Dit is wat ongelukkig gelopen, maar nog steeds fysiek project, automatisering van een machine. Uiteindelijk moet je keuzes maken en kom je op de beste optie uit en dat blijkt in dit geval een GUI geschreven in HTML te zijn. Waarop je jezelf maar in het diepe stort en met html, javascript, php, nodeJS e.d. aan de slag gaat. Uiteindelijk is de basis van vele talen redelijk terug te voeren naar C en kom ik er wel redelijk doorheen, maar echte diepgaande kennis van functies e.d. ontbreekt gewoon. Dat is dan ook een hoop google werk en trial-error met dingen die mogelijk zouden kunnen werken. En dan zit je dingen te typen en dan bedenk je weer 3x dat A en B de revue al gepasseerd zijn, maar dat het misschien wel C, D of E kan zijn, dus ga je weer door.

Edit2: Trouwens, je zet je gegevens nergens in de storage. Dus je kan prima zoeken of de Storage bestaat en of nummer erin zit, maar aangezien je hem na het plaatsen in de textfield niet meer in je storage zet, zal je hem er ook nooit uit kunnen halen.

Hmmm, ja... Dat kan ik nog eens proberen.

Acties:

+1 Henk 'm!

Spinal

Merethil schreef op vrijdag 29 januari 2016 @ 13:28:
[...]

Behalve als je bijvoorbeeld een non-javascript fallback wilt hebben. Een button doet vrij weinig als Javascript uitstaat terwijl je een <a>-tag kan gebruiken met een URL als je JS-functie het niet doet omdat Javascript bij de gebruiker uitstaat.

Dat stond echter niet in je voorbeeld

Full-stack webdeveloper in Groningen

vrijdag 29 januari 2016 15:25

Acties:

+1 Henk 'm!

zaterdag 30 januari 2016 03:04

Spinal schreef op vrijdag 29 januari 2016 @ 15:15:
[...]

Dat stond echter niet in je voorbeeld

Klopt, ik zat ook niet actief voorbeelden te voeden, maar als je vanuit usability en customizability kijkt is <button type="button" /> eigenlijk niet heel nuttig, des te meer omdat je <a>-tags ook heel mooi kunt customizen.
Wel vind ik het een valide punt van je hoor, maar een fallback voor non-javascript-gebruik kan je dan een stuk makkelijker toevoegen en dat vind ik persoonlijk erg belangrijk.

Pizza_Boom schreef op vrijdag 29 januari 2016 @ 15:05:

Busted. Ik ben niet in deze materie opgeleid, ik ben een jonge werktuigbouwer/elektrotechneut, ook daar mis ik ervaring. Dus ja, programmeren kan ik wel wat, maar als ik het over programmeren heb, bedoel ik daarmee al snel het schrijven van firmware voor chipjes en dergelijke. Dit is wat ongelukkig gelopen, maar nog steeds fysiek project, automatisering van een machine. Uiteindelijk moet je keuzes maken en kom je op de beste optie uit en dat blijkt in dit geval een GUI geschreven in HTML te zijn. Waarop je jezelf maar in het diepe stort en met html, javascript, php, nodeJS e.d. aan de slag gaat. Uiteindelijk is de basis van vele talen redelijk terug te voeren naar C en kom ik er wel redelijk doorheen, maar echte diepgaande kennis van functies e.d. ontbreekt gewoon. Dat is dan ook een hoop google werk en trial-error met dingen die mogelijk zouden kunnen werken. En dan zit je dingen te typen en dan bedenk je weer 3x dat A en B de revue al gepasseerd zijn, maar dat het misschien wel C, D of E kan zijn, dus ga je weer door.

Ik heb het zelf ook spelenderwijs geleerd een aantal jaar geleden en eigenlijk erg weinig gebruik gemaakt van HTML/CSS/Javascript in de tussentijd (werk zelf momenteel alleen aan Middleware-applicaties, dus weinig GUI en veel achtergrondcode).
Uiteindelijk is het gewoon veel doen dat 't leert, maar veel van de punten waar 't op mis ging in je eerste voorbeeld kun je plukken uit een simpele tutorial van Javascript/HTML, dus vandaar dat ik je erop wilde wijzen.

Houdt trouwens totaal niet in dat ik heer en meester ben in Javascript/HTML, dat zie je ook hierboven (<button type="button"> kende ik zelfs niet gezien ik altijd werkte met een gestylde <a>-tag (bedankt voor de tip, Spinal!)) en moet ik mijn meerdere erkennen in mensen die allerhande mooie trucjes kennen met Javascript.

Vaak grijp ik zelf ook gewoon naar jQuery, dat is lekker makkelijk werken, maar als je 99,9% daarvan niet gebruikt is het zonde om zo'n library te includen (die elke request naar jouw server weer meegeserveerd wordt...), dus wilde ik je op weg helpen met plain Javascript.

[ Voor 66% gewijzigd door Merethil op 29-01-2016 15:31 ]

Acties:

0 Henk 'm!

zaterdag 30 januari 2016 17:38

Topicstarter

Merethil schreef op vrijdag 29 januari 2016 @ 15:25:
Ik heb het zelf ook spelenderwijs geleerd een aantal jaar geleden en eigenlijk erg weinig gebruik gemaakt van HTML/CSS/Javascript in de tussentijd (werk zelf momenteel alleen aan Middleware-applicaties, dus weinig GUI en veel achtergrondcode).
Uiteindelijk is het gewoon veel doen dat 't leert, maar veel van de punten waar 't op mis ging in je eerste voorbeeld kun je plukken uit een simpele tutorial van Javascript/HTML, dus vandaar dat ik je erop wilde wijzen.

Waar ik, ook voor NodeJS, tegenaan gelopen ben en nog steeds tegenaan loop, is dat best veel tutorials niet werken of niet volledig zijn. Wellicht komt dat doordat ik echt de GPIO eraan heb hangen en moet/wil gebruiken. Daarnaast merk ik dat je voor specifieke oplossingen toch al snel hulp moet vragen aan mensen mét kennis van zaken, omdat veel vraagstukken niet volledig worden uitgelegd, waardoor je eigenlijk een halve oplossing hebt. Ik ben hier nou een aantal maanden mee bezig en straks is het hardware combineren, printplaat ontwerpen en draaien maar. Het einde is in zicht en ik heb een gigantische leercurve gemaakt, ik ben van zo'n beetje groen in serieus programmeren/ontwikkelen eerst PHP in gedoken (compleet met apache host op de RPi), toen HTML met cliënt side Javascript, tussendoor nog gevochten met Python en nu met NodeJS en HTML eindelijk zo ver onderweg dat ik kan zeggen dat ik het prille test, speel en probeer stadium voorbij ben. Er begint zich nu, ook in software, een concreter product te vormen.
En eerlijk gezegd, ik ben er nu ook wel een beetje klaar mee. Echt sparren over software zit er ook niet in, mijn collega's zijn allemaal werktuigbouwers of zitten op sales en er vroeg onderlaatst iemand: "Ben je nou nog steeds met LEDjes en knopjes bezig?"

Houdt trouwens totaal niet in dat ik heer en meester ben in Javascript/HTML, dat zie je ook hierboven (<button type="button"> kende ik zelfs niet gezien ik altijd werkte met een gestylde <a>-tag (bedankt voor de tip, Spinal!)) en moet ik mijn meerdere erkennen in mensen die allerhande mooie trucjes kennen met Javascript.

Geeft niet. Zo leren we allemaal bij. Op zich niet eens erg dat je niet dagelijks hier mee bezig bent. Ik merk dat als ik kennissen advies vraag die echt werkzaam zijn als dev/programmer ofzo, dat ik oplossingen krijg die ik moeilijk kan volgen. Dat is dan al zo hi tech programmeren, dat ik reversed engineering eigenlijk niet echt meer kan toepassen.

Vaak grijp ik zelf ook gewoon naar jQuery, dat is lekker makkelijk werken, maar als je 99,9% daarvan niet gebruikt is het zonde om zo'n library te includen (die elke request naar jouw server weer meegeserveerd wordt...), dus wilde ik je op weg helpen met plain Javascript.

Ik denk dat wat er draait straks al zwaar genoeg is. Ik heb juist toch al voor NodeJS gekozen om te zorgen dat er niet constant gepolld e.d. hoeft te worden (en gister kwam er iemand met de optie long poll in het fablab, die kende ik ook nog niet) en zo de server (wat feitelijk nog steeds een raspberry pi is) te ontlasten.

Acties:

0 Henk 'm!

R4gnax

Merethil schreef op vrijdag 29 januari 2016 @ 15:25:
Klopt, ik zat ook niet actief voorbeelden te voeden, maar als je vanuit usability en customizability kijkt is <button type="button" /> eigenlijk niet heel nuttig, des te meer omdat je <a>-tags ook heel mooi kunt customizen.

Je vergeet accessibility. En juist daar is het verschil tussen een button en een anchor wel heel belangrijk.

Merethil schreef op vrijdag 29 januari 2016 @ 13:49:
[...]

Edit: Ik zie trouwens geen enkele mogelijkheid om submit te voorkomen in een <input type="submit"> wanneer je ook een onclick hebt.

Je moet ook helemaal niet een onclick op de submit button gebruiken, maar met addEventListener een listener registeren voor het submit event op het form element zelf. Dat werkt ook wanneer iemand met bijv. een onscreen keyboard of met assistive technology het form probeert te submitten. In die gevallen kan en mag het namelijk zo zijn dat de submit button en dus de click op die button compleet overgeslagen wordt...

zaterdag 30 januari 2016 19:47

Acties:

0 Henk 'm!

zondag 31 januari 2016 10:00

R4gnax schreef op zaterdag 30 januari 2016 @ 17:38:
[...]

Je vergeet accessibility. En juist daar is het verschil tussen een button en een anchor wel heel belangrijk.

Maar hoe regel je dan een graceful fallback? Tot nu toe heb ik niet gezien dat een button veel anders kan dan via JavaScript (input submit daargelaten)

Voor de eventlistener geef ik je gelijk in, maar is dat met plain old JS makkelijk te doen? Want tot nu toe heb ik veelal gezien dat iedereen dat alleen oplost met jquery, wat mij het gevoel geeft dat het normaal heel convoluted is...

Acties:

+1 Henk 'm!

R4gnax

Merethil schreef op zaterdag 30 januari 2016 @ 19:47:
Maar hoe regel je dan een graceful fallback? Tot nu toe heb ik niet gezien dat een button veel anders kan dan via JavaScript (input submit daargelaten)

Cascading Stylesheet:

1 2	html.no-js .js-only { display : none !important; } html.js .no-js-only { display : none !important; }

en dan standaard op het html element de "no-js" class zetten die tijdens page load omgewisseld wordt voor een "js" class met een klein stukje script.

Merethil schreef op zaterdag 30 januari 2016 @ 19:47:
[...]
Voor de eventlistener geef ik je gelijk in, maar is dat met plain old JS makkelijk te doen? Want tot nu toe heb ik veelal gezien dat iedereen dat alleen oplost met jquery, wat mij het gevoel geeft dat het normaal heel convoluted is...

JavaScript:

var myForm = document.getElementById( "my-form" );
myForm.addEventListener( "submit", function( event ) {
  event.preventDefault();
});

zondag 31 januari 2016 14:08

Acties:

0 Henk 'm!

maandag 1 februari 2016 09:56

R4gnax schreef op zondag 31 januari 2016 @ 10:00:
[...]

<noscript> bestaat nog steeds. Niet elegant, maar wel precies voor dit soort scenario's bedoeld: situaties waar je niet anders kunt dan alternatieve content presenteren voor gebruikers die scripting uit hebben staan.

Of je gebruikt een paar classes om te switchen tussen scripted en fallback content. Je kunt bijv. wat styles schrijven zoals:
Cascading Stylesheet:
1
2
html.no-js .js-only { display : none !important; }
html.js .no-js-only { display : none !important; }
en dan standaard op het html element de "no-js" class zetten die tijdens page load omgewisseld wordt voor een "js" class met een klein stukje script.

[...]
JavaScript:
1
2
3
4
var myForm = document.getElementById( "my-form" );
myForm.addEventListener( "submit", function( event ) {
  event.preventDefault();
});

Thanks! Natuurlijk betere oplossingen, had ik nooit aan gedacht. <noscript> is verder eigenlijk prima natuurlijk.

Die eventlistener ga ik vaker gebruiken, scheelt weer jquery inladen (ik zocht hier gisteren op maar op mijn telefoon zag ik zo snel alleen jquery-oplossingen, dus ging er vanuit dat 't zo'n onhandig javascript-ding was wat niet lekker werken is en dat ze daarom altijd naar jquery grepen)

@TS: Hierboven dus een aantal antwoorden waarvan die van R4gnax naar mijn mening de meest zinnige, logische en meest best practice is.

Acties:

0 Henk 'm!

maandag 1 februari 2016 10:46

Topicstarter

Thanks voor jullie feedback. Imho is een gebruiker die javascript uit heeft staan niet aan de orde. De hele applicatie draait om de javascript toepassing en het is geen wereldwijd bruikbare applicatie. Als er meer dan 3 mensen mee verbinden, denk ik dat het al veel is. De onderliggende laag is al Javascript in de vorm van NodeJS en zonder is het niet bruikbaar. Die laag is dé applicatie.

Ik ga mij eens verdiepen in eventlisteners en als ik straks wat heb, meld ik mijzelf weer.

Acties:

0 Henk 'm!

maandag 1 februari 2016 11:39

Pizza_Boom schreef op maandag 01 februari 2016 @ 09:56:
Thanks voor jullie feedback. Imho is een gebruiker die javascript uit heeft staan niet aan de orde. De hele applicatie draait om de javascript toepassing en het is geen wereldwijd bruikbare applicatie. Als er meer dan 3 mensen mee verbinden, denk ik dat het al veel is. De onderliggende laag is al Javascript in de vorm van NodeJS en zonder is het niet bruikbaar. Die laag is dé applicatie.

Ik ga mij eens verdiepen in eventlisteners en als ik straks wat heb, meld ik mijzelf weer.

Ja maar als ik Javascript lokaal heb uitstaan heeft jouw server daar verder geen last van, dus NodeJS maakt het niets uit

Acties:

0 Henk 'm!

maandag 1 februari 2016 17:02

Topicstarter

Merethil schreef op maandag 01 februari 2016 @ 10:46:
[...]

Ja maar als ik Javascript lokaal heb uitstaan heeft jouw server daar verder geen last van, dus NodeJS maakt het niets uit

Behalve dat de wisselende frontapplicatie gekoppeld aan NodeJS ook in een script hangt.

Acties:

0 Henk 'm!

maandag 1 februari 2016 17:26

Topicstarter

R4gnax schreef op zondag 31 januari 2016 @ 10:00:

JavaScript:

var myForm = document.getElementById( "my-form" );
myForm.addEventListener( "submit", function( event ) {
  event.preventDefault();
});

Ik heb hem op diverse manieren geprobeerd in te voegen, maar ik krijg het niet werkend. Ik blijf last houden van pagina refreshments mét bijbehorende URL verandering. Als ik uit onderstaande het type="submit" weg haal, refresht ie niet meer, maar ben ik de fysieke knop kwijt, dan is het gewoon een soort plat textvak, ook niet de bedoeling.

HTML:

1	<input type="submit" value="Nieuw nummer" onclick="msg()">

Dus zo:

HTML:

1	<input value="Nieuw nummer" onclick="msg()">

Ook function button werkt niet, die submit automatisch waardoor dus het nummer weer verdwijnt uit het textvak, terwijl juist de bedoeling was dat dit zou blijven staan.

Acties:

0 Henk 'm!

maandag 1 februari 2016 22:50

NaN

Kun je wat meer code laten zien? Dit werkt wel:

HTML:

<form id="my-form" action="" method="post">
  <input type="number" value="20" name="number">
  <button type="submit">klik</button>
</form>

JavaScript:

var myForm = document.getElementById("my-form");
myForm.addEventListener("submit", function(event) {
  event.preventDefault();
  var nummer = prompt("voer nummer in");
  document.getElementsByName('number')[0].value = nummer;
});

Zie https://jsfiddle.net/qqwdgoyb/

_{het nut van de prompt ontgaat me trouwens compleet}

[ Voor 6% gewijzigd door 8088 op 01-02-2016 17:35 ]

Do you seek to engage in or have you ever engaged in terrorist activities, espionage, sabotage, or genocide?

Acties:

0 Henk 'm!

dinsdag 2 februari 2016 00:03

Topicstarter

8088 schreef op maandag 01 februari 2016 @ 17:26:
Kun je wat meer code laten zien? Dit werkt wel:

HTML:

<form id="my-form" action="" method="post">
  <input type="number" value="20" name="number">
  <button type="submit">klik</button>
</form>

JavaScript:

var myForm = document.getElementById("my-form");
myForm.addEventListener("submit", function(event) {
  event.preventDefault();
  var nummer = prompt("voer nummer in");
  document.getElementsByName('number')\[0].value = nummer;
});

Zie https://jsfiddle.net/qqwdgoyb/

Ik heb het (ik zit ook niet stil) nog weer anders opgelost, op deze manier refreshed die ook niet meer en komt toch de gewenste data in mijn textbox. Nou ben ik nog steeds een html noob, dus wellicht werkt het alleen op het eerste gezicht en geeft dit later problemen?

HTML:

<script>
    function msg()
        {
            var nummer = prompt("voer nummer in");
            document.getElementById("tweak").value = nummer;
        }
</script>

<form>
    <input type="text" name="nummer" id="tweak" value="test" readonly="readonly">
    <input type="button" value="Nieuw nummer" id="tweak" onclick="msg()">
</form>

_{het nut van de prompt ontgaat me trouwens compleet}

Ik wil niet dat het werkt zonder dat er een nummer is ingevoerd in het systeem. Dit nummer wil ik weer doorkoppelen aan een stukje code die een textfile aan maakt met dit nummer als naam en in dit textfile waardes zet die verkregen worden uit een meting die middels een A/D conversie met I2C richting de host (RPi) gestuurd worden.
Het is dus de bedoeling dat er nog een if/else statement in komt die checkt of er wat is ingevoerd en indien niet, die textbox ook als pop-up laat verschijnen.

Acties:

0 Henk 'm!

R4gnax

Pizza_Boom schreef op maandag 01 februari 2016 @ 22:50:
Ik wil niet dat het werkt zonder dat er een nummer is ingevoerd in het systeem. Dit nummer wil ik weer doorkoppelen aan een stukje code die een textfile aan maakt met dit nummer als naam en in dit textfile waardes zet die verkregen worden uit een meting die middels een A/D conversie met I2C richting de host (RPi) gestuurd worden.
Het is dus de bedoeling dat er nog een if/else statement in komt die checkt of er wat is ingevoerd en indien niet, die textbox ook als pop-up laat verschijnen.

Wat is er dan mis met een gewone <input type="text" /> met een required field validatie er op?
Klinkt eigenlijk alsof je het je eigen gewoon bewust moeilijk aan het maken bent.

Overigens; lokaal een tekst file aanmaken en daar metingen ing opslaan? Hebben we het hier over een Electron-achtige toepassing ofzo? Dit klinkt namelijk niet als iets wat je met een normale browser zou doen...

dinsdag 2 februari 2016 00:13

Acties:

0 Henk 'm!