Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Hjälp med ett halvsvårt Javascript plz. Får inte till det.

Svara
  • 1
  • 2
2023-02-25, 01:04
  #1
Marinerad65
Medlem
Gett mig på en HTML-projekt som inkluderar Javascript på en nivå som ligger aningen ovanför min kunskapsnivå, men jag ger mig FAN inte Skulle gärna uppskatta lite kritik och input för att komma loss.

Jag gör ett HTML-formulär, med 4-5 dropdown menyer, i ordning uppifrån och ner, som alla ska vara dynamiska. Dvs val-alternativen som nästa dropdown meny i ordningen ska fyllas med, ska bero på valet man gjorde i den föregående dropdown menyn.

Jag har gjort ett JS script, en array-struktur, som lagrar alla alternativen för alla dropdown-menyer. Tanken är sen att jag ska hämta ut värdena ur arrayen och befolka dropdown-menyerna med det.
Array strukturen ser ut såhär:
Kod: 
var subjectObject = {
    "1a dropdown val A": {
        "2a dropdown val A": {
            "3e dropdown val A": ["4e dropdown val A", "4e dropdown val B", "4e dropdown val C"] },

        "2a dropdown val B": {
            "3e dropdown val A": ["4e dropdown val B", "4e dropdown val C", "4e dropdown val D"] },

        "2a dropdown val C": {
            "3e dropdown val C": ["4e dropdown val E", "4e dropdown val B"] },

        "2a dropdown val D": {
            "3e dropdown val C": ["4e dropdown val A", "4e dropdown val F"] }
    },

    "1a dropdown val B": {
        "2a dropdown val A": {
            "3e dropdown val E": ["4e dropdown val E", "4e dropdown val F", "4e dropdown val B"] },

        "2a dropdown val B": {
            "3e dropdown val E": ["4e dropdown val C", "4e dropdown val E"] }
        }
    }
osv osv.

Som synes, så är 3 första array-nivåerna avskilda poster som är lättare att hämta ut. Men 4e dropdown nivån har flera värden i rad. Därför använder jag en loop för att läsa av alla dessa, och fylla upp sista 4e dropdownen med dom.

HTML-formen ser ut typ såhär:
Kod: 
<select id="first">
     <option value=""> Select Option </option>
</select>

<select id="second">
     <option value=""> Select Option </option>
</select>

<select id="third">
     <option value=""> Select Option </option>
</select>

<select id="fourth">
     <option value=""> Select Option </option>
</select>
.. det är där jag har ID "first", "second", "third" osv som jag använder i koden nedan.

Men jag börjar med att definiera variabler och sen hämta ut dom 3 första nivåerna:
Kod: 
window.onload = function () {
    var first = document.getElementById('first')
    var second = document.getElementById('second')
    var third = document.getElementById('third')
    var fourth = document.getElementById('fourth')
    
    for (var x in subjectObject) {
        // console.log(x);
        first.options[first.options.length] = new Option(x)
    }
    
    first.onchange = function () {
        second.length = 1
        third.length = 1
    
        for (var y in subjectObject[this.value]) {
            // console.log(y);
            second.options[second.options.length] = new Option(y)
        }
    }
osv osv, samma sak för senare nivåer. Jag använder valda alternativet, HTML-formulärets ID "first" eller "second", som utgångspunkt för vad scriptet ska hämta ut för nästa underliggande nivå.

Men sen får jag fan inte till loopen på 4e nivån! DET, är mitt problem. Jag är som sagt inte så skarp på JS, så jag skulle gärna uppskatta lite tips.

Hittills har jag gjort såhär:
Kod: 
third.onchange = function () {
        fourth.length = 1

        z = subjectObject[first.value][this.value]
        console.log(z);
        // document.write(z);
        for (let i = 0; i < z.length; i++) {
            fourth.options[fourth.options.length] = new Option(z[i])
        }
    }
Målsättningen är som sagt att det här ska fylla upp Select ID="fourth" dropdownen i formuläret. Men det svar jag får ut från loopen (som ska läsa av 4e nivån i arrayen ovan) är "undefined", hela tiden. Skulle gärna uppskatta lite kritik och tips om vad jag gör för fel här? Eller kanske om hela upplägget är helt .. off?

Jag är lite osäker på om det kanske är deklarationen av variabeln "z" som är felet? Att jag har BÅDE [first.value] och [this.value] i variabeln? Skulle kanske ha bara en av dom? eller ska jag definiera z-variabeln så att loopen enbart ska läsa av 4e nivån? alltså [third.value][this.value]? Jag tycker jag har provat det och .. ingenting funkar, blir "undefined" som svar jämt. Borde man formulera om hela loopen kanske?

Lite lost här, skulle uppskatta hjälp av mer lärda, vad jag gör för fel i sista loopen?
Tack så mycket på förhand

PS. antalet curly-parenteser kan vara lite off i inklistrade koden ovan, DET är inte problemet .DS
__________________
Senast redigerad av Marinerad65 2023-02-25 kl. 01:13.
Citera
2023-02-25, 02:15
  #2
FlyboySeven
Medlem
Citat:
Ursprungligen postat av Marinerad65
Gett mig på en HTML-projekt som inkluderar Javascript på en nivå som ligger aningen ovanför min kunskapsnivå, men jag ger mig FAN inte Skulle gärna uppskatta lite kritik och input för att komma loss.

Jag gör ett HTML-formulär, med 4-5 dropdown menyer, i ordning uppifrån och ner, som alla ska vara dynamiska. Dvs val-alternativen som nästa dropdown meny i ordningen ska fyllas med, ska bero på valet man gjorde i den föregående dropdown menyn.

Jag har gjort ett JS script, en array-struktur, som lagrar alla alternativen för alla dropdown-menyer. Tanken är sen att jag ska hämta ut värdena ur arrayen och befolka dropdown-menyerna med det.
Array strukturen ser ut såhär:
Kod: 
var subjectObject = {
    "1a dropdown val A": {
        "2a dropdown val A": {
            "3e dropdown val A": ["4e dropdown val A", "4e dropdown val B", "4e dropdown val C"] },

        "2a dropdown val B": {
            "3e dropdown val A": ["4e dropdown val B", "4e dropdown val C", "4e dropdown val D"] },

        "2a dropdown val C": {
            "3e dropdown val C": ["4e dropdown val E", "4e dropdown val B"] },

        "2a dropdown val D": {
            "3e dropdown val C": ["4e dropdown val A", "4e dropdown val F"] }
    },

    "1a dropdown val B": {
        "2a dropdown val A": {
            "3e dropdown val E": ["4e dropdown val E", "4e dropdown val F", "4e dropdown val B"] },

        "2a dropdown val B": {
            "3e dropdown val E": ["4e dropdown val C", "4e dropdown val E"] }
        }
    }
osv osv.

Som synes, så är 3 första array-nivåerna avskilda poster som är lättare att hämta ut. Men 4e dropdown nivån har flera värden i rad. Därför använder jag en loop för att läsa av alla dessa, och fylla upp sista 4e dropdownen med dom.

HTML-formen ser ut typ såhär:
Kod: 
<select id="first">
     <option value=""> Select Option </option>
</select>

<select id="second">
     <option value=""> Select Option </option>
</select>

<select id="third">
     <option value=""> Select Option </option>
</select>

<select id="fourth">
     <option value=""> Select Option </option>
</select>
.. det är där jag har ID "first", "second", "third" osv som jag använder i koden nedan.

Men jag börjar med att definiera variabler och sen hämta ut dom 3 första nivåerna:
Kod: 
window.onload = function () {
    var first = document.getElementById('first')
    var second = document.getElementById('second')
    var third = document.getElementById('third')
    var fourth = document.getElementById('fourth')
    
    for (var x in subjectObject) {
        // console.log(x);
        first.options[first.options.length] = new Option(x)
    }
    
    first.onchange = function () {
        second.length = 1
        third.length = 1
    
        for (var y in subjectObject[this.value]) {
            // console.log(y);
            second.options[second.options.length] = new Option(y)
        }
    }
osv osv, samma sak för senare nivåer. Jag använder valda alternativet, HTML-formulärets ID "first" eller "second", som utgångspunkt för vad scriptet ska hämta ut för nästa underliggande nivå.

Men sen får jag fan inte till loopen på 4e nivån! DET, är mitt problem. Jag är som sagt inte så skarp på JS, så jag skulle gärna uppskatta lite tips.

Hittills har jag gjort såhär:
Kod: 
third.onchange = function () {
        fourth.length = 1

        z = subjectObject[first.value][this.value]
        console.log(z);
        // document.write(z);
        for (let i = 0; i < z.length; i++) {
            fourth.options[fourth.options.length] = new Option(z[i])
        }
    }
Målsättningen är som sagt att det här ska fylla upp Select ID="fourth" dropdownen i formuläret. Men det svar jag får ut från loopen (som ska läsa av 4e nivån i arrayen ovan) är "undefined", hela tiden. Skulle gärna uppskatta lite kritik och tips om vad jag gör för fel här? Eller kanske om hela upplägget är helt .. off?

Jag är lite osäker på om det kanske är deklarationen av variabeln "z" som är felet? Att jag har BÅDE [first.value] och [this.value] i variabeln? Skulle kanske ha bara en av dom? eller ska jag definiera z-variabeln så att loopen enbart ska läsa av 4e nivån? alltså [third.value][this.value]? Jag tycker jag har provat det och .. ingenting funkar, blir "undefined" som svar jämt. Borde man formulera om hela loopen kanske?

Lite lost här, skulle uppskatta hjälp av mer lärda, vad jag gör för fel i sista loopen?
Tack så mycket på förhand

PS. antalet curly-parenteser kan vara lite off i inklistrade koden ovan, DET är inte problemet .DS


Hej,

Ja här kommer mitt tips men snart får du antagligen mycket bättre tips i tråden.

Mitt tips är KISS.
Keep It Simple Stupid.

Mitt tips är att dela upp denna koden i säg 10 delar och bearbeta varje del av koden så den blir så ren och snygg som möjligt.

Under tiden kommer du röna ut vilket misstag du gjort som gör att koden ej fungerar just nu.

Nu har du också lärt dig det viktigaste du kan lära dig om du ska arbeta professionellt med programmering.

Se till att folk som ska arbeta med koden efter dig kan förstå direkt vad den gör för något.

Då kommer du kunna bli anställd varsomhelst efter det.

Och som sagt under tiden bearbetar du koden och inser var någonstans i koden du råkade göra ditt misstag.

Till att börja med att brackets ligger på fel plats gör att ingen av oss egentligen kommer kunna hjälpa dig från början.

Om koden ser fel ut från början kommer ingen av oss kunna se vad du gjort för misstag i koden.

Så mitt tips är.
Snygga till koden ordentligt. Gör den gärna väldigt utförlig även om det känns nästan onödigt bearbetat. Bara koden är så ren och snygg som möjligt.
Dela gärna upp koden i 10 eller 20 delar och testa varje del för sig väldigt noga så att varje del fungerar perfekt var för sig.
Sedan kopplar du ihop delarna.
Här kanske du får skriva om lite av koden men då har du delat upp koden så du lätt kan ändra varje del för sig utan att den krånglar för mycket med andra delar av koden.

Ja men du får nog bättre råd senare av andra i tråden.

Hoppas det går bra.

Lycka till
Citera
2023-02-25, 02:19
  #3
FlyboySeven
Medlem
Citat:
Ursprungligen postat av Marinerad65
Gett mig på en HTML-projekt som inkluderar Javascript på en nivå som ligger aningen ovanför min kunskapsnivå, men jag ger mig FAN inte Skulle gärna uppskatta lite kritik och input för att komma loss.

Jag gör ett HTML-formulär, med 4-5 dropdown menyer, i ordning uppifrån och ner, som alla ska vara dynamiska. Dvs val-alternativen som nästa dropdown meny i ordningen ska fyllas med, ska bero på valet man gjorde i den föregående dropdown menyn.

Jag har gjort ett JS script, en array-struktur, som lagrar alla alternativen för alla dropdown-menyer. Tanken är sen att jag ska hämta ut värdena ur arrayen och befolka dropdown-menyerna med det.
Array strukturen ser ut såhär:
Kod: 
var subjectObject = {
    "1a dropdown val A": {
        "2a dropdown val A": {
            "3e dropdown val A": ["4e dropdown val A", "4e dropdown val B", "4e dropdown val C"] },

        "2a dropdown val B": {
            "3e dropdown val A": ["4e dropdown val B", "4e dropdown val C", "4e dropdown val D"] },

        "2a dropdown val C": {
            "3e dropdown val C": ["4e dropdown val E", "4e dropdown val B"] },

        "2a dropdown val D": {
            "3e dropdown val C": ["4e dropdown val A", "4e dropdown val F"] }
    },

    "1a dropdown val B": {
        "2a dropdown val A": {
            "3e dropdown val E": ["4e dropdown val E", "4e dropdown val F", "4e dropdown val B"] },

        "2a dropdown val B": {
            "3e dropdown val E": ["4e dropdown val C", "4e dropdown val E"] }
        }
    }
osv osv.

Som synes, så är 3 första array-nivåerna avskilda poster som är lättare att hämta ut. Men 4e dropdown nivån har flera värden i rad. Därför använder jag en loop för att läsa av alla dessa, och fylla upp sista 4e dropdownen med dom.

HTML-formen ser ut typ såhär:
Kod: 
<select id="first">
     <option value=""> Select Option </option>
</select>

<select id="second">
     <option value=""> Select Option </option>
</select>

<select id="third">
     <option value=""> Select Option </option>
</select>

<select id="fourth">
     <option value=""> Select Option </option>
</select>
.. det är där jag har ID "first", "second", "third" osv som jag använder i koden nedan.

Men jag börjar med att definiera variabler och sen hämta ut dom 3 första nivåerna:
Kod: 
window.onload = function () {
    var first = document.getElementById('first')
    var second = document.getElementById('second')
    var third = document.getElementById('third')
    var fourth = document.getElementById('fourth')
    
    for (var x in subjectObject) {
        // console.log(x);
        first.options[first.options.length] = new Option(x)
    }
    
    first.onchange = function () {
        second.length = 1
        third.length = 1
    
        for (var y in subjectObject[this.value]) {
            // console.log(y);
            second.options[second.options.length] = new Option(y)
        }
    }
osv osv, samma sak för senare nivåer. Jag använder valda alternativet, HTML-formulärets ID "first" eller "second", som utgångspunkt för vad scriptet ska hämta ut för nästa underliggande nivå.

Men sen får jag fan inte till loopen på 4e nivån! DET, är mitt problem. Jag är som sagt inte så skarp på JS, så jag skulle gärna uppskatta lite tips.

Hittills har jag gjort såhär:
Kod: 
third.onchange = function () {
        fourth.length = 1

        z = subjectObject[first.value][this.value]
        console.log(z);
        // document.write(z);
        for (let i = 0; i < z.length; i++) {
            fourth.options[fourth.options.length] = new Option(z[i])
        }
    }
Målsättningen är som sagt att det här ska fylla upp Select ID="fourth" dropdownen i formuläret. Men det svar jag får ut från loopen (som ska läsa av 4e nivån i arrayen ovan) är "undefined", hela tiden. Skulle gärna uppskatta lite kritik och tips om vad jag gör för fel här? Eller kanske om hela upplägget är helt .. off?

Jag är lite osäker på om det kanske är deklarationen av variabeln "z" som är felet? Att jag har BÅDE [first.value] och [this.value] i variabeln? Skulle kanske ha bara en av dom? eller ska jag definiera z-variabeln så att loopen enbart ska läsa av 4e nivån? alltså [third.value][this.value]? Jag tycker jag har provat det och .. ingenting funkar, blir "undefined" som svar jämt. Borde man formulera om hela loopen kanske?

Lite lost här, skulle uppskatta hjälp av mer lärda, vad jag gör för fel i sista loopen?
Tack så mycket på förhand

PS. antalet curly-parenteser kan vara lite off i inklistrade koden ovan, DET är inte problemet .DS


Och så ett till tips.

Om du ska arbeta professionellt med programmering.

Kommentera, kommentera, kommentera.

Även om din kod är lysande i dina ögon kommer det ändå ta minst 2 timmar för nästa man på projektet att försöka förstå vad du skrivit för kod.

Kommentarer löser detta problem på 1 sekund.

Nu tar det 1 sekund för nästa man på projektet att förstå vad du skrivit för kod.

Ett litet tips bara.

Lycka till
Citera
2023-02-25, 06:19
  #4
FlyboySeven
Medlem
Citat:
Ursprungligen postat av Marinerad65
Gett mig på en HTML-projekt som inkluderar Javascript på en nivå som ligger aningen ovanför min kunskapsnivå, men jag ger mig FAN inte Skulle gärna uppskatta lite kritik och input för att komma loss.

Jag gör ett HTML-formulär, med 4-5 dropdown menyer, i ordning uppifrån och ner, som alla ska vara dynamiska. Dvs val-alternativen som nästa dropdown meny i ordningen ska fyllas med, ska bero på valet man gjorde i den föregående dropdown menyn.

Jag har gjort ett JS script, en array-struktur, som lagrar alla alternativen för alla dropdown-menyer. Tanken är sen att jag ska hämta ut värdena ur arrayen och befolka dropdown-menyerna med det.
Array strukturen ser ut såhär:
Kod: 
var subjectObject = {
    "1a dropdown val A": {
        "2a dropdown val A": {
            "3e dropdown val A": ["4e dropdown val A", "4e dropdown val B", "4e dropdown val C"] },

        "2a dropdown val B": {
            "3e dropdown val A": ["4e dropdown val B", "4e dropdown val C", "4e dropdown val D"] },

        "2a dropdown val C": {
            "3e dropdown val C": ["4e dropdown val E", "4e dropdown val B"] },

        "2a dropdown val D": {
            "3e dropdown val C": ["4e dropdown val A", "4e dropdown val F"] }
    },

    "1a dropdown val B": {
        "2a dropdown val A": {
            "3e dropdown val E": ["4e dropdown val E", "4e dropdown val F", "4e dropdown val B"] },

        "2a dropdown val B": {
            "3e dropdown val E": ["4e dropdown val C", "4e dropdown val E"] }
        }
    }
osv osv.

Som synes, så är 3 första array-nivåerna avskilda poster som är lättare att hämta ut. Men 4e dropdown nivån har flera värden i rad. Därför använder jag en loop för att läsa av alla dessa, och fylla upp sista 4e dropdownen med dom.

HTML-formen ser ut typ såhär:
Kod: 
<select id="first">
     <option value=""> Select Option </option>
</select>

<select id="second">
     <option value=""> Select Option </option>
</select>

<select id="third">
     <option value=""> Select Option </option>
</select>

<select id="fourth">
     <option value=""> Select Option </option>
</select>
.. det är där jag har ID "first", "second", "third" osv som jag använder i koden nedan.

Men jag börjar med att definiera variabler och sen hämta ut dom 3 första nivåerna:
Kod: 
window.onload = function () {
    var first = document.getElementById('first')
    var second = document.getElementById('second')
    var third = document.getElementById('third')
    var fourth = document.getElementById('fourth')
    
    for (var x in subjectObject) {
        // console.log(x);
        first.options[first.options.length] = new Option(x)
    }
    
    first.onchange = function () {
        second.length = 1
        third.length = 1
    
        for (var y in subjectObject[this.value]) {
            // console.log(y);
            second.options[second.options.length] = new Option(y)
        }
    }
osv osv, samma sak för senare nivåer. Jag använder valda alternativet, HTML-formulärets ID "first" eller "second", som utgångspunkt för vad scriptet ska hämta ut för nästa underliggande nivå.

Men sen får jag fan inte till loopen på 4e nivån! DET, är mitt problem. Jag är som sagt inte så skarp på JS, så jag skulle gärna uppskatta lite tips.

Hittills har jag gjort såhär:
Kod: 
third.onchange = function () {
        fourth.length = 1

        z = subjectObject[first.value][this.value]
        console.log(z);
        // document.write(z);
        for (let i = 0; i < z.length; i++) {
            fourth.options[fourth.options.length] = new Option(z[i])
        }
    }
Målsättningen är som sagt att det här ska fylla upp Select ID="fourth" dropdownen i formuläret. Men det svar jag får ut från loopen (som ska läsa av 4e nivån i arrayen ovan) är "undefined", hela tiden. Skulle gärna uppskatta lite kritik och tips om vad jag gör för fel här? Eller kanske om hela upplägget är helt .. off?

Jag är lite osäker på om det kanske är deklarationen av variabeln "z" som är felet? Att jag har BÅDE [first.value] och [this.value] i variabeln? Skulle kanske ha bara en av dom? eller ska jag definiera z-variabeln så att loopen enbart ska läsa av 4e nivån? alltså [third.value][this.value]? Jag tycker jag har provat det och .. ingenting funkar, blir "undefined" som svar jämt. Borde man formulera om hela loopen kanske?

Lite lost här, skulle uppskatta hjälp av mer lärda, vad jag gör för fel i sista loopen?
Tack så mycket på förhand

PS. antalet curly-parenteser kan vara lite off i inklistrade koden ovan, DET är inte problemet .DS


Hej,

Har kollat lite på koden nu.

Kan inte ge konkreta JS svar men…

Är det inte bättre att göra en array för varje dropdown?

Eller kanske säg 5 separata arrayer för varje dropdown.

Och en funktion som bara har till uppgift att befolka nästa dropdown beroende på val som gjorts i första dropdown?

Alltså att det finns en kanske 10 eller kanske 20 arrayer som du kan befolka de olika dropdowns med.

Separata arrayer, inte en enda stor med fler nivåer i? (Multdimensionell array).

Det kanske blir 100 arrayer då men mer överskådligt.



Hur många dropdowns är det och exakt vilka val ska finnas i de olika dropdowns beroende på vad man väljer i de tidigare dropdowns?

Här är det smart att kommentera så man förstår vad de olika dropdowns ska användas till och vid vilka tillfällen beroende på vad man valt i de tidigare dropdowns.

Typ såhär:

Dropdown1 = {
dropdown1Val1:”dropdown1Val1”,
dropdown1Val2:”dropdown1Val2”,
dropdown1Val3:”dropdown1Val3”,
}

Dropdown2FromDropdown1Val1 = {
dropdown2FromDropdown1Val1Val1:” dropdown2FromDropdown1Val1Val1”,

dropdown2FromDropdown1Val1Val2:” dropdown2FromDropdown1Val1Val2”,

dropdown2FromDropdown1Val1Val3:” dropdown2FromDropdown1Val1Val3”,

}

Dropdown2FromDropdown1Val2 = {
dropdown2FromDropdown1Val2Val1:” dropdown2FromDropdown1Val2Val1”,

dropdown2FromDropdown1Val2Val2:” dropdown2FromDropdown1Val2Val2”,

dropdown2FromDropdown1Val2Val3:” dropdown2FromDropdown1Val2Val3”,

}

Läste på lite om JS och tror du skriver dina arrayer fel.

En array som du verkar vilja skriva ska ha ett name och ett value

name:”value”



Du verkar ju snarare vilja börja arrayer med ett ”value”

Ex:
”Value”:name

Vilket ju är fel skriven kod helt enkelt.

Då kommer ingenting fungera som det ska.

Du får nog läsa på lite om JS först.



Som sagt igen dela upp koden i små beståndsdelar och testa varje rad för sig och se hur den raden fungerar.

Så blir det lättare att skriva större delar kod senare.
Citera
2023-02-25, 08:13
  #5
SwampDogg
Medlem
SwampDoggs avatar
Vill du få adekvat hjälp så rekommenderar jag dig också att lägga upp koden på till exempel CodeSandbox eller dylikt.
Citera
2023-02-25, 09:03
  #6
spermaoffret
Medlem
spermaoffrets avatar
Funkar denna kod:

html:

Kod: 
<!DOCTYPE html>
<html>
  <head>
    <title>Dropdown Example</title>
  </head>
  <body>
    <form>
      <label for="dropdown1">Dropdown 1:</label>
      <select id="dropdown1" name="dropdown1"></select>
      <br>
      <label for="dropdown2">Dropdown 2:</label>
      <select id="dropdown2" name="dropdown2"></select>
      <br>
      <label for="dropdown3">Dropdown 3:</label>
      <select id="dropdown3" name="dropdown3"></select>
      <br>
      <label for="dropdown4">Dropdown 4:</label>
      <select id="dropdown4" name="dropdown4"></select>
      <br>
    </form>
    <script src="script.js"></script>
  </body>
</html>

js:

Kod: 
// Get references to the dropdown menus
const dropdown1 = document.getElementById('dropdown1');
const dropdown2 = document.getElementById('dropdown2');
const dropdown3 = document.getElementById('dropdown3');
const dropdown4 = document.getElementById('dropdown4');

// Populate the first dropdown with its options
for (const key in subjectObject) {
  const option = document.createElement('option');
  option.text = key;
  dropdown1.add(option);
}

// Add an event listener to the first dropdown to populate the second dropdown when an option is selected
dropdown1.addEventListener('change', () => {
  const selectedOption = dropdown1.value;
  dropdown2.innerHTML = '';
  dropdown3.innerHTML = '';
  dropdown4.innerHTML = '';
  if (selectedOption in subjectObject) {
    for (const key in subjectObject[selectedOption]) {
      const option = document.createElement('option');
      option.text = key;
      dropdown2.add(option);
    }
  }
});

// Add an event listener to the second dropdown to populate the third dropdown when an option is selected
dropdown2.addEventListener('change', () => {
  const selectedOption1 = dropdown1.value;
  const selectedOption2 = dropdown2.value;
  dropdown3.innerHTML = '';
  dropdown4.innerHTML = '';
  if (selectedOption1 in subjectObject && selectedOption2 in subjectObject[selectedOption1]) {
    for (const key of subjectObject[selectedOption1][selectedOption2]) {
      const option = document.createElement('option');
      option.text = key;
      dropdown3.add(option);
    }
  }
});

// Add an event listener to the third dropdown to populate the fourth dropdown when an option is selected
dropdown3.addEventListener('change', () => {
  const selectedOption1 = dropdown1.value;
  const selectedOption2 = dropdown2.value;
  const selectedOption3 = dropdown3.value;
  dropdown4.innerHTML = '';
  if (selectedOption1 in subjectObject && selectedOption2 in subjectObject[selectedOption1] && subjectObject[selectedOption1][selectedOption2][selectedOption3]) {
    for (const key of subjectObject[selectedOption1][selectedOption2][selectedOption3]) {
      const option = document.createElement('option');
      option.text = key;
      dropdown4.add(option);
    }
  }
});
Citera
2023-02-25, 09:10
  #7
8978wxu642
Medlem
Citat:
Ursprungligen postat av FlyboySeven
Och så ett till tips.

Om du ska arbeta professionellt med programmering.

Kommentera, kommentera, kommentera.

Även om din kod är lysande i dina ögon kommer det ändå ta minst 2 timmar för nästa man på projektet att försöka förstå vad du skrivit för kod.

Kommentarer löser detta problem på 1 sekund.

Nu tar det 1 sekund för nästa man på projektet att förstå vad du skrivit för kod.

Ett litet tips bara.

Lycka till

Skriver man vettig kod behöver man inte ha några kommentarer.
Citera
2023-02-25, 09:14
  #8
FlyboySeven
Medlem
Citat:
Ursprungligen postat av 8978wxu642
Skriver man vettig kod behöver man inte ha några kommentarer.

Sant

Sen får man förståss hoppas att alla skriver vettig kod.
Citera
2023-02-25, 09:24
  #9
FlyboySeven
Medlem
Citat:
Ursprungligen postat av Marinerad65
Gett mig på en HTML-projekt som inkluderar Javascript på en nivå som ligger aningen ovanför min kunskapsnivå, men jag ger mig FAN inte Skulle gärna uppskatta lite kritik och input för att komma loss.

Jag gör ett HTML-formulär, med 4-5 dropdown menyer, i ordning uppifrån och ner, som alla ska vara dynamiska. Dvs val-alternativen som nästa dropdown meny i ordningen ska fyllas med, ska bero på valet man gjorde i den föregående dropdown menyn.

Jag har gjort ett JS script, en array-struktur, som lagrar alla alternativen för alla dropdown-menyer. Tanken är sen att jag ska hämta ut värdena ur arrayen och befolka dropdown-menyerna med det.
Array strukturen ser ut såhär:
Kod: 
var subjectObject = {
    "1a dropdown val A": {
        "2a dropdown val A": {
            "3e dropdown val A": ["4e dropdown val A", "4e dropdown val B", "4e dropdown val C"] },

        "2a dropdown val B": {
            "3e dropdown val A": ["4e dropdown val B", "4e dropdown val C", "4e dropdown val D"] },

        "2a dropdown val C": {
            "3e dropdown val C": ["4e dropdown val E", "4e dropdown val B"] },

        "2a dropdown val D": {
            "3e dropdown val C": ["4e dropdown val A", "4e dropdown val F"] }
    },

    "1a dropdown val B": {
        "2a dropdown val A": {
            "3e dropdown val E": ["4e dropdown val E", "4e dropdown val F", "4e dropdown val B"] },

        "2a dropdown val B": {
            "3e dropdown val E": ["4e dropdown val C", "4e dropdown val E"] }
        }
    }
osv osv.

Som synes, så är 3 första array-nivåerna avskilda poster som är lättare att hämta ut. Men 4e dropdown nivån har flera värden i rad. Därför använder jag en loop för att läsa av alla dessa, och fylla upp sista 4e dropdownen med dom.

HTML-formen ser ut typ såhär:
Kod: 
<select id="first">
     <option value=""> Select Option </option>
</select>

<select id="second">
     <option value=""> Select Option </option>
</select>

<select id="third">
     <option value=""> Select Option </option>
</select>

<select id="fourth">
     <option value=""> Select Option </option>
</select>
.. det är där jag har ID "first", "second", "third" osv som jag använder i koden nedan.

Men jag börjar med att definiera variabler och sen hämta ut dom 3 första nivåerna:
Kod: 
window.onload = function () {
    var first = document.getElementById('first')
    var second = document.getElementById('second')
    var third = document.getElementById('third')
    var fourth = document.getElementById('fourth')
    
    for (var x in subjectObject) {
        // console.log(x);
        first.options[first.options.length] = new Option(x)
    }
    
    first.onchange = function () {
        second.length = 1
        third.length = 1
    
        for (var y in subjectObject[this.value]) {
            // console.log(y);
            second.options[second.options.length] = new Option(y)
        }
    }
osv osv, samma sak för senare nivåer. Jag använder valda alternativet, HTML-formulärets ID "first" eller "second", som utgångspunkt för vad scriptet ska hämta ut för nästa underliggande nivå.

Men sen får jag fan inte till loopen på 4e nivån! DET, är mitt problem. Jag är som sagt inte så skarp på JS, så jag skulle gärna uppskatta lite tips.

Hittills har jag gjort såhär:
Kod: 
third.onchange = function () {
        fourth.length = 1

        z = subjectObject[first.value][this.value]
        console.log(z);
        // document.write(z);
        for (let i = 0; i < z.length; i++) {
            fourth.options[fourth.options.length] = new Option(z[i])
        }
    }
Målsättningen är som sagt att det här ska fylla upp Select ID="fourth" dropdownen i formuläret. Men det svar jag får ut från loopen (som ska läsa av 4e nivån i arrayen ovan) är "undefined", hela tiden. Skulle gärna uppskatta lite kritik och tips om vad jag gör för fel här? Eller kanske om hela upplägget är helt .. off?

Jag är lite osäker på om det kanske är deklarationen av variabeln "z" som är felet? Att jag har BÅDE [first.value] och [this.value] i variabeln? Skulle kanske ha bara en av dom? eller ska jag definiera z-variabeln så att loopen enbart ska läsa av 4e nivån? alltså [third.value][this.value]? Jag tycker jag har provat det och .. ingenting funkar, blir "undefined" som svar jämt. Borde man formulera om hela loopen kanske?

Lite lost här, skulle uppskatta hjälp av mer lärda, vad jag gör för fel i sista loopen?
Tack så mycket på förhand

PS. antalet curly-parenteser kan vara lite off i inklistrade koden ovan, DET är inte problemet .DS

Kanske bättre att skapa dina arrayer såhär:
Kod: 
newArray = { "Val1", "Val2", "Val3", "Val4" };

Och kanske bättre att populera dropdownboxarna manuellt enligt koden du skrivit:
Kod: 
first.options[0] = new Option(newArray[0]);
first.options[1] = new Option(newArray[1]);
first.options[2] = new Option(newArray[2]);
first.options[3] = new Option(newArray[3]);


Kanske göra en loop som loopar igenom arrayen ovan och populerar dropdownen enligt koden ovan.
Obs ej riktig JS kod bara som ett exempel.

Såhär verkar man populera en dropdown med en array så får du med värdet och index:
Kod: 
for(element in langArray)
{
   var opt = document.createElement("option");
   opt.value= index;
   opt.innerHTML = element; // whatever property it has

   // then append it to the select element
   newSelect.appendChild(opt);
   index++;
}
Citera
2023-02-25, 09:27
  #10
FlyboySeven
Medlem
Citat:
Ursprungligen postat av Marinerad65
Gett mig på en HTML-projekt som inkluderar Javascript på en nivå som ligger aningen ovanför min kunskapsnivå, men jag ger mig FAN inte Skulle gärna uppskatta lite kritik och input för att komma loss.

Jag gör ett HTML-formulär, med 4-5 dropdown menyer, i ordning uppifrån och ner, som alla ska vara dynamiska. Dvs val-alternativen som nästa dropdown meny i ordningen ska fyllas med, ska bero på valet man gjorde i den föregående dropdown menyn.

Jag har gjort ett JS script, en array-struktur, som lagrar alla alternativen för alla dropdown-menyer. Tanken är sen att jag ska hämta ut värdena ur arrayen och befolka dropdown-menyerna med det.
Array strukturen ser ut såhär:
Kod: 
var subjectObject = {
    "1a dropdown val A": {
        "2a dropdown val A": {
            "3e dropdown val A": ["4e dropdown val A", "4e dropdown val B", "4e dropdown val C"] },

        "2a dropdown val B": {
            "3e dropdown val A": ["4e dropdown val B", "4e dropdown val C", "4e dropdown val D"] },

        "2a dropdown val C": {
            "3e dropdown val C": ["4e dropdown val E", "4e dropdown val B"] },

        "2a dropdown val D": {
            "3e dropdown val C": ["4e dropdown val A", "4e dropdown val F"] }
    },

    "1a dropdown val B": {
        "2a dropdown val A": {
            "3e dropdown val E": ["4e dropdown val E", "4e dropdown val F", "4e dropdown val B"] },

        "2a dropdown val B": {
            "3e dropdown val E": ["4e dropdown val C", "4e dropdown val E"] }
        }
    }
osv osv.

Som synes, så är 3 första array-nivåerna avskilda poster som är lättare att hämta ut. Men 4e dropdown nivån har flera värden i rad. Därför använder jag en loop för att läsa av alla dessa, och fylla upp sista 4e dropdownen med dom.

HTML-formen ser ut typ såhär:
Kod: 
<select id="first">
     <option value=""> Select Option </option>
</select>

<select id="second">
     <option value=""> Select Option </option>
</select>

<select id="third">
     <option value=""> Select Option </option>
</select>

<select id="fourth">
     <option value=""> Select Option </option>
</select>
.. det är där jag har ID "first", "second", "third" osv som jag använder i koden nedan.

Men jag börjar med att definiera variabler och sen hämta ut dom 3 första nivåerna:
Kod: 
window.onload = function () {
    var first = document.getElementById('first')
    var second = document.getElementById('second')
    var third = document.getElementById('third')
    var fourth = document.getElementById('fourth')
    
    for (var x in subjectObject) {
        // console.log(x);
        first.options[first.options.length] = new Option(x)
    }
    
    first.onchange = function () {
        second.length = 1
        third.length = 1
    
        for (var y in subjectObject[this.value]) {
            // console.log(y);
            second.options[second.options.length] = new Option(y)
        }
    }
osv osv, samma sak för senare nivåer. Jag använder valda alternativet, HTML-formulärets ID "first" eller "second", som utgångspunkt för vad scriptet ska hämta ut för nästa underliggande nivå.

Men sen får jag fan inte till loopen på 4e nivån! DET, är mitt problem. Jag är som sagt inte så skarp på JS, så jag skulle gärna uppskatta lite tips.

Hittills har jag gjort såhär:
Kod: 
third.onchange = function () {
        fourth.length = 1

        z = subjectObject[first.value][this.value]
        console.log(z);
        // document.write(z);
        for (let i = 0; i < z.length; i++) {
            fourth.options[fourth.options.length] = new Option(z[i])
        }
    }
Målsättningen är som sagt att det här ska fylla upp Select ID="fourth" dropdownen i formuläret. Men det svar jag får ut från loopen (som ska läsa av 4e nivån i arrayen ovan) är "undefined", hela tiden. Skulle gärna uppskatta lite kritik och tips om vad jag gör för fel här? Eller kanske om hela upplägget är helt .. off?

Jag är lite osäker på om det kanske är deklarationen av variabeln "z" som är felet? Att jag har BÅDE [first.value] och [this.value] i variabeln? Skulle kanske ha bara en av dom? eller ska jag definiera z-variabeln så att loopen enbart ska läsa av 4e nivån? alltså [third.value][this.value]? Jag tycker jag har provat det och .. ingenting funkar, blir "undefined" som svar jämt. Borde man formulera om hela loopen kanske?

Lite lost här, skulle uppskatta hjälp av mer lärda, vad jag gör för fel i sista loopen?
Tack så mycket på förhand

PS. antalet curly-parenteser kan vara lite off i inklistrade koden ovan, DET är inte problemet .DS

Jag tänker också att säg att du har 4 dropdowns.
Och alla dropdowns har 4 val.
Och alla är beroende på val i föregående dropdowns.
Blir inte det väldigt många kombinationer ?
Typ 100 ?
Måste du inte ha en databas då för att kunna hämta rätt array till nästa dropdown?
Citera
2023-02-25, 09:41
  #11
WebDev
Medlem
WebDevs avatar
Varför använda var för variabler och varför skriva objekt som något mellanting mellan JS och JSON?
Citera
2023-02-25, 09:43
  #12
FlyboySeven
Medlem
Citat:
Ursprungligen postat av Marinerad65
Gett mig på en HTML-projekt som inkluderar Javascript på en nivå som ligger aningen ovanför min kunskapsnivå, men jag ger mig FAN inte Skulle gärna uppskatta lite kritik och input för att komma loss.

Jag gör ett HTML-formulär, med 4-5 dropdown menyer, i ordning uppifrån och ner, som alla ska vara dynamiska. Dvs val-alternativen som nästa dropdown meny i ordningen ska fyllas med, ska bero på valet man gjorde i den föregående dropdown menyn.

Jag har gjort ett JS script, en array-struktur, som lagrar alla alternativen för alla dropdown-menyer. Tanken är sen att jag ska hämta ut värdena ur arrayen och befolka dropdown-menyerna med det.
Array strukturen ser ut såhär:
Kod: 
var subjectObject = {
    "1a dropdown val A": {
        "2a dropdown val A": {
            "3e dropdown val A": ["4e dropdown val A", "4e dropdown val B", "4e dropdown val C"] },

        "2a dropdown val B": {
            "3e dropdown val A": ["4e dropdown val B", "4e dropdown val C", "4e dropdown val D"] },

        "2a dropdown val C": {
            "3e dropdown val C": ["4e dropdown val E", "4e dropdown val B"] },

        "2a dropdown val D": {
            "3e dropdown val C": ["4e dropdown val A", "4e dropdown val F"] }
    },

    "1a dropdown val B": {
        "2a dropdown val A": {
            "3e dropdown val E": ["4e dropdown val E", "4e dropdown val F", "4e dropdown val B"] },

        "2a dropdown val B": {
            "3e dropdown val E": ["4e dropdown val C", "4e dropdown val E"] }
        }
    }
osv osv.

Som synes, så är 3 första array-nivåerna avskilda poster som är lättare att hämta ut. Men 4e dropdown nivån har flera värden i rad. Därför använder jag en loop för att läsa av alla dessa, och fylla upp sista 4e dropdownen med dom.

HTML-formen ser ut typ såhär:
Kod: 
<select id="first">
     <option value=""> Select Option </option>
</select>

<select id="second">
     <option value=""> Select Option </option>
</select>

<select id="third">
     <option value=""> Select Option </option>
</select>

<select id="fourth">
     <option value=""> Select Option </option>
</select>
.. det är där jag har ID "first", "second", "third" osv som jag använder i koden nedan.

Men jag börjar med att definiera variabler och sen hämta ut dom 3 första nivåerna:
Kod: 
window.onload = function () {
    var first = document.getElementById('first')
    var second = document.getElementById('second')
    var third = document.getElementById('third')
    var fourth = document.getElementById('fourth')
    
    for (var x in subjectObject) {
        // console.log(x);
        first.options[first.options.length] = new Option(x)
    }
    
    first.onchange = function () {
        second.length = 1
        third.length = 1
    
        for (var y in subjectObject[this.value]) {
            // console.log(y);
            second.options[second.options.length] = new Option(y)
        }
    }
osv osv, samma sak för senare nivåer. Jag använder valda alternativet, HTML-formulärets ID "first" eller "second", som utgångspunkt för vad scriptet ska hämta ut för nästa underliggande nivå.

Men sen får jag fan inte till loopen på 4e nivån! DET, är mitt problem. Jag är som sagt inte så skarp på JS, så jag skulle gärna uppskatta lite tips.

Hittills har jag gjort såhär:
Kod: 
third.onchange = function () {
        fourth.length = 1

        z = subjectObject[first.value][this.value]
        console.log(z);
        // document.write(z);
        for (let i = 0; i < z.length; i++) {
            fourth.options[fourth.options.length] = new Option(z[i])
        }
    }
Målsättningen är som sagt att det här ska fylla upp Select ID="fourth" dropdownen i formuläret. Men det svar jag får ut från loopen (som ska läsa av 4e nivån i arrayen ovan) är "undefined", hela tiden. Skulle gärna uppskatta lite kritik och tips om vad jag gör för fel här? Eller kanske om hela upplägget är helt .. off?

Jag är lite osäker på om det kanske är deklarationen av variabeln "z" som är felet? Att jag har BÅDE [first.value] och [this.value] i variabeln? Skulle kanske ha bara en av dom? eller ska jag definiera z-variabeln så att loopen enbart ska läsa av 4e nivån? alltså [third.value][this.value]? Jag tycker jag har provat det och .. ingenting funkar, blir "undefined" som svar jämt. Borde man formulera om hela loopen kanske?

Lite lost här, skulle uppskatta hjälp av mer lärda, vad jag gör för fel i sista loopen?
Tack så mycket på förhand

PS. antalet curly-parenteser kan vara lite off i inklistrade koden ovan, DET är inte problemet .DS

Citat:
Men 4e dropdown nivån har flera värden i rad

Här låter det som att du vill ha en dropdown som ser ut som följande:
Val1: Val1, Val2, Val3
Val2: Val1, Val2, Val3
Val3: Val1, Val2, Val3

Det finns väl ingen sådan dropdown i Javascript?
Kollar man online verkar de hitta på egna javascript lösningar för detta med span och annat.

Dessutom om du ska hämta upp information till en sådan dropdown bör det ju vara från en databas och isåfall ifrån 2 tabeller.

Eller ifrån en multidimensionell array t.ex.
Kod: 
arrayItem[0][1];




Kod: 
 for (let i = 0; i < z.length; i++) {
            fourth.options[fourth.options.length] = new Option(z[i])
        }

Ovan loopar du igenom låt oss säga 4 iterationer. Men varje gång lägger du in ett värde i fourth.options[fourth.options.length] alltså på sista platsen för hur stor arrayen har blivit sedan sista iteration.
Men en mera korrekt kod är ju att använda index du använder för att loopa igenom z nämligen i.
Mer lättläslig kod:

Kod: 
 for (let i = 0; i < z.length; i++) {
            fourth.options[i] = new Option(z[i])
        }

Man ser vilket index man jobbar på i dropdown och vilket index man jobbar med i z.
__________________
Senast redigerad av FlyboySeven 2023-02-25 kl. 10:05.
Citera
Svara
  • 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