Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

onclick-button html-formulär och länka till js

1
Skriv svar
Permalänk
Medlem
●

onclick-button html-formulär och länka till js

Har i uppgift att skapa ett formulär i HTML med en onclick button, och länka till en extern Javascript-fil. När man klickar på knappen skall en text ploppa upp under formuläret med de data man fyllt i (namn + ålder): "Mitt namn är xx och jag är xx år gammal"
Formuläret blir rätt men får inte knappen att funka! js-filen är färdig, den ska jag inte skriva själv. Men jag gör något galet i HTML. Är osäker på vilken form action och method jag skall ha, samt vart skall jag sätta js-länken och <p id="demo">
Har suttit i evigheter, tacksam för hjälp(är ny på detta)!

HTML-koden jag har skrivit hittills är:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript</title>
<script src="c-uppgift.js"></script>

</head>
<body>

<h2>Personuppgifter</h2>
<p>Fyll i namn och ålder i formuläret nedan</p>

<form action="#">

<label>Förnamn:<br>
<input type="text" Id="fname"/></label><br>
<label>Efternamn:<br>
<input type="text" Id="Iname"/></label><br>
<label>Ålder:<br>
<input type="text" Id="age" value="0"/></label><br>

<input type="button" value="Klicka!" onclick="myFunction()">
<p id="demo"></p>

</form>
</body>
</html>

js-filen heter c-uppgift och den har jag fått färdig i en extern fil:

function myFunction() {
var age = document.getElementById("age").value;
var lname = document.getElementById("lname").value;
var fname = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = "<p>Mitt namn är " + fname + " " + lname + " och jag är " + age + " år gammal</p>";
}

Tagit bort skrik på hjälp i rubrik /Mod
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Välkommen till sweclockers!

Till en början rekommenderar jag att du använder code taggar när du skriver kod, det underlättar för andra att läsa.
skrivs med [ code ] kod här [ /code ]

Gällande din kod så verkar det vara såpass enkelt att du har blandat ihop I och L, du har t.ex. LD istället för ID (små bokstäver, skrev stora för att det ska synas bättre) och INAME istället för LNAME.

Övriga åsikter, i just det här fallet är en form lite överflödig, men det fungerar för att göra det du är ute efter.

Annan åsikt är att du lägger en paragraf inuti en paragraf, fundera på om inte någon annan tagg skulle passa bättre som container för den.

En sista sak är att jag kan välja att ange abc som min ålder, det kanske inte är önskvärt.
Läs gärna på lite om de olika input-typerna som finns att tillgå: https://www.w3schools.com/html/html_form_input_types.asp

Visa signatur

Stationär: Core i9 13900k | Asus X790 ROG Strix Gaming-F | 32GB DDR5 | RX 7900 XT | Lian Li PC-O11 dynamic evo
Laptop: Macbook Air | Apple M1

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack!!!

Det var så enkelt att jag hade blandat ihop L och i. Nu funkade det!

Uppgiften jag fick var väldigt specifik; att det skulle vara ett formulär, vad det ska stå osv.

Men: måste man inte alltid ha en form action och method på ett form?

Jag ska kolla upp de andra sakerna om input-typer, code-tagg och paragrafen.
Tack igen!

Redigera
Citera flera Citera
Permalänk
Sötast ★
●

https://www.w3schools.com/html/ är löjligt bra för webbdesign.
Sök knappen uppe i höger, fritext - go nuts.

Ex ditt problem med buttons, testa skriv button:
Du hittar exempel, live demo, attribut etc

Visa signatur

https://imgur.com/sxldiIg

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av MarieWebb:

Men: måste man inte alltid ha en form action och method på ett form?

Gå till inlägget

Det beror nog lite på vad man skall göra. Men man måste inte använda dom attributen

Visa signatur

Grubblare

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av MarieWebb:

Tack!!!

Det var så enkelt att jag hade blandat ihop L och i. Nu funkade det!

Uppgiften jag fick var väldigt specifik; att det skulle vara ett formulär, vad det ska stå osv.

Men: måste man inte alltid ha en form action och method på ett form?

Jag ska kolla upp de andra sakerna om input-typer, code-tagg och paragrafen.
Tack igen!

Gå till inlägget

Forms använda för att samla ihop all data och skicka till en server, då du du inte har en server eller submittar något så är det i detta fall överflödigt.

Finns det ingen matchande action route på din form så kommer den defaulta till att refresha sidan, vilken kanske inte är så önskvärt.

Förstår att det är tidigt i din kurs, men undvik att lägga onclick direkt din html, det är bättre att använda eventlistener och separera din markup från dina script (förstår att du fick koden färdig från läraren, så det är inte ditt fel).

Skolor tenderar tyvärr att lära ut föråldrat och i många fall dåliga practises. Sen blir man förvirrad då man inte ska göra så.

Skickades från m.sweclockers.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack för alla svar.

Ja exakt, lärarens anvisning var att lägga in onclick i HTML då hon hade skickat oss det färdiga scriptet.
Denna kurs är HTML och CSS, ska börja kolla på Javascript i nästa kurs.

Jag googlar på w3school hela tiden, suverän sida! Jag hade tänkt rätt men blandat ihop i och L som sagt.
Och bra, jag tänkte att det var så med action och method men nu vet jag, kanon!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av MarieWebb:

Tack för alla svar.

Ja exakt, lärarens anvisning var att lägga in onclick i HTML då hon hade skickat oss det färdiga scriptet.
Denna kurs är HTML och CSS, ska börja kolla på Javascript i nästa kurs.

Jag googlar på w3school hela tiden, suverän sida! Jag hade tänkt rätt men blandat ihop i och L som sagt.
Och bra, jag tänkte att det var så med action och method men nu vet jag, kanon!

Gå till inlägget

Ett tips i all välmening.

Fuska inte dig igenom HTML / CSS / Javascript-kursen om du har tankar på att jobba med programmering, HTML / CSS / Javascript är i princip ett måste att kunna grunderna i , känner du att du inte behärskar det, läs på om det, testa göra egna hemsidor, leta efter färdiga projekt att köra, testa https://www.codecademy.com/ , kör igenom deras kurser om html css javascript om och om igen tills du i princip kan skriva ren kod.

Jag själv jobbar som utvecklare, men jag sitter trots det flera timmar i veckan och läser på , ibland om nya saker, ibland för att kunna optimera mina koder och skriva bättre koder och jag tjänar så ofantligt mycket på det när jag kan skriva mina egna koder utan att behöva googla , plus att jag vet exakt vad koden gör, du kommer älska detta när du väl sätter dig in i det

Men fuska dig inte fram, fuska när det behövs, annars testa med det du tror är rätt och vipps så kommer det sitta!

Lycka till!

Visa signatur

[ -- Gaming -- ]
{ i5-9600k - RTX 3070 OC - 16GB - 3 x 1TB m.2 }
[ -- Workstation --]
{ i7-5960X | GTX 1660 6GB / Quadro | 48GB corsair dominator platinum | 20TB }
{ Lenovo T480S | i7-8650U | 16 GB | 512 GB }

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara