trying to change a javascript variable with html select tag

Question

I'm making a graph, and I want to change the graph type by using a select statement. I'm trying to make a variable that changes when I change the value of my select tag using a function. The only problem is that i already have a function that changes the X axis of my graph. I tried to mix them but every time i try to show the graph on my site I get the following error:

Uncaught ReferenceError: changeX is not defined at HTMLSelectElement.onchange

It probably has something to do with the fact that I use 2 functions inside each other. Does anybody know how to fix this?

My code:

HTMl:

                        <div class='col-12 XDropDown'>
                            <select id="SelectXValue" onChange='changeX(this)'>
                                <option value="" selected disabled hidden>Kies de X as</option>
                            </select>
                        </div>
                        <div class='col-12 TraceType'>
                            <select id="Trace_Type" onChange='getValueGraph();'>
                                <option value="histogram">histogram</option>
                                <option value="scatter">scatter</option>
                                <option value="bar">bar</option>
                            </select>
                        </div>

Javascript:

    var select = document.getElementById('SelectXValue');

    for (let key of Object.keys(allColumns)) {
        var opt = document.createElement('option');
        opt.value = key;
        opt.innerHTML = key;
        select.appendChild(opt);
    }

    function getValueGraph() {
        var graphid = document.getElementById('Trace_Type');
        var tracetype = graphid.options[graphid.selectedIndex].value;
        console.log(tracetype);

        // Changes Xvalue variable when selecting a different value in the dropdown menu
        function changeX(sel) {
            var staticX = allColumns[sel.options[sel.selectedIndex].text];

            // The traces we want to plot
            var traces = [];
            for (let key of Object.keys(allColumns)) {
                // Building the trace for the specific column.
                var trace = {
                    type: tracetype,
                    histfunc: 'sum',
                    // mode: "bar",
                    name: key,
                    x: staticX,
                    y: allColumns[key],
                    visible: 'legendonly',
                };
                traces.push(trace);
            }

            // print_r(traces);

            var layout = {
                title: '',
                autosize: false,
                width: 1500,
                height: 750,
                xaxis: {
                    showticklabels: true,
                    tickangle: 'auto',
                    tickfont: {
                        family: 'Old Standard TT, serif',
                        size: 14,
                        color: 'black'
                    },
                    showexponent: 'all',
                    tickmode: 'array',
                    ticktext: 'date',
                },
                yaxis: {
                    showticklabels: true,
                    tickangle: 45,
                    tickfont: {
                        family: 'Old Standard TT, serif',
                        size: 14,
                        color: 'black'
                    },
                    showexponent: 'all'
                },
            };

            Plotly.newPlot('graph', traces, layout);
        }
    }

This answer may help you find the solution https://stackoverflow.com/a/8819001/4873616 — Nikita Skrebets, Nov 25 '21 at 10:31

cam · Accepted Answer · 2021-11-25T10:37:11.193

You've placed your changeX inside your getValueGraph function.

This means changeX is only available to be called within that function, and do cant be used as an onclick handler.

Additionally, you set tracetype in getValueGraph and use it within changeX, this needs to be accessible within both scopes.

Lets move both the changeX function and the tracetype variable decleration into the root scope.

var select = document.getElementById('SelectXValue');

for (let key of Object.keys(allColumns)) {
  var opt = document.createElement('option');
  opt.value = key;
  opt.innerHTML = key;
  select.appendChild(opt);
}

var tracetype

function getValueGraph() {
  var graphid = document.getElementById('Trace_Type');
  tracetype = graphid.options[graphid.selectedIndex].value;
  console.log(tracetype);
}

// Changes Xvalue variable when selecting a different value in the dropdown menu
function changeX(sel) {
  var staticX = allColumns[sel.options[sel.selectedIndex].text];

  // The traces we want to plot
  var traces = [];
  for (let key of Object.keys(allColumns)) {
    // Building the trace for the specific column.
    var trace = {
      type: tracetype,
      histfunc: 'sum',
      // mode: "bar",
      name: key,
      x: staticX,
      y: allColumns[key],
      visible: 'legendonly',
    };
    traces.push(trace);
  }

  // print_r(traces);

  var layout = {
    title: '',
    autosize: false,
    width: 1500,
    height: 750,
    xaxis: {
      showticklabels: true,
      tickangle: 'auto',
      tickfont: {
        family: 'Old Standard TT, serif',
        size: 14,
        color: 'black'
      },
      showexponent: 'all',
      tickmode: 'array',
      ticktext: 'date',
    },
    yaxis: {
      showticklabels: true,
      tickangle: 45,
      tickfont: {
        family: 'Old Standard TT, serif',
        size: 14,
        color: 'black'
      },
      showexponent: 'all'
    },
  };

  Plotly.newPlot('graph', traces, layout);
}

Also make sure the JavaScript is being loaded before the onclick attributes are set.

This way we loose the `tracetype` variable from `getValueGraph`. It is used in `changeX`. — Nikita Skrebets, Nov 25 '21 at 10:27

trying to change a javascript variable with html select tag

1 Answers1