Get text from input (Programmering/Javascript)

Det underlättar för oss om du kopierar in koden med "Infoga programkod". Då har vi lättare att hjälpa dig.

Det mesta ser ok ut tycker jag utan att ha testat koden men det är en sak som ser skum ut. Du har en script-tag med src-attribut vilket innehär en pekare till en extern fil. Den ska avslutas med en </script> men du har lagt in kod (myFunction) innan den och det är jag inte säker på om det fungerar. Testa med att ta bort src-attributet och ev skapa en ny rad <script defer src="index.js"> </script> alt <script defer src="index.js"/>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">

<title>JavaScript</title>
</head>
<body>
<div class="formlar">
<h1>Personuppgifter</h1>
<p>Fyll i name och ålder i formuläret nedan!</p>

<form action="#">
<label for="fname">Förnamn</label><br>
<input type="text" name="fname" id="fname" placeholder="Förnamn">
<br>
<label for="lname">Efternamn<br></label><br>
<input type="text" name="lname" id="lname" placeholder="Efternamn">
<br>
<label for="age">Ålder<br></label>
<input type="number" name="number" id="age" placeholder="Ålder" value="0">
<br>

<button onclick="myFunction()">Klicka</button>
<br>

</div>

function myFunction() {

var fName = document.getElementById('fname').value;
var lName = document.getElementById('lname').value;
var age = document.getElementById('age').value;

document.getElementById("output").innerHTML = "Mitt namn är " + fName + " " + lName + " och jag är " + age + " år gammal";

}

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">

<title>JavaScript</title>
</head>
<body>
<div class="formlar">
<h1>Personuppgifter</h1>
<p>Fyll i name och ålder i formuläret nedan!</p>

<form action="#">
<label for="fname">Förnamn</label><br>
<input type="text" name="fname" id="fname" placeholder="Förnamn">
<br>
<label for="lname">Efternamn<br></label><br>
<input type="text" name="lname" id="lname" placeholder="Efternamn">
<br>
<label for="age">Ålder<br></label>
<input type="number" name="number" id="age" placeholder="Ålder" value="0">
<br>

<button onclick="myFunction()">Klicka</button>
<br>

<p class="output" id="output"></p>
 
</form>

</div>



<script>

function myFunction() {
 
var fName = document.getElementById('fname').value;
var lName = document.getElementById('lname').value;
var age = document.getElementById('age').value;

document.getElementById("output").innerHTML = "Mitt namn är " + fName + " " + lName + " och jag är " + age +" år gammal";

}

</script>

</body>
</html>

Den här fungerar. Jag tog bort ref till index.js eftersom jag inte har den men du kan lägga in

CurtJ skrev:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">

<title>JavaScript</title>
</head>
<body>
<div class="formlar">
<h1>Personuppgifter</h1>
<p>Fyll i name och ålder i formuläret nedan!</p>

<form action="#">
<label for="fname">Förnamn</label><br>
<input type="text" name="fname" id="fname" placeholder="Förnamn">
<br>
<label for="lname">Efternamn<br></label><br>
<input type="text" name="lname" id="lname" placeholder="Efternamn">
<br>
<label for="age">Ålder<br></label>
<input type="number" name="number" id="age" placeholder="Ålder" value="0">
<br>

<button onclick="myFunction()">Klicka</button>
<br>

<p class="output" id="output"></p>
 
</form>

</div>



<script>

function myFunction() {
 
var fName = document.getElementById('fname').value;
var lName = document.getElementById('lname').value;
var age = document.getElementById('age').value;

document.getElementById("output").innerHTML = "Mitt namn är " + fName + " " + lName + " och jag är " + age +" år gammal";

}

</script>

</body>
</html>

Den här fungerar. Jag tog bort ref till index.js eftersom jag inte har den men du kan lägga in

Men Jag får ingeting medan jag fyller mina input och klickar på min Button?

När du exekverar ett formulär så skickas normalt formulärvärdena till servern och sen laddas sidan om. Iom det så skrivs alla fält över inkl din p-output. Ta bort form-taggen (och </form) så fungera det nog. Frågan är om det är det du vill uppnå?

Har du lärt dig att inspektera html-sidor. I Firefox som jag använder så högerklickar du på en sida och väljer "inspekter" så kan du titta på kod, se fel, prestanda osv.. Chrome har motsvarande och jag gissar att de flesta browsers har samma funktionalitet.

Det svarar "Can't find variable: myFunction" medan jag öppnar inspekter klickar på console!

men myFunction finns redan i html koden for button!

Det beror på att du har ett fel i koden innan din funktion. Kan du klippa in din kod igen så tittar jag

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="index.css">

	<title>JavaScript</title>
</head>
<body>
	<div class="formlar">
		<h1>Personuppgifter</h1>
		<p>Fyll i name och ålder i formuläret nedan!</p>

			input type="text" name="lname" id="lname" placeholder="Efternamn">
			<br>
			<label for="age">Ålder<br></label>
			<input type="number" name="number" id="age" placeholder="Ålder">
			<br>

			<button onclick="myFunction()">Klicka</button>
			<br>

			<p class="output" id="output"></p>

	</div>

	<script defer src="index.js">
		function myFunction() {
			
			var fName = document.getElementById('fname').value;
			var lName = document.getElementById('lname').value;
			var age = document.getElementById('age').value;

			document.getElementById("output").innerHTML = "Mitt namn är " + 		fName + " " + lName + " och jag är " + age + " år gammal";

		}
	</script>

</body>
</html>

Du har inte gjort som jag skrev tidigare.

Ändra <script defer src="index.js"> till <script>

och rätta upp dina inputfält igen så ska det fungera

Tack så mycket!

Det funkar rakt!

Kan du beskriva lite vad som var orsaken att det inte funkade med defer eller bara src="index.js"?

Och inte heller med form taggen!

Ja den sista rättningen förutom att du rensat lite för mycket input-fält är att raden

laddar en extern fil som heter index.js, defer säger att den ska laddas parallellt med att sidan laddas annars laddas den sekventiellt och tar därmed lite längre tid.

Då du använder script-taggen så så räknar inte browsern med att det finns någon kod efter det och din funktion "finns" inte.

Det du ska göra om du behöver index.js är att ladda den separat med

och sen skriver du din egen kod inom

... kod

</script>

Javascript är ett kraftfullt språk men det är knepigt för att det inte finns några bra hjälpmedel (vad jag vet) när man kodar. Det är delvis på grund av att det är så flexibelt att en kodningsmiljö har svårt att gissa vad kodaren menar. Ett hårt typat språk där man deklarerar variabler är mycket lättare för en utvecklingsmiljö. Men som sagt, kodar du för webben så är javascript din vän, du måste bara vara noga och lära dig att inspektera med hjälp av browsern. Det finns åtskilliga ramverk som underlättar utveckling om man ska göra några större system.

Lycka till!

just - form-taggen skapar ett formulär med fält och meningen med det är att skicka in fältvärdena i formuläret till en server. När servern returnerar så får man en ny sida som ska visas och i ditt fall när du använder src="#" så visas samma sida och skriver över dina fält (nollställer). Det finns sätt att hantera det om man vill ha ett formulär men om man inte vill ha sidan omritad brukar man använda en teknik som kallas Ajax där man skickar valfritt data med ett asynkront anrop till servern. Men det tror jag är överkurs just nu.

En förtydligande. Har du ett formulär (<form> </form>) och en knapp i formuläret så gör den knappen att formuläret skickas enl ovanstånde. Du kunder i ditt fall flytta ut knappen utanför <form></form> och då hade inte formuläret skickats och sidan hade inte laddats om. Men då hade ju inte heller <form> </form> haft någon mening. Prova det så ger det dig kanske lite bättre förståelse.

Det går också att deklarera knappen med type="button" och då kan det vara innanför <form></form> utan att skicka formuläret. En knapp utan type-attributet blir automatiskt ett type="submit"

CurtJ skrev:
En förtydligande. Har du ett formulär (<form> </form>) och en knapp i formuläret så gör den knappen att formuläret skickas enl ovanstånde. Du kunder i ditt fall flytta ut knappen utanför <form></form> och då hade inte formuläret skickats och sidan hade inte laddats om. Men då hade ju inte heller <form> </form> haft någon mening. Prova det så ger det dig kanske lite bättre förståelse.

Det går också att deklarera knappen med type="button" och då kan det vara innanför <form></form> utan att skicka formuläret. En knapp utan type-attributet blir automatiskt ett type="submit"

Tack för förklaringen CurtJ......👏