嘗試使用htmlselect標記更改javascript變數

我正在制作圖表，并且我想使用 select 陳述句更改圖表型別。我正在嘗試創建一個變數，當我使用函式更改 select 標記的值時，該變數會發生變化。唯一的問題是我已經有了一個改變圖形 X 軸的函式。我試圖混合它們，但每次我嘗試在我的網站上顯示圖表時，我都會收到以下錯誤：

未捕獲的 ReferenceError：changeX 未在 HTMLSelectElement.onchange 中定義

這可能與我在彼此內部使用 2 個函式的事實有關。有誰知道如何解決這個問題？

我的代碼：

網頁版：

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

uj5u.com熱心網友回復：

您放置changeX 里面的getValueGraph功能。

這意味著changeX只能在該函式內呼叫，并且不能用作onclick處理程式。

此外，您tracetype在 中設定getValueGraph并使用它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 。

標籤：javascript html 功能 变量 选择

上一篇： =不支持的運算元型別：'int'和'datetime.timedelta'

下一篇：替換陣列中的多個變數，然后列出Javascript