0

!!HELP!!

I have a site which is supposed to generate musical chords based on the key selected. It works by generating a random number and assigning a chord based on the number. My problem is the first part. How do I change the function which the buttons would run based on the key selected in the drop down? In the code i only have the Cmajor Scale.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet"  type="text/css" href="style.css">
    </head>

    <body>
        <div id="list-selector">

       <div id ="choosekey"><label for="Key">Choose a key:</label></div>

        <select class="dropdown" name="select key" id="Key">
          <option value="C major">C major</option>
          <option value="C minor">C minor</option>
          <option value="Db major">Db major </option>
          <option value="Db minor">Db minor</option>
          <option value="D major">D major</option>
          <option value="D minor">D minor</option>
          <option value="Eb major">Eb major</option>
          <option value="Eb minor">Eb minor</option>
          <option value="E major">E major</option>
          <option value="E minor">E minor</option>
          <option value="F major"> Fmajor</option>
          <option value="F minor">F minor</option>
          <option value="Gb major">Gb major</option>
          <option value="Gb minor">Gb minor</option>
          <option value="G major">G major</option>
          <option value="G minor">G minor</option>
          <option value="Ab major">Ab major</option>
          <option value="Ab minor">Ab minor</option>
          <option value="A major">A major</option>
          <option value="A minor">A minor</option>
          <option value="Bb major">Bb major</option>
          <option value="Bb minor">Bb minor</option>
          <option value="B major">B major</option>
          <option value="B minor">B minor</option>          

        </select>

    </div>

    <div id="code">
        <script> 
            var myElement = document.getElementById('myElement'),
                myElementValue = myElement.value;
                document.getElementById(display_id).innerHTML('myElement');

            </script> 
            <div id="Button1">
                <button onclick="Cmajor('chord1')">Generate</button>
            </div>
            <div id="Button2">
                <button onclick="Cmajor('chord2')">Generate</button>
            </div>
            <div id="Button3">
                <button onclick="Cmajor('chord3')">Generate</button>
            </div>
            <div id="Button4">
                <button onclick="Cmajor('chord4')">Generate</button>
            </div>
            <div id="Button5">
                <button onclick="Cmajor('chord5')">Generate</button>
            </div>
            <div id="Button6">
                <button onclick="Cmajor('chord6')">Generate</button>
            </div>
            <div id="Button7">
                <button onclick="Cmajor('chord7')">Generate</button>
            </div>
            <div id="Button8">
                <button onclick="Cmajor('chord8')">Generate</button>
            </div>

                <p id="chord1"></p>
                <p id="chord2"></p>
                <p id="chord3"></p>
                <p id="chord4"></p>
                <p id="chord5"></p>
                <p id="chord6"></p>
                <p id="chord7"></p>
                <p id="chord8"></p>

                <script>
                    function Cmajor(display_id) {
                        let getrandomnumber = function(start, range) {

                            let getrandom = Math.floor((Math.random() * range) + start);
                            while (getrandom > range){

                                getrandom = Math.floor ((Math.random() * range) + start);
                            }
                            return getrandom;

                        }

                        var work = (getrandomnumber (1, 7));
                        if (work == 1) {
                            document.getElementById(display_id).innerHTML=("1-Cmajor");
                        } else if (work == 2) {
                            document.getElementById(display_id).innerHTML=("2-Dminor");
                        } else if (work == 3) {
                            document.getElementById(display_id).innerHTML=("3-Eminor");
                        } else if (work == 4) {
                            document.getElementById(display_id).innerHTML=("4-Fmajor");
                        } else if (work == 5) {
                            document.getElementById(display_id).innerHTML=("5-Gmajor");
                        } else if (work == 6) {
                            document.getElementById(display_id).innerHTML=("6-Aminor");
                        } else {
                            document.getElementById(display_id).innerHTML=("7- Bdiminished");
                        }
                    }


                    document.getElementsByClassName(dropdown);
                </script>

    </div>



    </body> 
</html>

ANY HELP WOULD BE GREATLY APPRECIATED!! THANK YOU!!

CodeKage
  • 1
  • I'm not sure I fully understand your question, but it sounds like you're asking how to determine what the user has set the `Key` dropdown's value to and vary each button's behavior, based off that value. This conversation provides that instruction: https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript – David Tran Apr 17 '20 at 22:51
  • Exactly @DavidTran that seems to be the anticipated outcome – Mosia Thabo Apr 17 '20 at 22:52
  • You can dynamically set the onclick function with `element.onclick = function() { action()};`. – Chiel Apr 17 '20 at 22:52

1 Answers1

0

Make an object that maps the values in the dropdown to different functions:

const keys = {
    "C major": Cmajor,
    "C minor": Cminor,
    ...
};

Then define a function that calls the selected function:

function play_in_selected_key(display_id) {
    let key = document.getElementById("Key").value;
    keys[key](display_id);
}

And change your buttons to call this:

<button onclick="play_in_selected_key('chord1')">Generate</button>
Barmar
  • 741,623
  • 53
  • 500
  • 612