尝试使用 html 选择标记更改 javascript 变量

Question

我正在制作一个图表，我想通过使用 select 语句来更改图表类型。我正在尝试创建一个变量，当我使用函数更改我的选择标记的值时该变量会发生变化。唯一的问题是我已经有一个函数可以改变我的图表的 X 轴。我尝试将它们混合，但每次尝试在我的网站上显示图表时，我都会收到以下错误：

Uncaught ReferenceError: changeX is not defined at HTMLSelectElement.onchange

这可能与我在彼此内部使用 2 个函数这一事实有关。有人知道如何解决这个问题吗？

我的代码：

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);
        }
    }

Answer 1

您已将changeX 放入您的getValueGraph 函数中。

这意味着changeX 只能在该函数中调用，不能用作onclick 处理程序。

另外，您在getValueGraph 中设置tracetype 并在changeX 中使用它，这需要在两个范围内都可以访问。

让我们将changeX 函数和tracetype 变量声明移到根作用域中。

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);
}

还要确保在设置 onclick 属性之前加载 JavaScript。