CODEWITHSUNDEEP
javascripthtmlarrays
redditor
redditor

Reputation: 4286

Change JS array using Drop Down select

I would like to change which array is being used by selecting it from a drop down box. The script then randomizes items in the given array.

The full code can be viewed here: http://codepen.io/anon/pen/Lqkdp/

HTML:

<select id="scale" name="scale" onchange="changeScale()">
<option value="array_Amaj">Amaj</option>
<option value="array_chromatic">Chromatic</option>
</select>

  <div id="scaleprint"></div>

JS:

var array_chromatic = ['A', 'A%23', 'Bb', 'B', 'C', 'C%23', 'Db', 'D', 'D%23', 'Eb', 'E', 'F', 'F%23', 'Gb', 'G', 'G%23', 'Ab'];

var array_Amaj = ['A', 'B', 'C%23', 'D', 'E', 'F%23', 'G%23'];

function changeScale()
{
  array_scale = document.getElementById("scale").value;
  document.getElementById("scaleprint").innerHTML = array_scale;
  array_chromatic = array_scale;
}

If the user selects 'Chromatic', the DIV called 'scaleprint' should update and the next part of the script should use that array to randomize and display the given note.

function renderKnuth()
        {
            array_chromatic.knuthShuffle();
            var audio = document.getElementById('sound');
      audio.src = 'http://lofiz.co.uk/gtr/dontfret/' + array_chromatic[0] + '.mp3';
      var str1 = array_chromatic[0]
      str2 = str1.replace("%23", '#');
            document.getElementById('knuth_data2').innerHTML = str2;

        }

Upvotes: 0

Views: 416

Answers (1)

bsoist
bsoist

Reputation: 785

After you set array_chromatic to a string

array_chromatic = array_scale

this 

array_chromatic.knuthShuffle()

is coming back undefined.

UPDATE

Change the values on your elements to numbers like this

<option value="0">Amaj</option>
<option value="1">Chromatic</option>

then change this 

array_chromatic = array_scale;

to this

array_chromatic = my_arrays[array_scale];

and then add this

var my_arrays  = [array_Amaj, array_chromatic];

just below your array definitions.

Upvotes: 1

Related Questions