Vinnaren i pepparkakshustävlingen!
  • 1
  • 2
2018-01-11, 11:07
  #13
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av lespaul80
newH2[6] är syntax för en Array, vilket inte newH2 är (den är av typen Node)
Så det blir lite bakvänt.

Men du behöver 2st steg från Node objektet för att arbiträrt stoppa in saker på rätt index (index = array position).

Först sparar du en Array (lista) över alla Child Nodes som din DIV har.
Sist stoppar du in på rätt position.

let children= currentDiv.childNodes()
let insertedNode = currentDiv.insertBefore(newH2, children[5])

(https://developer.mozilla.org/en-US/...ode/childNodes)
(https://developer.mozilla.org/en-US/...e/insertBefore)

Obs 1: children[5] är 6:e objektet då en Array börjar att räkna första index positionen som 0

Obs 2: Det kanske känns lite bakvänt att man först måste ta fram en lista med referenser till alla Child Nodes, sen välja ut den man vill sätta in framför som argument till insertBefore.

Detta är inte helt lätt att förstå exakt varför det funkar så i ett språk som JavaScript som är byggt över en renderingsmotor när man börjar. Men lär dig bara "att så här funkar det" tills vidare så kommer du en dag börja ljusna mer på djupet.


let uppthree = document.createElement('h2')

let content = document.createTextNode('This is a sub headline')

uppthree.appendChild(content)

let newDiv = document.getElementById('step03')
newDiv.appendChild(uppthree)

let children = newDiv.childNodes()
let insertedNode = newDiv.insertBefore(uppthree, children[5])

är helt ute och cyklar, men här har jag skapat ett createelement för h2 taggen, fixat en text för den, appendchildat den och skrivit ut i vilken div tag den ska befinna sig i (step03). men hur får jag den i ordningen, ska jag skriva ordningen i denna kod: let children = newDiv.childNodes(här eller??) eller hur gör jag detta så det ska fungera. För antar att man måste typ hämta de olika h2 taggarna och sortera dom eller något?
Citera
2018-01-11, 11:15
  #14
Medlem
Citat:
Ursprungligen postat av Worldnature
let uppthree = document.createElement('h2')

let content = document.createTextNode('This is a sub headline')

uppthree.appendChild(content)

let newDiv = document.getElementById('step03')
newDiv.appendChild(uppthree)

let children = newDiv.childNodes()
let insertedNode = newDiv.insertBefore(uppthree, children[5])


Allting ser rätt ut förutom den markerade raden "newDiv.appendChild(uppthree)"

Du hänger in elementet som sista element där, för att senare göra en insertBefore och hänga in den på annan plats.
Dock kommer de flesta webläsare att första ta bort elementet och hänga in det på den nya platsen utan att du får något direkt fel. Så det borde bli rätt resultat. Men programmeringsmässigt är det fel att göra operationer som inte behövs.

Så tar du bort den fetmarkerade raden borde det bli rätt resultat?
Citera
2018-01-11, 11:29
  #15
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av lespaul80
Allting ser rätt ut förutom den markerade raden "newDiv.appendChild(uppthree)"

Du hänger in elementet som sista element där, för att senare göra en insertBefore och hänga in den på annan plats.
Dock kommer de flesta webläsare att första ta bort elementet och hänga in det på den nya platsen utan att du får något direkt fel. Så det borde bli rätt resultat. Men programmeringsmässigt är det fel att göra operationer som inte behövs.

Så tar du bort den fetmarkerade raden borde det bli rätt resultat?


ser ut så förutom att jag får detta felmeddelandet i visual studio code " 31:5 error 'insertedNode' is assigned a value but never used no-unused-vars"
Citera
2018-01-11, 11:32
  #16
Medlem
Citat:
Ursprungligen postat av Worldnature
ser ut så förutom att jag får detta felmeddelandet i visual studio code " 31:5 error 'insertedNode' is assigned a value but never used no-unused-vars"

Ok låter som du har en Linter plugin i VS Code isf. Vilket man brukar använda på företag för att se till att koden är städad och man just inte har massa variabler som inte används och liknande.

Men detta kan du fixa på denna rad som verkar vara felet:
let insertedNode = newDiv.insertBefore(uppthree, children[5])

Skriv om till detta:
newDiv.insertBefore(uppthree, children[5])

Skillnaden är att i första fallet tar du hand om den returnerade referensen som insertBefore returnerar.
I andra fallet struntar du i det och tar aldrig emot returnerade värdet, vilket inte behövs om du inte skall fortsätta använda det.
Citera
2018-01-11, 11:36
  #17
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av lespaul80
Ok låter som du har en Linter plugin i VS Code isf. Vilket man brukar använda på företag för att se till att koden är städad och man just inte har massa variabler som inte används och liknande.

Men detta kan du fixa på denna rad som verkar vara felet:
let insertedNode = newDiv.insertBefore(uppthree, children[5])

Skriv om till detta:
newDiv.insertBefore(uppthree, children[5])

Skillnaden är att i första fallet tar du hand om den returnerade referensen som insertBefore returnerar.
I andra fallet struntar du i det och tar aldrig emot returnerade värdet, vilket inte behövs om du inte skall fortsätta använda det.

ok, då förstår jag, tack

koden ser ut så här nu

let uppthree = document.createElement('h2')

let content = document.createTextNode('This is a sub headline')

uppthree.appendChild(content)

let newDiv = document.getElementById('step03')

let children = newDiv.childNodes()

newDiv.insertBefore(uppthree, children[5])

Fanns inga fel meddelande i koden, men text "this is a sub headline" som jag vill få ut under den 5:e h2 element dyker inte fram, texten dyker inte fram överhuvudtaget tyvärr.
Citera
2018-01-11, 11:37
  #18
Medlem
Citat:
Ursprungligen postat av Worldnature
ok, då förstår jag, tack

koden ser ut så här nu

let uppthree = document.createElement('h2')

let content = document.createTextNode('This is a sub headline')

uppthree.appendChild(content)

let newDiv = document.getElementById('step03')

let children = newDiv.childNodes()

newDiv.insertBefore(uppthree, children[5])

Fanns inga fel meddelande i koden, men text "this is a sub headline" som jag vill få ut under den 5:e h2 element dyker inte fram, texten dyker inte fram överhuvudtaget tyvärr.

Ok, men posta all din HTML kod också. Så kan jag testköra allt efter lunchen!

Eller skapa en fiddle eller liknande som du kan dela. Enklare att editera kod där tillsammans, samt testköra den direkt i webläsaren:
https://jsfiddle.net/
Citera
2018-01-11, 13:08
  #19
Medlem
Citat:
Ursprungligen postat av lespaul80
Ok, men posta all din HTML kod också. Så kan jag testköra allt efter lunchen!

Eller skapa en fiddle eller liknande som du kan dela. Enklare att editera kod där tillsammans, samt testköra den direkt i webläsaren:
https://jsfiddle.net/

(Fick jsfiddle i privat meddelande för trådens historik).

När du kör Run så ha alltid Console öppen i webläsaren. Kör du med Chrome och tittar så ser du detta fel:
(index):81 Uncaught TypeError: newDiv.childNodes is not a function
at window.onload ((index):81)

childNodes är precis som det står ingen funktion, utan direkt en referens till Arrayen av child nodes.

Gör denna ändring:
let children = newDiv.childNodes() -> let children = newDiv.childNodes

Vidare nu när man ser Uppgifterna så verkar det faktiskt fel i Upp 3 där det står 5:e h2'an men i hela dokumentet o man räknar är det 4:e h2'an som har den Upp 3 texten. Lite motsägelsefullt.

Men denna rad måste också ändras enligt följande då den DIV du tittar på bara har 2 child nodes i HTML strukturen, och h2'an är första (index 0) så sätter man in det före index 1 hamnar den alltså bakom index 0:

newDiv.insertBefore(uppthree, children[5]) -> newDiv.insertBefore(uppthree, children[1])
Citera
2018-01-11, 14:00
  #20
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av lespaul80
(Fick jsfiddle i privat meddelande för trådens historik).

När du kör Run så ha alltid Console öppen i webläsaren. Kör du med Chrome och tittar så ser du detta fel:
(index):81 Uncaught TypeError: newDiv.childNodes is not a function
at window.onload ((index):81)

childNodes är precis som det står ingen funktion, utan direkt en referens till Arrayen av child nodes.

Gör denna ändring:
let children = newDiv.childNodes() -> let children = newDiv.childNodes

Vidare nu när man ser Uppgifterna så verkar det faktiskt fel i Upp 3 där det står 5:e h2'an men i hela dokumentet o man räknar är det 4:e h2'an som har den Upp 3 texten. Lite motsägelsefullt.

Men denna rad måste också ändras enligt följande då den DIV du tittar på bara har 2 child nodes i HTML strukturen, och h2'an är första (index 0) så sätter man in det före index 1 hamnar den alltså bakom index 0:

newDiv.insertBefore(uppthree, children[5]) -> newDiv.insertBefore(uppthree, children[1])

ok, då förstår, kanon, tack så mycket att du tar din tid för att hjälpa mig, uppskattar det!
Citera
2018-01-17, 10:39
  #21
Medlem
Worldnatures avatar
Kod:
 //uppgift 6
 let frag = document.createDocumentFragment()

 for (let i = 0; i < 10; i++){
     let li = document.getElementById('#list06')
     li = 'List item' + i
 }
 frag.appendChild(li)

uppgiften:
Exercise 6
Use a DocumentFragment to create 10 li-element and add it to the ul with id="list06"


htmkoden:
Kod:
<div id="step06">
    <h2>Exercise 6</h2>
    <p>
        Use a DocumentFragment to create 10 li-element and add it to the ul with id="list06"
    </p>
    <ul id="list06"></ul>
</div>


Vad är det för fel jag gör här? Har skapat ett documentfragment, loopar upp till 10, hämtar ID elementet med let li.document.getelementbyid

och sedan skriver ut den, men fungerar inte, vet att det är något fel där men vet inte vad exakt?
Citera
2018-01-17, 11:47
  #22
Moderator
Protons avatar
Citat:
Ursprungligen postat av Worldnature
Kod:
 //uppgift 6
 let frag = document.createDocumentFragment()

 for (let i = 0; i < 10; i++){
     let li = document.getElementById('#list06')
     li = 'List item' + i
 }
 frag.appendChild(li)

uppgiften:
Exercise 6
Use a DocumentFragment to create 10 li-element and add it to the ul with id="list06"


htmkoden:
Kod:
<div id="step06">
    <h2>Exercise 6</h2>
    <p>
        Use a DocumentFragment to create 10 li-element and add it to the ul with id="list06"
    </p>
    <ul id="list06"></ul>
</div>


Vad är det för fel jag gör här? Har skapat ett documentfragment, loopar upp till 10, hämtar ID elementet med let li.document.getelementbyid

och sedan skriver ut den, men fungerar inte, vet att det är något fel där men vet inte vad exakt?
Var lägger du in ditt fragment nånstans i koden? Läser du den, samt tar reda på var du skapar ditt fragment lär det bli klart.

För övrigt förstår jag fortfarande inte varför du utvecklat en sådan allergi mot semikolon.
Citera
2018-01-17, 12:13
  #23
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av Proton
Var lägger du in ditt fragment nånstans i koden? Läser du den, samt tar reda på var du skapar ditt fragment lär det bli klart.

För övrigt förstår jag fortfarande inte varför du utvecklat en sådan allergi mot semikolon.

Visual studio code reagerar på semicolon och när jag kör npm test så blir det error på många gånger med semicolon :/ därför jag kör utan
Citera
  • 1
  • 2

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback