Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
  21 1594
JavaScript

Kode

for(var elem in elements){
   var divElement = "element" + elements[elem].elementName ;
   document.getElementById(divElement).innerHTML = "Kake" ;
}
Det over fungerer ikke.

Dette fungerer og viser elementElement1 i div'en.

Kode

for(var elem in elements){
   var divElement = "elementElement1" ;
   document.getElementById(divElement).innerHTML = "element" + elements[elem].elementName ;
}
Sist endret av Kaizen; 18. mai 2021 kl. 14:42.
Kunne du lagt til en sandbox med litt mer kontekst rundt så man lettere kan se på feilen?
Gjerne bare ta ut akkurat minimum av det som skal til for å få koden til å kjøre som et eksempel.

Eksempelvis her: https://codesandbox.io/s/vanilla

Edit: Når det er sagt tror jeg ikke det er noe attributt på DOM-elementer som heter "elementName". Mente du egentlig tagName eller id? Men utover dette bllir det fort gjetting uten litt mer av koden.
Sist endret av etse; 18. mai 2021 kl. 15:01.
Kaizen's Avatar
Trådstarter
Litt mer info, men dette er strippet ned.

elements[0].elementName = "Element1" ;
elements[1].elementName = "Element2" ;

Og Html:
<div id="elementElement1">
<div id="elementElement2">

Det skulle være alt som trengs for å se problemet.
Vel, det er ikke det. Post koden din og en minimal reproduksjon. Sjekk at array e.l. inneholder det du tror.
Sist endret av robhol; 18. mai 2021 kl. 15:06.
Testet fort, og begge ser ut til å fungere. Kanskje jeg missforstår noe av konteksten rundt.
Her ser du eksempelet jeg testet med som funket:

https://codesandbox.io/s/practical-l...=/src/index.js

Altså tror jeg feilen ikke er i koden du postet - men noe annet. Trenger altså mer kode for å kunne hjelpe deg. Fint om du poster en sandbox som reproduserer feilen din.
Sist endret av etse; 18. mai 2021 kl. 15:18.
For loopen din er feil. For element in list i JavaScript funker ikke på samme måte som f.eks python. Hvis du har en liste med string vil for elem in. Elem vil være integers 0,1,2. Hvis elements er en liste med objekter. Vil elem være properties til objektet. Du vil mest sannsynlig bruke for elem of elements i din case.
Sist endret av Rudmann; 18. mai 2021 kl. 15:13.
Sitat av Rudmann Vis innlegg
For loopen din er feil. For element in list i JavaScript funker ikke på samme måte som f.eks python. Hvis du har en liste med string vil for elem in. Elem vil være integers 0,1,2. Hvis elements er en liste med objekter. Vil elem være properties til objektet. Du vil mest sannsynlig bruke for elem of elements i din case.
Vis hele sitatet...
Det fungerer fint fordi han henter ut verdien med array-indexen

Kode

elements[elem].elementName

Men enig i at dette hadde vært ryddigere:

Kode

for (var elem of elements) {
  var divElement = "element" + elem.elementName;
  document.getElementById(divElement).innerHTML = "Kake";
}
Sist endret av etse; 18. mai 2021 kl. 15:17.
Kaizen's Avatar
Trådstarter
Ok. Takk til begge tre. Ser det fungerer. Av en eller annen grunn funger det ikke hos meg.
Når jeg skriver ut string med id på elementet får jeg eksakt det id på div er.
Men når jeg adresserer elementet uten å bruker "elementnavn" og i stede Stringen (Som jo er det samme) fungerer det ikke.
Arg Har sittet lenge med dette uten å finne løsningen ....
Sist endret av Kaizen; 18. mai 2021 kl. 15:45.
Om du poster mer av koden din kan det være vi klarer å se hva det er du overser. Ofte er det bare en liten ting som man ser seg blind på Utfordringen er bare at du ikke har postet nok av koden din til at vi klarer å reprodusere feilen.
Kaizen's Avatar
Trådstarter
Hei.
Kan sikkert poste mer av koden, men dette er en del av et rimelig stort prosjekt. Tror ikke dette vil gi noe mening, men her er litt av koden.

Kode

async function drawcomputers() {
    const computers = await loadcomputers();

    for(var comput in computers){
                
        var addinElement = "divcomputers" + computers[comput].Company;
        var tmpdiv = document.getElementById(addinElement) ;
        //var tmpdiv = document.getElementById("divcomputersJHS") ; //Bytter jeg linjen over med denne fungerer det.
        
        tmpdiv.innerHTML = computers[comput].Company; // Denne skriver ut riktig navn på diven ;
}
Sist endret av Kaizen; 18. mai 2021 kl. 16:02.
ser at det fort ikke gir mening å få selve koden. Spørsmålet blir da - klarer du å lage en liten snippet som reproduserer feilen?

Eventuelt ville jeg forsøkt meg på litt mer debugging her, for virker som det er noen verdier som ikke er det du tror.

Hva om du tester noe som følgende

Kode

async function drawcomputers() {
    const computers = await loadcomputers();

    console.log("Loaded computers", computers);
    for (let comput of computers) {
        const addinElement = "divcomputers" + comput.Company;
        const tmpdiv = document.getElementById(addinElement);
        console.log("Updating for:", comput.Company, "using element with id:", addinElement, "Element to update:", tmpdiv)
        tmpdiv.innerHTML = comput.Company; // Denne skriver ut riktig navn på diven ;
    }
}
Tanken er bare å gjennom følgende:
- Er computers-objektet faktisk det du ser for deg?
- På hver iterasjon av løkken printer den riktig verdi for company-name, addinElement og tmpdiv?
Har du deklarert og initiert variablene korrekt?
Kaizen's Avatar
Trådstarter
Hei og takk så mye, for hjelp her.

Dette er output på ConsoleLog.
Updating for: JHS using element with id: divcomputersJHS Element to update: null

I tillegg får jeg denne feilen: ncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
at drawcomputers

Det er jo litt nærmere problemet. temdiv er null.

Slik ser div'en ut når jeg inspiserer elementet.
<div id="divcomputersJHS"> No Computer Data</div>

Den finner ikke diven, men den heter jo riktig.
4 vanligste årsakene til denne type feil er:

1. Du har 2 elementer med samme ID i DOMen.

2. Elementet du lager blir laget dynamisk av JS og er ikke opprettet på det tidspunktet du leter etter de

3. DOMen er ikke ferdig lastet når du kjører scriptet. Typisk fordi man har lagt script-tagen øverst i HTML-fila og ikke venter på browseren har lastet inn DOMen

4. Skrivefeil. Feil i navnet på ID, eller at HTMLen har småfeil som gjør den ugyldig. (Glemt å lukke HTML-tagen f.eks.)
Sist endret av etse; 18. mai 2021 kl. 18:16.
Skal man ikke ha anførselstegn rundt elementet? Altså slik:

document.getElementById("addinElement");
Sitat av SajN Vis innlegg
Skal man ikke ha anførselstegn rundt elementet? Altså slik:

document.getElementById("addinElement");
Vis hele sitatet...
addinElement er en variabel, så nei. Det der blir helt feil.
Kaizen's Avatar
Trådstarter
Tipper feilen er nr 2 som du nevner. Det som likevel er merkelig er at det fungerer når jeg bruker getElementById("divcomputersJHS") så fungerer det. Altså , i loggecoden din etse , om jeg bytter ut :
const addinElement = "divcomputers" + comput.Company;
med
const addinElement = "divcomputers" + "JHS";
Fungerer det normalt.

Når jeg sjekker typen på comput.Company får jeg string.

Elementet (Div) blir generert i en annen async, og det siste som skjer der er at drawcomputers() blir kjørt.

Forsøkt å vente , ala setTimeout( drawcomputers, 3000);

Hjelper ikke.

Takker for all hjelp, og forventer ikke noe mer svar her.
Gir meg ikke og kommer tilbake når jeg har funnet en løsning.
Sist endret av Kaizen; 18. mai 2021 kl. 20:35.
Hvor er det du laster inn scriptet fra?. Hvis du f.eks har <script> taggen i <head>, så vil scriptet lastes før bodyen og du får den type feil.
Prøv å sett scriptet på bunnen av body, altså rett før </body> i html filen din.
Eller prøv det her :

if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}
Sist endret av Rudmann; 18. mai 2021 kl. 20:52.
Om det å vente 3 sekunder før du kaller funksjonen ikke funker, det funker om du skriver inn navnet manuelt - men å generere navnet programatisk ikke funker så er min gjeldende hypotese at det er noe feil med det genererte navnet. En misstanke er usynlig unicode-tegn som lurer seg med fra systemet du henter ned dataene fra.

Kunne du testet følgende kode og gitt meg output?

Kode

function convertStringToHex(str) {
    const arr = [];
    for (let i = 0; i < str.length; i++) {
        arr[i] = ("00" + str.charCodeAt(i).toString(16)).slice(-4);
    }
    return "\\u" + arr.join("\\u");
}

async function drawcomputers() {
    const computers = await loadcomputers();

    for (let comput of computers) {
        console.log("Updating", comput.Company);
        const generatedName = "divcomputers" + comput.Company;
        const hardcodedName = "divcomputersJHS";
        const divFromGeneratedName = document.getElementById(generatedName);
        const divFromHardcodedName = document.getElementById(hardcodedName);
        console.log("generated name as hex:", convertStringToHex(generatedName));
        console.log("hardcoded name as hex:", convertStringToHex(hardcodedName));
        console.log("hardcoded and generated is the same?", generatedName === hardcodedName);
        console.log("div from generated name", divFromGeneratedName);
        console.log("div from hardcoded name", divFromHardcodedName);
        divFromGeneratedName.innerHTML = comput.Company; // Denne skriver ut riktig navn på diven ;
    }
}
Sist endret av etse; 18. mai 2021 kl. 21:02.
En ting som kan hjelpe deg veldig er å sette breakpoints, også følge koden linje for linje. Både Chrome og Firefox lar deg sette breakpoints og inspisere variabler underveis.

Du finner dette i Developer Tools og fanen Sources (chrome) eller Debugger (firefox).
Veldig godt tips fra Yochi. I tillegg kan man skrive inn `debugger;` på et vilkårlig sted i koden. Og da vil debuggeren stoppe der automatisk som om det var et breakpoint. Ihvertfall så lenge man har devtools oppe.
Kaizen's Avatar
Trådstarter
Her er output:

Kode

Updating JHS
generated name as hex: \u0064\u0069\u0076\u0063\u006f\u006d\u0070\u0075\u0074\u0065\u0072\u0073\u004a\u0048\u0053
hardcoded name as hex: \u0064\u0069\u0076\u0063\u006f\u006d\u0070\u0075\u0074\u0065\u0072\u0073\u004a\u0048\u0053
hardcoded and generated is the same? true
div from generated name <div id=​"divcomputersJHS">​JHS​</div>​
div from hardcoded name <div id=​"divcomputersJHS">​JHS​</div>​
Fant endelig ut av problemet. Når jeg så at data var helt likt begynte jeg å sjekke i json data.
Selv om data var riktig i json data for JHS , var det en annen oppføring i databasen som manglet data og tullet til dette.
Når jeg slettet denne fungerte alt normalt igjen.

Beklager bryderiet og STOR Takk til alle som har bidratt. Spessielt Etse.
Sist endret av Myoxocephalus; 19. mai 2021 kl. 08:35. Grunn: La til code tags for lesbarhet