Vill du vara del av diskussionerna i forumet, ställa frågor eller hjälpa andra? Registrera dig här!

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

Trädvy Permalänk
Medlem
Registrerad
Jan 2020

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
Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Okt 2008

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

Dator 1: Ryzen 9 3900x | Asus X570 ROG Strix Gaming-F | 16GB DDR4 | GTX 1080ti SLI | NZXT H440
Dator 2: i7 5820k | Asrock X99M | 32GB DDR4 | GTX 970 | Fractal Design Node 804
Dator 3: i5 2500 | Asus P8Z77-M | 8GB DDR3 | Fractal Design r3
Laptop: Macbook Pro 2017 | i5 7360U | 8GB DDR3

Trädvy Permalänk
Medlem
Registrerad
Jan 2020

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!

Trädvy Permalänk
Medlem
Plats
-
Registrerad
Dec 2004

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

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Mar 2015
Skrivet av MarieWebb:

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

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

I'm not having a glass of wine, I'm having six! It's called a tasting and it's classy!
[ [ MSI X470 Gaming Pro Carbon ⦿ Ryzen 3600 ⦿ Dark Rock Pro 4 ⦿ G.Skill Flare X 3200MHz CL14 (2x8GB) ⦿ Intel 660p M.2 1 TB ⦿ ASUS 1070 ROG Strix Gaming ⦿ Corsair RM750X ⦿ Define C TG ⦿ Corsair LL120 x3 ⦿ Corsair LL140 x2 ] ]

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
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!

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

Trädvy Permalänk
Medlem
Registrerad
Jan 2020

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!

Trädvy Permalänk
Medlem
Registrerad
Aug 2017
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!

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!

[ { systemutvecklare med för lite fritid } ]

{ i7-5960X | RTX 2080 | 48GB corsair dominator platinum | 3x 1TB SSD }