单击 Javascript 按钮为全局变量赋值答案

【问题标题】：Assigning values to global variable on click of button for Javascript单击 Javascript 按钮为全局变量赋值
【发布时间】：2017-03-11 02:36:25
【问题描述】：

想问一些与javascript有关的事情。我有一个 html 模板和一个按钮 (b1)，其中 onclick 它将为变量 tempdata 分配一个数组。当我尝试在 .onclick 函数之外执行 alert(tempdata) 时，什么也没有发生（我尝试在 onclick 函数中执行 alert(tempdata) 并且它可以工作）。但是，我需要在 onclick 函数之外使用变量 tempdata 的原因是因为我需要将 tempdata 数组传递给 var config 变量的数据标签

所以我的问题是如何设置 tempdata 数组并将其传递给数据标签？

var cusomernames=[];

var myObj = [{
"region":"APAC",
"customers": [
    { "name":"A", "count":100 },
    { "name":"B", "count":35 },
    { "name":"C", "count":90 }
]
},
{
"region":"ASEAN",
"customers": [
    { "name":"A", "count":30 },
    { "name":"B", "count":35 },
    { "name":"C", "count":90 }
]
}

];


function myFunction() {
    var datasum=[];  
    for(var i = 0; i < myObj.length; i++) {
        if(myObj[i].region == "APAC"){
            for(var p=0;p<3;p++){
                datasum.push(myObj[i].customers[p].count);
                cusomernames.push(myObj[i].customers[p].name);
            }
        }

    }

    return datasum;        

}



window.onload = function() {
    var b1=document.getElementById('b1');
    var tempData=[];
    b1.onclick=function(){  
        tempData=myFunction();
        alert(tempData);
    }

    var config = {
        type: 'funnel',
        data: {
            datasets: [{
                data: tempData,
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }],
            labels: ["A","B","C"]
        },
        options: {
            responsive: true,
            sort: 'desc',
            legend: {
                position: 'top'
            },
            title: {
                display: true,
                text: 'Chart.js Funnel Chart'
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    };
    var ctx = document.getElementById("chart-area").getContext("2d");
    window.myDoughnut = new Chart(ctx, config);



};

【问题讨论】：

标签： javascript

【解决方案1】：

你不能直接设置config属性而不使用临时变量吗？

//....
var config = {...}
window.onload = function () {
    b1.onclick(function () {
        config.datasets[0].data = myFunction();
    });
    //Chart stuff
}

【讨论】：

【解决方案2】：

试试：

tempData.push(myFunction());

代替：

tempData=myFunction();

编辑：我认为上述两种方法都应该可以正常工作，我认为这是时间问题。我认为您需要将配置放在事件侦听器的范围内。喜欢：

b1.onclick=function(){  
    tempData=myFunction();
    alert(tempData);

    var config = {
        type: 'funnel',
        data: {
        datasets: [{
            data: tempData,
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
                ]
            }],
           labels: ["A","B","C"]
        },
        options: {
            responsive: true,
            sort: 'desc',
            legend: {
                position: 'top'
            },
            title: {
                display: true,
                text: 'Chart.js Funnel Chart'
            },
            animation: {
                animateScale: true,
                animateRotate: true
           }
        }
    }; 
 }

【讨论】：