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

javascript nybörjare - switch

1
Skriv svar
Permalänk
Medlem
●

javascript nybörjare - switch

Hej!

Har under dagen börjar försöka lära mig lite javascript men har stött på lite problem.

Skulle någon kunna förklara hur jag skall omformulera denna kod? Jag vill inte bara ha ett svar, utan förklara gärna vad jag gör fel.

Som det verkar nu så plockar x bara upp den första knappen (röd) oavsett vilken jag trycker på.
Beror det kanske på att den bara plockar upp första id't och ignonerar resten? Hur skall jag tänka istället?

Jag kan ju ge varje knapp varsit ID men jag skulle vela lära mig hur man kan göra det med 'switch'.

HTML

<html>
	<head>
	</head>
	<body id='body'>
	<button onclick='colour()' id='item'>Red</button>
	<button onclick='colour()' id='item'>Green</button>
	<script src='index.js'></script>
	</body>
</html>

Javascript

function colour() {
	const x = document.getElementById("item").innerHTML;
	switch(x) {
		case 'Red':
			alert('Red');
			break;
		case 'Green':
			alert('Green');
			break;
	}
}

Tack!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Varje `id`-värde måste vara unikt (de får alltså inte vara "identiska" och detta kmr även HTML-validatorer att klaga på) och `document.getElementById()` returnerar bara det första hittade id:et (eller "null" om det inte hittade något med det givna id-värdet). Därför stannar den troligen på första id="item". Dessa "id=item" bör döpas om till "class=item" och så kan du kika på `document.getElementsByClassName()`.

Observera att den returnerar en "array-liknande" samling av alla HTML-element vars klassnamn då är "item". Du måste då switcha beroende på vilket array-element det rör sig om. För att komma åt dess textinnehåll kan du använda [array-element-index-nr].textContent (istället för [array-element-index-nr].innerHTML).

Kötta på och prova dig fram tills det "kopplar" helt plötsligt. Ta pauser om du känner att du bankar mentalt mot en vägg!

Mvh,
WKL.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Ett tips är att lägga till "console.log(x);" efter "const x = document.getElementById("item").innerHTML;", och sen titta i consolen vad x faktiskt får för värde.

Men, koden gör nog inte riktigt vad du tror, nu hämtar du texten på knappen med ID "item", oavsett vilken knapp du trycker på.

Det finns lite olika sätt att göra detta, men det som nog är mest likt vad du försöker göra är att skicka med själva objektet, som heter this, i funktionsaropet.

<html>
	<head>
	</head>
	<body id='body'>
	<button onclick='colour(this)' id='item'>Red</button>
	<button onclick='colour(this)' id='item'>Green</button>
	<script src='index.js'></script>
	</body>
</html>
Dold text

Sedan behöver du titta på det medskickade objektet, istället för att bara hämta knappen med ett specifikt ID.

function colour(obj) {
	console.log(obj.innerHTML);
	switch(obj.innerHTML) {
		case 'Red':
			alert('Red');
			break;
		case 'Green':
			alert('Green');
			break;
	}
}
Dold text

Jag har inte testat koden, men den borde nog fungera. Och debugutskrifter är din vän när du försöker förstå vad som händer!

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av jaqob:

Ett tips är att lägga till "console.log(x);" efter "const x = document.getElementById("item").innerHTML;", och sen titta i consolen vad x faktiskt får för värde.

Men, koden gör nog inte riktigt vad du tror, nu hämtar du texten på knappen med ID "item", oavsett vilken knapp du trycker på.

Det finns lite olika sätt att göra detta, men det som nog är mest likt vad du försöker göra är att skicka med själva objektet, som heter this, i funktionsaropet.

<html>
	<head>
	</head>
	<body id='body'>
	<button onclick='colour(this)' id='item'>Red</button>
	<button onclick='colour(this)' id='item'>Green</button>
	<script src='index.js'></script>
	</body>
</html>
Dold text

Sedan behöver du titta på det medskickade objektet, istället för att bara hämta knappen med ett specifikt ID.

function colour(obj) {
	console.log(obj.innerHTML);
	switch(obj.innerHTML) {
		case 'Red':
			alert('Red');
			break;
		case 'Green':
			alert('Green');
			break;
	}
}
Dold text

Jag har inte testat koden, men den borde nog fungera. Och debugutskrifter är din vän när du försöker förstå vad som händer!

Gå till inlägget

Tack så mycket för svaret. skall kika på det

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

Tack så mycket för svaret. skall kika på det

Gå till inlägget

Sen är inte switch magiskt på något sätt, utan du kan uttrycka precis samma sak med en if-sats.

function colour(obj) {
	console.log(obj.innerHTML);
	switch(obj.innerHTML) {
		case 'Red':
			alert('Red');
			break;
		case 'Green':
			alert('Green');
			break;
	}
}


function colour(obj) {
	console.log(obj.innerHTML);
	if (obj.innerHTML == 'Red') {
			alert('Red');
	}
	else if (obj.innerHTML == 'Green') {
			alert('Green');
	}
}
Dold text
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av jaqob:

Sen är inte switch magiskt på något sätt, utan du kan uttrycka precis samma sak med en if-sats.

function colour(obj) {
	console.log(obj.innerHTML);
	switch(obj.innerHTML) {
		case 'Red':
			alert('Red');
			break;
		case 'Green':
			alert('Green');
			break;
	}
}


function colour(obj) {
	console.log(obj.innerHTML);
	if (obj.innerHTML == 'Red') {
			alert('Red');
	}
	else if (obj.innerHTML == 'Green') {
			alert('Green');
	}
}
Dold text
Gå till inlägget

Ja precis. Ville bara veta hur man kan göra detta i en switch. Nu ska jag kämpa vidare! Tack

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

querySelector/querySelectorAll brukar väl anses the way to go i de flesta fall. Som nämnts returneras en NodeList som man kan göra om till en array vid behov med Array.from eller [...document.querySelectorAll]

Redigera
Citera flera Citera
Permalänk
Medlem
●

@jaqob Det finns för visso mycket om man googlar lite. Men finns det någon grundläggande gratis kurs som sticker ut lite som du kan rekommendera?

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

Varje `id`-värde måste vara unikt (de får alltså inte vara "identiska" och detta kmr även HTML-validatorer att klaga på) och `document.getElementById()` returnerar bara det första hittade id:et (eller "null" om det inte hittade något med det givna id-värdet). Därför stannar den troligen på första id="item". Dessa "id=item" bör döpas om till "class=item" och så kan du kika på `document.getElementsByClassName()`.

Observera att den returnerar en "array-liknande" samling av alla HTML-element vars klassnamn då är "item". Du måste då switcha beroende på vilket array-element det rör sig om. För att komma åt dess textinnehåll kan du använda [array-element-index-nr].textContent (istället för [array-element-index-nr].innerHTML).

Kötta på och prova dig fram tills det "kopplar" helt plötsligt. Ta pauser om du känner att du bankar mentalt mot en vägg!

Mvh,
WKL.

Gå till inlägget

När är det dags att byta namn till "WebbkodsLäraren"? Följt din tråd sedan start och kul att se att du hoppar in och hjälper andra nu

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

@jaqob Det finns för visso mycket om man googlar lite. Men finns det någon grundläggande gratis kurs som sticker ut lite som du kan rekommendera?

Gå till inlägget

Tjo igen! Har du haft möjlighet/lust att prova dig fram mer nu? Bara hojta till om det är nått nytt/annat som du plötsligt fastnar på. Jag hjälper gärna till i den utsträckning jag själv förstår det och även jag kmr ha/säga fel ibland bara så du vet!

Skrivet av martengooz:

När är det dags att byta namn till "WebbkodsLäraren"? Följt din tråd sedan start och kul att se att du hoppar in och hjälper andra nu

Gå till inlägget

Jag blir varmröd om kinderna så det nästan bränns!

Jag vill ödmjukt fortsätta kalla mig för Lärlingen eftersom jag vill aldrig påstå att jag är fullärd. Igår såg jag ett YT-klipp från en CodeTuber (Transvery Media) som berätta att vissa "natural born coders" kan vara sämre på att lära ut för att de "Cannot understand how it is to not understand" vilket jag tyckte var helt klockrent uttryckt och det fick mig att tänka på vissa matte- & fysiklärare som "know their shit but couldn't teach it to anyone else even if their lives depended on it".

Mvh,
WKL.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av WebbkodsLärlingen:

Tjo igen! Har du haft möjlighet/lust att prova dig fram mer nu? Bara hojta till om det är nått nytt/annat som du plötsligt fastnar på. Jag hjälper gärna till i den utsträckning jag själv förstår det och även jag kmr ha/säga fel ibland bara så du vet!

Jag blir varmröd om kinderna så det nästan bränns!

Jag vill ödmjukt fortsätta kalla mig för Lärlingen eftersom jag vill aldrig påstå att jag är fullärd. Igår såg jag ett YT-klipp från en CodeTuber (Transvery Media) som berätta att vissa "natural born coders" kan vara sämre på att lära ut för att de "Cannot understand how it is to not understand" vilket jag tyckte var helt klockrent uttryckt och det fick mig att tänka på vissa matte- & fysiklärare som "know their shit but couldn't teach it to anyone else even if their lives depended on it".

Mvh,
WKL.

Gå till inlägget

Ja, jag har lärt mig hur man skapar den funktionen jag var ute efter! Men jag har mycket kvar att lära. Nu gäller det bara att komma på något mindre project man kan pröva sig på. Har du några tips?

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

Ja, jag har lärt mig hur man skapar den funktionen jag var ute efter! Men jag har mycket kvar att lära. Nu gäller det bara att komma på något mindre project man kan pröva sig på. Har du några tips?

Gå till inlägget

Det klassiska är ju CRUD-appar (Create, Read, Update, Delete). Men innan det så kan du ju prova på klassiska Todo-appen bara för att lyckas hantera data i webbläsaren som sedan med hjälp av JavaScript uppdaterar på sidan?

Här har du startkoden i HTML:

<html>
	<head>
	<script defer src='index.js'></script>
	</head>
	<body>
	<p>Write your todo below:</p>
	<input type='text' id='todoInput'/>
	<button onclick='addTodo(event)' id='addTodo'>Add Todo</button>
	<p>Your todos are shown here:</p>
	<div id="todos"></div>
	</body>
</html>

Du har alltså id-värdena "todoInput", "addTodo" och "todos" (som kan "lagras/markeras" med hjälp av "document.getElementById()"). Utmaningen nu med enbart JavaScript (för all nödvändig HTML finns redan) är att hämta data från inmatningsfältet (id=todoInput) när du klickat på knappen Add Todo (id=addTodo) vilket då skriver ut den i <div>-elementet (id=todos). Tack vare att alla har id:n så kan du lätt komma åt/manipulera dessa hur du vill!

Startkoden för JS (funktionen körs när du klickar på Add Todo-knappen och förhindrar sidan att laddas om, resten får du experimentera fram en lösning för):

// Starting code for index.js
function addTodo(event) 
{
     event.preventDefault(); // Don't reload page!
    // Write the rest of your Todo solution here!
}

Tips är att "innerHTML = " _ersätter_ allt inuti HTML även alla nästlade HTML (t.ex. <p>Här var det ingen nästlad text. Men innerHTML på mig skulle ta bort mig. <b>Jag är nästlad, jag försvinner också av innerHTML = om det används på p-elementet!</b> Här är det inte nästlat igen!</p>).

Så du vill kanske använda innerHTML += som då lägger till istället för att ta bort. Men experimentera gärna med båda bara för att få en "känsla" för vad som händer med det ena eller andra. Plus vore också om du kan kontrollera att något faktiskt har skrivits i inmatningsfältet (id=todoInput) innan det skrivs ut i div-elementet (id=todos) för du vill väl inte lägga till något som är tomt?

GL HF! ^_^

Mvh,
WKL.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av WebbkodsLärlingen:

Det klassiska är ju CRUD-appar (Create, Read, Update, Delete). Men innan det så kan du ju prova på klassiska Todo-appen bara för att lyckas hantera data i webbläsaren som sedan med hjälp av JavaScript uppdaterar på sidan?

Här har du startkoden i HTML:

<html>
	<head>
	<script defer src='index.js'></script>
	</head>
	<body>
	<p>Write your todo below:</p>
	<input type='text' id='todoInput'/>
	<button onclick='addTodo(event)' id='addTodo'>Add Todo</button>
	<p>Your todos are shown here:</p>
	<div id="todos"></div>
	</body>
</html>

Du har alltså id-värdena "todoInput", "addTodo" och "todos" (som kan "lagras/markeras" med hjälp av "document.getElementById()"). Utmaningen nu med enbart JavaScript (för all nödvändig HTML finns redan) är att hämta data från inmatningsfältet (id=todoInput) när du klickat på knappen Add Todo (id=addTodo) vilket då skriver ut den i <div>-elementet (id=todos). Tack vare att alla har id:n så kan du lätt komma åt/manipulera dessa hur du vill!

Startkoden för JS (funktionen körs när du klickar på Add Todo-knappen och förhindrar sidan att laddas om, resten får du experimentera fram en lösning för):

// Starting code for index.js
function addTodo(event) 
{
     event.preventDefault(); // Don't reload page!
    // Write the rest of your Todo solution here!
}

Tips är att "innerHTML = " _ersätter_ allt inuti HTML även alla nästlade HTML (t.ex. <p>Här var det ingen nästlad text. Men innerHTML på mig skulle ta bort mig. <b>Jag är nästlad, jag försvinner också av innerHTML = om det används på p-elementet!</b> Här är det inte nästlat igen!</p>).

Så du vill kanske använda innerHTML += som då lägger till istället för att ta bort. Men experimentera gärna med båda bara för att få en "känsla" för vad som händer med det ena eller andra. Plus vore också om du kan kontrollera att något faktiskt har skrivits i inmatningsfältet (id=todoInput) innan det skrivs ut i div-elementet (id=todos) för du vill väl inte lägga till något som är tomt?

GL HF! ^_^

Mvh,
WKL.

Gå till inlägget

Ok. Tack 😀 ska kika på det ikv

Redigera
Citera flera Citera
Permalänk
Medlem
●

@WebbkodsLärlingen Är detta ett bra upplägg för en todo list eller bör jag formulera det på något annat sätt?

<html>
	<head>
	</head>
	<body>
		<div class='container'>
			<h1>Att göra:</h1>
			<input type='text' id='input'>
			<button onclick='submit()' id='submit'>Submit</button>
		</div>
		<script src='index.js'></script>
	</body>
</html>
let count = 0;
function submit() {
	const list_item = document.createElement('div');
	const text = document.getElementById('input').value;
	if(!text) {
		alert('Ingen text');
	} else {
		count++;
		list_item.id = "item_id_" + count;
		list_item.innerHTML = '<p>' + count + ' ' + text + '</p>';
		list_item.innerHTML += '<button onclick="remove(this);">Remove</button>';
		document.body.appendChild(list_item);
	}
}
function remove(x) {
	x.parentNode.remove();
}

Eller ja, detta är kanske lite renare

function submit() {
	const div = document.createElement('div');
	const input = document.getElementById('input').value;
	if(!input) {
		alert('Du skrev inget');
	} else {
		div.innerHTML = input;
		div.innerHTML += '<button onclick="remove(this)">Remove</button>';
		document.body.appendChild(div);
	}
}
function remove(x) {
	x.parentNode.remove();
}
Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av llxt:

@WebbkodsLärlingen Är detta ett bra upplägg för en todo list eller bör jag formulera det på något annat sätt?

<html>
	<head>
	</head>
	<body>
		<div class='container'>
			<h1>Att göra:</h1>
			<input type='text' id='input'>
			<button onclick='submit()' id='submit'>Submit</button>
		</div>
		<script src='index.js'></script>
	</body>
</html>
let count = 0;
function submit() {
	const list_item = document.createElement('div');
	const text = document.getElementById('input').value;
	if(!text) {
		alert('Ingen text');
	} else {
		count++;
		list_item.id = "item_id_" + count;
		list_item.innerHTML = '<p>' + count + ' ' + text + '</p>';
		list_item.innerHTML += '<button onclick="remove(this);">Remove</button>';
		document.body.appendChild(list_item);
	}
}
function remove(x) {
	x.parentNode.remove();
}
Gå till inlägget

Mycket fint jobbat! Jag hade faktiskt tänkt som "bonus-utmaning" att inkludera just förmågan att kunna radera enskild Todo men det lade du till helt själv! Jag är inte "Kejsaren av JavaScript" så ta allt jag säger som "hur den där personen förstår sig på JS just då". Det jag lärt mig hittills inom webbutveckling är att du har två huvudsakliga övergripande frågor när du ska koda:

  1. Vad är det egentligen som ska lösas? Vad ska kunna göras? Vad ska hända? Vad ska inte kunna göras? Vad ska inte kunna hända? Vad är säkerhetskraven? Vad är övriga ställda krav? Osv.

  2. Och för vem eller vilka ska allt detta göras/lösas åt? Vem är egentligen slutanvändaren bakom allt detta? En lärare? Ett företag/en kund? Andra slags slutanvändare?

Om du hade gjort exakt samma lösning åt ett företag så hade säkerligen mycket mer begärts. Nu gör du inte det, så då är den nuvarande lösningen bra som den är tycker iaf jag. Möjligen lägg till så att när en todo lyckas lägga till så ska även inmatningsfältet bli tomt igen. Här finns då ett attribut som alla input-element har som JS kan komma åt:"value" alltså <inputElement>.value på något vis som sedan i sin tur borde kunna bli tomt (""). Hm?

Du får gärna berätta hur du tänkte när du gjorde lösningen och varför (=resonerande/motiverande till valda kodbeslut) du gjorde de val du gjorde. Och detta är endast för att reflektera tillbaka på ditt eget problemlösande för att kanske göra det annorlunda nästa gång! Förresten så vill jag bjussa på ett mycket "sexigt" koncept inom JS:

JavaScript Template Literals:

// JS STRING & VARIABLE CONCATENATING
list_item.innerHTML = '<p>' + count + ' ' + text + '</p>';

// JS TEMPLATE LITERAL
list_item.innerHTML = `<p>${count} ${text}</p>`;

Se hur sexigt simpelt det blir med att slippa alla extra + och citattecken överallt! 🥰

Du inleder med två så kallade "backticks" (``) - dessa får du genom att först hålla ned valfri SHIFT-tangent och sedan klicka på vänstra tangenten om den långa raderingstangenten (den precis ovanför ENTER/RETUR) på tangentbordet - och inuti så kan du skriva i princip vanlig löptext. De sexiga "${}" är sättet du får in variabeler precis som du annars får in dem genom att _inte_ ha dem med enkelfnuttar ('') eller dubbelfnuttar ("").

Som du ser så kan vi då använda variablerna "count" och "text" precis som vanligt. Detta färgmarkeras också starkt inuti din utvecklingsmiljö som exempelvis VSCode så du ser skillnad på vad som är vanlig strängtext och vad som är variabler. Och ja! Du kan till och med (därför de är så sexiga!) anropa funktioner där som returnerar dig ett returvärde att använda där inuti istället vilket ger upphov till mer dynamiskt utskrivande (vi närmar oss då nästan "frontend-ramverksbeteende"):

// Output current value of count inside of p element 
// and also the return value from the function numbers()
list_item.innerHTML = `<p>${count} ${numbers()}</p>`;

// Function that simply returns string "694201337"
function numbers() {
  return "694201337";
}

Om du skulle vilja ha ett nästa steg i Todo-appen så vore det att kika på något som heter "document.localStorage()" då den låter dig spara lokala data ("localStorage.setItem()") för din givna webbläsare på din givna surfenhet och sedan så skulle du kunna läsa in dessa lokallagrade data ("localStorage.getItem()") när sidan laddas om. Mer här: https://developer.mozilla.org/en-US/docs/Web/API/Storage

Observera att "localStorage.setItem()" kommer att spara som "key value pair" och då behöver du använda JSON:s metoder "JSON.parse()" när du läser in data från localStorage och "JSON.stringify()" när du ska lagra via localStorage: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refer...

Och eftersom du läser in massa data så bör ju dessa också läsas in & skrivas ut när sidan laddas om? Då går det att använda sig av en for-loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refer... som då ska loopa igenom JSON.parse-localStorage data. Men du kmr stöta på ett antal problem nu vilket delvis ska kunna lösas med hjälp av en tom array ([]) och array-metoden "push".

GL HF! ^_^

Mvh,
WKL.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av WebbkodsLärlingen:

Mycket fint jobbat! Jag hade faktiskt tänkt som "bonus-utmaning" att inkludera just förmågan att kunna radera enskild Todo men det lade du till helt själv! Jag är inte "Kejsaren av JavaScript" så ta allt jag säger som "hur den där personen förstår sig på JS just då". Det jag lärt mig hittills inom webbutveckling är att du har två huvudsakliga övergripande frågor när du ska koda:

  1. Vad är det egentligen som ska lösas? Vad ska kunna göras? Vad ska hända? Vad ska inte kunna göras? Vad ska inte kunna hända? Vad är säkerhetskraven? Vad är övriga ställda krav? Osv.

  2. Och för vem eller vilka ska allt detta göras/lösas åt? Vem är egentligen slutanvändaren bakom allt detta? En lärare? Ett företag/en kund? Andra slags slutanvändare?

Om du hade gjort exakt samma lösning åt ett företag så hade säkerligen mycket mer begärts. Nu gör du inte det, så då är den nuvarande lösningen bra som den är tycker iaf jag. Möjligen lägg till så att när en todo lyckas lägga till så ska även inmatningsfältet bli tomt igen. Här finns då ett attribut som alla input-element har som JS kan komma åt:"value" alltså <inputElement>.value på något vis som sedan i sin tur borde kunna bli tomt (""). Hm?

Du får gärna berätta hur du tänkte när du gjorde lösningen och varför (=resonerande/motiverande till valda kodbeslut) du gjorde de val du gjorde. Och detta är endast för att reflektera tillbaka på ditt eget problemlösande för att kanske göra det annorlunda nästa gång! Förresten så vill jag bjussa på ett mycket "sexigt" koncept inom JS:

JavaScript Template Literals:

// JS STRING & VARIABLE CONCATENATING
list_item.innerHTML = '<p>' + count + ' ' + text + '</p>';

// JS TEMPLATE LITERAL
list_item.innerHTML = `<p>${count} ${text}</p>`;

Se hur sexigt simpelt det blir med att slippa alla extra + och citattecken överallt! 🥰

Du inleder med två så kallade "backticks" (``) - dessa får du genom att först hålla ned valfri SHIFT-tangent och sedan klicka på vänstra tangenten om den långa raderingstangenten (den precis ovanför ENTER/RETUR) på tangentbordet - och inuti så kan du skriva i princip vanlig löptext. De sexiga "${}" är sättet du får in variabeler precis som du annars får in dem genom att _inte_ ha dem med enkelfnuttar ('') eller dubbelfnuttar ("").

Som du ser så kan vi då använda variablerna "count" och "text" precis som vanligt. Detta färgmarkeras också starkt inuti din utvecklingsmiljö som exempelvis VSCode så du ser skillnad på vad som är vanlig strängtext och vad som är variabler. Och ja! Du kan till och med (därför de är så sexiga!) anropa funktioner där som returnerar dig ett returvärde att använda där inuti istället vilket ger upphov till mer dynamiskt utskrivande (vi närmar oss då nästan "frontend-ramverksbeteende"):

// Output current value of count inside of p element 
// and also the return value from the function numbers()
list_item.innerHTML = `<p>${count} ${numbers()}</p>`;

// Function that simply returns string "694201337"
function numbers() {
  return "694201337";
}

Om du skulle vilja ha ett nästa steg i Todo-appen så vore det att kika på något som heter "document.localStorage()" då den låter dig spara lokala data ("localStorage.setItem()") för din givna webbläsare på din givna surfenhet och sedan så skulle du kunna läsa in dessa lokallagrade data ("localStorage.getItem()") när sidan laddas om. Mer här: https://developer.mozilla.org/en-US/docs/Web/API/Storage

Observera att "localStorage.setItem()" kommer att spara som "key value pair" och då behöver du använda JSON:s metoder "JSON.parse()" när du läser in data från localStorage och "JSON.stringify()" när du ska lagra via localStorage: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refer...

Och eftersom du läser in massa data så bör ju dessa också läsas in & skrivas ut när sidan laddas om? Då går det att använda sig av en for-loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refer... som då ska loopa igenom JSON.parse-localStorage data. Men du kmr stöta på ett antal problem nu vilket delvis ska kunna lösas med hjälp av en tom array ([]) och array-metoden "push".

GL HF! ^_^

Mvh,
WKL.

Gå till inlägget

Ska kika på localstorage senare 😀 får kanske bli nästa project

Tack för allt du skrivit. Du är bäst 😀

Edit: nu hamnar nya divar under varandra i min todo lista. Hur ändrar jag så de nya divarna hamnar från 'top to bottom'?

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av llxt:

Ska kika på localstorage senare 😀 får kanske bli nästa project

Tack för allt du skrivit. Du är bäst 😀

Edit: nu hamnar nya divar under varandra i min todo lista. Hur ändrar jag så de nya divarna hamnar från 'top to bottom'?

Gå till inlägget

Inga problem! Bara kötta på med kodande varje dag!

Angående din edit: Enklast (imho) vore att ha ett "<div id="todos"></div>" där du lägger alla todos genom att "lagra/markera" div med id=todos först och sedan använda prepend() (https://developer.mozilla.org/en-US/docs/Web/API/Element/prep...) om det finns en todo där redan, annars append() (https://developer.mozilla.org/en-US/docs/Web/API/Element/appe...).

Då kan du alltså använda if/else tillsammans med de ovannämnda JS-metoderna. Du vill först kolla om todos-div har en todo inuti sig (.firstChild) och då lägga den _före_, annars kan du bara lägga den som "sist" vilket då blir först eftersom det finns ingen todo innan.

Om du vill köra utan den där todos-div så kmr du behöva markera alla todo-divs på något vis:

console.log(document.querySelectorAll("div[id*=item_id_]"));

Denna skriver ut i konsolen alla div vars id-värde innehåller "item_id_" någonstans inuti id-värdet.

Det är en NodeList, en array-liknande array (dvs., inbyggda array-metoder kmr ej fungera), så då kommer du åt första array-elementet genom: document.querySelectorAll("div[id*=item_id_]")[0]

och sista array-elementet genom: document.querySelectorAll("div[id*=item_id_]")[document.querySelectorAll("div[id*=item_id_]").length-1]

Markera då den första todo-div och för in din nya todo-div före den första på något vis!

Sättet att hämta sista array-elementet på är troligen inte rekommenderat sätt att skriva det på. Går att skriva det mer lättläst och ändå göra exakt samma sak. Som du ser så finns det olika sätt att lösa samma problem på och då faller det på vem du skriver/löser problemet åt. Prova gärna båda sätten för att bekanta dig mer med document.QuerySelectorAll() och så vidare!

Btw, märker du att det står ".length-1" och inte bara ".length"? Vad kan det bero på?🤔

GL HF! ^_^

Mvh,
WKL.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"

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