Change array depending on select option

I can’t find any information on how to change array, when you change value in drop-down list This is what a got after hours.

So I have three lists (arrays) levelOne, levelTwo & levelThree. I have button that start function (randomTask) then that is running the function (random_item) it gets it input value from the let (savedList)

savedList should be updated from the self invoked arrow function when I change my drop-down list.

So right now, when I run this it works well before I change value in my drop-down list. Then it gives back random letter,

My conclusion is that it passing a string insted of a what I want it to do, change to a variable name, that can change the array.

I’am aware of that I can be totally wrong, and that this makes it harder then it has to be.

please help, and simplistic programing language is appreciated.

////--->> TODO LIST <<---////

const levelOne = ["task1.1", "task1.2", "task1.3", "task1.4", "task1.5" ];
const levelTwo = ["task2.1", "task2.2", "task2.3", "task2.4", "task2.5" ];
const levelThree = ["task3.1", "task3.2", "task3.3", "task3.4", "task3.5" ];



function randomTask(event) {
    event.preventDefault();
    todoInput.value = random_item(savedList);
}

function random_item() {
    return savedList[Math.floor(Math.random()*savedList.length)];
}

let savedList = levelOne;


let selection = document.getElementById('level');
let result = document.querySelector('h3');

selection.addEventListener('change', () => {
    result.innerText = selection.options[selection.selectedIndex].value;
    savedList = selection.options[selection.selectedIndex].value;
        
});

console.log(selection.options[selection.selectedIndex].value);
        
<body>
 
    <header>
        <h1>To do list</h1>
    </header>
    <form>
        <input id="test" type="text" class="todo-input">
<!--My button-->
        <button class="random-button" type="submit">
            <i class="fas fa-random"></i>
        </button>
<!--My button-->
        <button class="todo-button" type="submit">
            <i class="fas fa-plus-square"></i>
        </button>
        
        
        <select id="level" name="level" class="level-select">
            <option disabled="disabled" selected="selected">Choose level.</option>
            <option value="levelOne">Level One</option>
            <option value="leveltwo">Level two</option>
            <option value="levelthree">Level three</option>
        </select>

        Activ list: 
        <h3>Result</h3>

    </form>
    </div>


    <div class="todo-container">
        <ul class="todo-list"></ul>
    </div>


    <script src="app.js"></script>
</body>
</html>

Answer

From the problem statement, I gather, you want to use separate level’s task items depending on user selection. Assuming this to be correct, below is the approach:

  • Create a map of levels (either plain old object or Map)
  • Pick data based on user selection
  • Bind that to the scoped variable savedList

and here’s in JS

const levels_data = {
 'levelOne': ["task1.1", "task1.2", "task1.3", "task1.4", "task1.5" ],
 'leveltwo': ["task2.1", "task2.2", "task2.3", "task2.4", "task2.5" ],
 'levelthree': ["task3.1", "task3.2", "task3.3", "task3.4", "task3.5" ]
};


function randomTask(event) {
    event.preventDefault();
    todoInput.value = random_item(savedList);
}

function random_item() {
    return savedList[Math.floor(Math.random()*savedList.length)];
}

let savedList = levels_data['levelOne'];


let selection = document.getElementById('level');
let result = document.querySelector('h3');

selection.addEventListener('change', () => {
    result.innerText =      selection.options[selection.selectedIndex].value;
    savedList = levels_data[selection.options[selection.selectedIndex].value];
        
});

Please sanitize the snippet for binding.