Fatal编程技术网
  • javascript/
  • 当我将JavaScript块添加到函数中时，它不起作用。有人能解释一下原因吗？

当我将JavaScript块添加到函数中时，它不起作用。有人能解释一下原因吗？

javascript

当我将JavaScript块添加到函数中时，它不起作用。有人能解释一下原因吗？,javascript,Javascript,我成功地制作了这个 当我点击“随机化”按钮时，它会产生5个随机整数，用于三个图表和“计数”列表中的数据点，图表都会立即刷新/更新。那部分很好用 然而，在右边列表的底部，你会看到它写着“动物是：…”，上面有一个动物的名字和一个数字。此数据通过以下方式从Google工作表中提取： function getRndInteger (min, max) { return Math.floor(Math.random() * (max - min)) + min } var k var r r =

我成功地制作了这个

当我点击“随机化”按钮时，它会产生5个随机整数，用于三个图表和“计数”列表中的数据点，图表都会立即刷新/更新。那部分很好用

然而，在右边列表的底部，你会看到它写着“动物是：…”，上面有一个动物的名字和一个数字。此数据通过以下方式从Google工作表中提取：

function getRndInteger (min, max) {
  return Math.floor(Math.random() * (max - min)) + min
}

var k
var r

r = getRndInteger(2, 6)
const onDataLoaded = (data) => {
  const gscontent = data.feed.entry.find((entry) => entry.title.$t == 'A' + r).content.$t
  k = gscontent
  document.getElementById('data').innerHTML = 'The Animal Is: ' + k + ' (' + r + ')'
}

r = getRndInteger(2,6)
const onDataLoaded = (data) => {
const x = r;
const gscontent = data.feed.entry.find((entry) => entry.title.$t == 'A'+x).content.$t
k = gscontent
document.getElementById('data').innerHTML = 'The Animal Is: ' + k + ' (' + x + ')'
  }
这也将在页面的下一页显示：

<script src="https://spreadsheets.google.com/feeds/cells/1dy1jneioOYWWanx2iW_FdaSxfXIf1h_d5sO7FB1LG4Q/1/public/basic?alt=json-in-script&callback=onDataLoaded"></script>
它基本上在我的谷歌电子表格中查找A2和A5之间的一个随机单元格，并返回该单元格中动物的名称。电子表格可在此处找到：

当页面加载时，以及当我刷新（F5）页面时，这会起作用，但我要做的是使其在我点击随机按钮时，以及生成新数据点和刷新三个图形时，也返回另一个动物名称。但是，当我尝试将上面的代码添加到相关函数时，它似乎不起作用

整个页面看起来像：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3">
                <div class="corner"><h1>Bar & Line</h1><canvas id="myChart" height="200"></canvas></div>
            </div>
            <div class="col-sm-3">
                <div class="corner"><h1>Doughnut</h1><canvas id="myDoughnutChart" height="200"></canvas></div>
            </div>
            <div class="col-sm-3">
                <div class="corner"><h1>Pie</h1><canvas id="myPieChart" height="200"></div>
            </div>
            <div class="col-sm-3">
                <div class="corner">
                    <h2>Count</h2>
                    <p id="numa"></p>
                    <p id="numb"></p>
                    <p id="numc"></p>
                    <p id="numd"></p>
                    <p id="nume"></p>
                    <p id="data"></p>
                    <button type="button" class="btn btn-success" onclick="myFunction()">Randomize</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var a
        var b
        var c
        var d
        var e

        a = Math.floor(Math.random() * 101);
        b = Math.floor(Math.random() * 101);
        c = Math.floor(Math.random() * 101);
        d = Math.floor(Math.random() * 101);
        e = Math.floor(Math.random() * 101);

        document.getElementById("numa").innerHTML = 'Africa: ' + a;
        document.getElementById("numb").innerHTML = 'Asia: ' + b;
        document.getElementById("numc").innerHTML = 'Europe: ' + c;
        document.getElementById("numd").innerHTML = 'Latin America: ' + d;
        document.getElementById("nume").innerHTML = 'North America: ' + e;

        function myFunction() {
            a = Math.floor(Math.random() * 101);
            b = Math.floor(Math.random() * 101);
            c = Math.floor(Math.random() * 101);
            d = Math.floor(Math.random() * 101);
            e = Math.floor(Math.random() * 101);

            document.getElementById("numa").innerHTML = 'Africa: ' + a;
            document.getElementById("numb").innerHTML = 'Asia: ' + b;
            document.getElementById("numc").innerHTML = 'Europe: ' + c;
            document.getElementById("numd").innerHTML = 'Latin America: ' + d;
            document.getElementById("nume").innerHTML = 'North America: ' + e;

            myChart.data.datasets[0].data[0] = a;
            myChart.data.datasets[0].data[1] = b;
            myChart.data.datasets[0].data[2] = c;
            myChart.data.datasets[0].data[3] = d;
            myChart.data.datasets[0].data[4] = e;
            myChart.data.datasets[1].data[0] = a;
            myChart.data.datasets[1].data[1] = b;
            myChart.data.datasets[1].data[2] = c;
            myChart.data.datasets[1].data[3] = d;
            myChart.data.datasets[1].data[4] = e;

            myChart.update();

            myDoughnutChart.data.datasets[0].data[0] = a;
            myDoughnutChart.data.datasets[0].data[1] = b;
            myDoughnutChart.data.datasets[0].data[2] = c;
            myDoughnutChart.data.datasets[0].data[3] = d;
            myDoughnutChart.data.datasets[0].data[4] = e;

            myDoughnutChart.update();

            myPieChart.data.datasets[0].data[0] = a;
            myPieChart.data.datasets[0].data[1] = b;
            myPieChart.data.datasets[0].data[2] = c;
            myPieChart.data.datasets[0].data[3] = d;
            myPieChart.data.datasets[0].data[4] = e;

            myPieChart.update();

        }

    </script>

    <script>
        function getRndInteger(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
        }

        var k
        var r

        r = getRndInteger(2, 6)
        const onDataLoaded = (data) => {
            const gscontent = data.feed.entry.find((entry) => entry.title.$t == 'A' + r).content.$t
            k = gscontent
            document.getElementById('data').innerHTML = 'The Animal Is: ' + k + ' (' + r + ')'
        }
    </script>
    <script src="https://spreadsheets.google.com/feeds/cells/1dy1jneioOYWWanx2iW_FdaSxfXIf1h_d5sO7FB1LG4Q/1/public/basic?alt=json-in-script&callback=onDataLoaded"></script>
    <script src="ctx.js"></script>
    <script src="ctx2.js"></script>
    <script src="ctx3.js"></script>
</body>
</html>


酒吧和酒吧
炸圈饼
馅饼
计数












随机化
变量a
变量b
变量c
变量d
变量e
a=数学地板（数学随机（）*101）；
b=数学地板（数学随机（）*101）；
c=数学地板（数学随机（）*101）；
d=数学地板（数学随机（）*101）；
e=数学地板（数学随机（）*101）；
document.getElementById（“numa”）.innerHTML='Africa:'+a；
document.getElementById（“numb”）.innerHTML='Asia:'+b；
document.getElementById（“numc”）.innerHTML='Europe:'+c；
document.getElementById（“numd”）.innerHTML='拉丁美洲：'+d；
document.getElementById（“nume”）.innerHTML='北美：'+e；
函数myFunction（）{
a=数学地板（数学随机（）*101）；
b=数学地板（数学随机（）*101）；
c=数学地板（数学随机（）*101）；
d=数学地板（数学随机（）*101）；
e=数学地板（数学随机（）*101）；
document.getElementById（“numa”）.innerHTML='Africa:'+a；
document.getElementById（“numb”）.innerHTML='Asia:'+b；
document.getElementById（“numc”）.innerHTML='Europe:'+c；
document.getElementById（“numd”）.innerHTML='拉丁美洲：'+d；
document.getElementById（“nume”）.innerHTML='北美：'+e；
myChart.data.datasets[0]。数据[0]=a；
myChart.data.datasets[0]。数据[1]=b；
myChart.data.datasets[0]。数据[2]=c；
myChart.data.dataset[0]。数据[3]=d；
myChart.data.datasets[0]。数据[4]=e；
myChart.data.datasets[1]。数据[0]=a；
myChart.data.datasets[1]。数据[1]=b；
myChart.data.dataset[1].data[2]=c；
myChart.data.datasets[1].data[3]=d；
myChart.data.dataset[1].data[4]=e；
myChart.update（）；
myDoughnutChart.data.datasets[0]。数据[0]=a；
myDoughnutChart.data.datasets[0]。数据[1]=b；
myDoughnutChart.data.datasets[0]。数据[2]=c；
myDoughnutChart.data.datasets[0]。数据[3]=d；
myDoughnutChart.data.datasets[0]。数据[4]=e；
myDoughnutChart.update（）；
myPieChart.data.datasets[0]。数据[0]=a；
myPieChart.data.dataset[0]。数据[1]=b；
myPieChart.data.datasets[0]。数据[2]=c；
myPieChart.data.datasets[0]。数据[3]=d；
myPieChart.data.datasets[0]。数据[4]=e；
myPieChart.update（）；
}
函数getRndInteger（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min））+min；
}
变量k
变量r
r=getRndInteger（2,6）
常量onDataLoaded=（数据）=>{
const gscontent=data.feed.entry.find（（entry）=>entry.title.$t=='A'+r）.content.$t
k=谷胱甘肽含量
document.getElementById（'data'）.innerHTML='动物是：'+k+'（'+r+'）'
}
每次调用
r
时，它都会给您一个随机值，因此您可以在
x
中一次存储一个
r
值，然后按如下方式使用：

function getRndInteger (min, max) {
  return Math.floor(Math.random() * (max - min)) + min
}

var k
var r

r = getRndInteger(2, 6)
const onDataLoaded = (data) => {
  const gscontent = data.feed.entry.find((entry) => entry.title.$t == 'A' + r).content.$t
  k = gscontent
  document.getElementById('data').innerHTML = 'The Animal Is: ' + k + ' (' + r + ')'
}

r = getRndInteger(2,6)
const onDataLoaded = (data) => {
const x = r;
const gscontent = data.feed.entry.find((entry) => entry.title.$t == 'A'+x).content.$t
k = gscontent
document.getElementById('data').innerHTML = 'The Animal Is: ' + k + ' (' + x + ')'
  }
加载电子表格时，传递一个名为
callback
的查询参数，该参数基本上告诉电子表格在加载完成时调用全局函数，因此
onDataLoaded
是一个在加载电子表格时获取数据的函数

为了使该数据能够被任何其他函数访问，您首先必须将该数据作为全局变量公开

以下是仅脚本部分的示例（不含图表代码）：

以下是基于您的代码的JSFIDLE（注意：我注释掉了没有图表文件无法工作的代码）：

代码本身存在多个问题，但我只做了影响您问题的更改。 下面是一个小的变化概述：

  • 我添加了一个名为
    spreadSheetData
    的新变量，它充当保存电子表格数据的全局变量
  • onDataLoaded
    仅设置全局变量并调用
    myFunction
  • myFunction
    现在包括所有随机化逻辑，包括动物选择