how to set duration of audio array depending on user's select tag

Question

I'm trying to make my code play an array of audio files but when my index i = 4, the duration would depend on user's select tag. I tired to catch user's option by select name and multiply 100 (because it's millisecond). My program shows it's undefined. Why is it?

And After entire array has been played in the first round, my code would repeat playing audio from array playlist element 3 to 5 but it's random chosen. I was thinking to use random seed to pick the element from 3 to 5. But this is math involved. How should I approach this?

Thank you for you help. I appreciate it

<select id="numFollowUp" name="numFollowUp" style=display:none>
            <option value="">Number of follow-up questions</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    <br>
    <br>
    <select id="secFollowUp" name="secFollowUp" style=display:none>
            <option value="">Second between each question</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
        </select>

var intro_playList = [{
        "duration": 1000,
        "key": "0_silence"
    }, {
        "duration": 500,
        "key": "1_hello"
    }, {
        "duration": 1000,
        "key": "2_how_old"
    }, {
        "duration": 1000,
        "key": "3_what_did_you_make"
    }, {
        "duration": document.getElementById("secFollowUp").value * 1000,
        "key": "4_tell_me_a_story"
    }, {
        "duration": document.getElementById("secFollowUp").value * 1000,
        "key": "5_and_then_what"
    }];

  var i = 0;

  $("#play").on("click", playAudio);

        function playAudio() {
            var audioIndex = intro_playList[i++];
            console.log(audioIndex);
            console.log("After " + audioIndex.duration + " seconds play next audio");

            audioElement.src = "sound/" + audioIndex.key + ".wav";
            audioElement.load();
            setTimeout(function() { audioElement.play()}, audioIndex.duration);

            if(i === 4){

                audioElement.src = "sound/" + audioIndex.key + ".wav";
                audioElement.load();
                setTimeout(function(){ audioElement.play()}, select_value);

                $("#numFollowUp").change(function(){
                    $(this).val() = repeat;
                });
            }
        }

Answer 1

That would be because document.getElementsByName("secFollowUp") returns a NodeList and not a specific element.

So if secFollowUp is indeed the name of an input element (and you want to access it with the getElementsByName method) you must use document.getElementsByName("secFollowUp")[0].value (notice the [0] to get the 1st element of the NodeList)

If it is the id of the input element then use document.getElementById('secFollowUp').value

update
Had not noticed the actual html in your post, both solutions will work but the second is better (using the getElementById)