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

Posted 2023-02-19

【中文标题】尝试使用 html 选择标记更改 javascript 变量

【英文标题】：trying to change a javascript variable with html select tag

【发布时间】：2022-01-03 14:58:55

【问题描述】：

我正在制作一个图表，我想通过使用 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);
        
    

【问题讨论】：

这个答案可能会帮助你找到解决方案***.com/a/8819001/4873616

【参考方案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。

【讨论】：

这样我们从getValueGraph 中释放了tracetype 变量。它用于changeX。

我想你忘了处理 tracetype 闭包。