Nrthugu

i have the following problem. I try to make some kind of "video select screen" where you have the option to choose what kind of video you want to see AND choose what music genre you want to listen to while the video plays (there is one video-file for every possible choice). I tried to write a function that changes the src of the video but i just cant make it work and i dont know why.

This is my code so far:

HTML:

<form>

<h3>Customize your own Showreel</h3>

                        <fieldset>

                                <input type="radio" id="commercials" name="selection" value="com">

                                <label for="commercials">Commercials</label>



                                <input type="radio" id="mixed" name="selection" value="mix" checked="checked">

                                <label for="mixed">Mixed</label>



                                <input type="radio" id="videoclip" name="selection" value="vid">

                                <label for="videoclip">Videoclips</label>

                        </fieldset>



<h4>Select Music</h4>

                    <fieldset>

                        <input type="radio" id="pop" name="musicselection" value="pop" checked="checked">

                        <label for="pop">Pop</label>

                        <input type="radio" id="rock" name="musicselection" value="rock">

                        <label for="rock">Rock</label>

                    </fieldset>



                    <video id="theVideo" controls></video>

                    <button type="button" id="theVideo" onclick="playselected();">play</button>



</form>

Javascript:

function playselected() {

              var music = document.getElementsByName("musicselection");

              var selection = document.getElementsByName("selection");

              var theVid = document.getElementById("theVideo");



                if (music.value == "com" && selection.value == "pop") {

                    theVid.src = "videos/com_pop.mp4";

                }



                if (music.value == "com" && selection.value == "rock") {

                    theVid.src = "videos/com_rock.mp4";

                }

                if (music.value == "mix" && selection.value == "pop") {

                    theVid.src = "videos/mix_pop.mp4";

                }

                if (music.value == "mix" && selection.value == "rock") {

                    theVid.src = "videos/mix_rock.mp4";

                }

                if (music.value == "vid" && selection.value == "pop") {

                    theVid.src = "videos/vid_pop.mp4";

                }

                if (music.value == "vid" && selection.value == "rock") {

                    theVid.src = "videos/vid_rock.mp4";

                }

            }

This is what i came up with. I hope my attempt to takle the problem is even pointing in the right direction. (im new to javascript and html and im teaching myself how to code. please dont be too harsh)

That's because getElementsByName returns a NodeList, which means that you have to iterate through the collection to access the value of the selected radio button. Therefore, you can convert the NodeList into an array using Array.prototype.slice.call(<NodeList>), perform filtering on it to return radio buttons that are checked, and then use it to access its value:

var musicValue = Array.prototype.slice.call(music).filter(function(musicRadioButton) {

  return musicRadioButton.checked;

})[0].value;



var selectionValue = Array.prototype.slice.call(selection).filter(function(selectionRadioButton) {

  return selectionRadiobutton.checked;

})[0].value;

Further explanation on the code block above:

1. 
   Array.prototype.slice.call(music) converts the music NodeList into an array of elements


2. We then use .filter() to go through the returned array. In the callback, we ensure that we only select/filter for radio buttons that are checked, i.e. .checked property returns a truthy value.


3. Chain [0] after the .filter() call to get the first checked radio button


4. Chain .value to get the value of the first checked radio button

Then in your if/else blocks, instead of checking for music.value or selection.value, you can refer to musicValue and selectionValue instead:

function playselected() {

  var music = document.getElementsByName("musicselection");

  var selection = document.getElementsByName("selection");

  var theVid = document.getElementById("theVideo");



  var musicValue = Array.prototype.slice.call(music).filter(function(musicRadioButton) {



    return musicRadioButton.checked;

  })[0].value;

  var selectionValue = Array.prototype.slice.call(selection).filter(function(selectionRadioButton) {

    return selectionRadiobutton.checked;

  })[0].value;



  if (musicValue == "com" && selectionValue == "pop") {

    theVid.src = "videos/com_pop.mp4";

  }



  if (musicValue == "com" && selectionValue == "rock") {

    theVid.src = "videos/com_rock.mp4";

  }

  if (musicValue == "mix" && selectionValue == "pop") {

    theVid.src = "videos/mix_pop.mp4";

  }

  if (musicValue == "mix" && selectionValue == "rock") {

    theVid.src = "videos/mix_rock.mp4";

  }

  if (musicValue == "vid" && selectionValue == "pop") {

    theVid.src = "videos/vid_pop.mp4";

  }

  if (musicValue == "vid" && selectionValue == "rock") {

    theVid.src = "videos/vid_rock.mp4";

  }

}

<form>

  <h3>Customize your own Showreel</h3>

  <fieldset>

    <input type="radio" id="commercials" name="selection" value="com">

    <label for="commercials">Commercials</label>



    <input type="radio" id="mixed" name="selection" value="mix" checked="checked">

    <label for="mixed">Mixed</label>



    <input type="radio" id="videoclip" name="selection" value="vid">

    <label for="videoclip">Videoclips</label>

  </fieldset>



  <h4>Select Music</h4>

  <fieldset>

    <input type="radio" id="pop" name="musicselection" value="pop" checked="checked">

    <label for="pop">Pop</label>

    <input type="radio" id="rock" name="musicselection" value="rock">

    <label for="rock">Rock</label>

  </fieldset>



  <video id="theVideo" controls></video>

  <button type="button" id="theVideo" onclick="playselected();">play</button>



</form>