Change JS array using Drop Down select

Question

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;

        }

bsoist · Accepted Answer · 2014-04-22 14:52:55Z

1

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.

edited Apr 22, 2014 at 14:52

answered Apr 22, 2014 at 14:08

bsoist

7853 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

redditor Over a year ago

How would I counteract that? Do I need to move the array vars down, after the changeScale function? Or am I approaching this from the wrong angle?

bsoist Over a year ago

Updated my answer to suggest a solution. I'm not sure that covers everything. Let me know if you need any other hints.

bsoist Over a year ago

note that the order of the listing in my_arrays should match the <option> elements

Collectives™ on Stack Overflow

Change JS array using Drop Down select

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related