调用javascript后无响应按钮

时间：2014-04-01 04:18:05

标签： javascript html

我正在使用这个js小提琴http://jsfiddle.net/iansan5653/7EPjH/17/

我的问题在于顶部的按钮。他们应该在文本区域显示信息。在我的浏览器中，按钮使页面空白。但是，在控制台中执行相同的onclick代码。我究竟做错了什么？

为简洁起见，遗漏了一些代码

   var abstractlog = "1 0 c\n 2 0 b\n 3 0 a\n 4 0 d\n 1 1 f\n 2 1 b\n 3 1 a\n 4 1 e\n 1 2 f\n 2 2 b\n 3 2 a\n 4 2 d";
var abstractargs = "-r ^(?<TYPE>),(?<TIME>),(?<trace>)\n 2 -m \\k<trace>" ;

var browserlog = "64.163.76.74, cache-page, 0\n 164.163.76.74, retrieve-page, 9\n 164.163.76.74, cache-image, 18\n 164.163.76.74, retrieve-image, 39\n 164.163.76.74, quit, 160 \n --\n 237.250.28.190, cache-page, 0\n 237.250.28.190, retrieve-page, 17\n 237.250.28.190, cache-image, 34\n 237.250.28.190, retrieve-image, 104 \n 237.250.28.190, quit, 274 \n --\n 130.78.242.94, cache-page, 0\n 130.78.242.94, retrieve-page, 9\n 130.78.242.94, cache-image, 118 \n 130.78.242.94, retrieve-image, 140 \n 130.78.242.94, quit, 162 \n --\n 177.176.181.25, cache-page, 0\n 177.176.181.25, retrieve-page, 17\n 177.176.181.25, cache-image, 136 \n 177.176.181.25, retrieve-image, 204 \n 177.176.181.25, quit, 272 \n --\n 195.88.181.89, cache-image, 0\n 195.88.181.89, retrieve-image, 27\n 195.88.181.89, quit, 54\n --\n 153.98.187.29, cache-image, 0\n 153.98.187.29, retrieve-image, 62\n 153.98.187.29, quit, 124";
var browserargs = "-r (?<ip>) .+:(?<DTIME>.+)\\] \"GET HTTP/1.1 /(?<TYPE>.+)\" -m \\k<ip>" ;

var connectionlog =   "\"19.38.218.11 [31/May/2014:31200.0] \"GET HTTP/1.1 /test-bandwidth\"\n 19.38.218.11 [31/May/2014:31202.0] \"GET HTTP/1.1 /narrowband\"\n 19.38.218.11 [31/May/2014:31205.7] \"GET HTTP/1.1 /query\"\n 19.38.218.11 [31/May/2014:31208.9] \"GET HTTP/1.1 /query\"\n 19.38.218.11 [31/May/2014:31209.7] \"GET HTTP/1.1 /report-normal\"\n 95.39.21.28 [31/May/2014:31200.3] \"GET HTTP/1.1 /test-bandwidth\"\n 95.39.21.28 [31/May/2014:31202.3] \"GET HTTP/1.1 /narrowband\"\n 95.39.21.28 [31/May/2014:31206.0] \"GET HTTP/1.1 /query\"\n 95.39.21.28 [31/May/2014:31206.8] \"GET HTTP/1.1 /report-normal\"\n 210.82.199.247 [31/May/2014:31200.1] \"GET HTTP/1.1 /test-bandwidth\"\n 210.82.199.247 [31/May/2014:31200.8] \"GET HTTP/1.1 /broadband\"\n 210.82.199.247 [31/May/2014:31202.1] \"GET HTTP/1.1 /query\"\n 210.82.199.247 [31/May/2014:31208.3] \"GET HTTP/1.1 /query\"\n 210.82.199.247 [31/May/2014:31208.8] \"GET HTTP/1.1 /report-abnormal\"\n 130.78.242.94 [31/May/2014:31200.1] \"GET HTTP/1.1 /test-bandwidth\"\n 130.78.242.94 [31/May/2014:31200.7] \"GET HTTP/1.1 /broadband\"\n 130.78.242.94 [31/May/2014:31201.9] \"GET HTTP/1.1 /query\"\n 130.78.242.94 [31/May/2014:31208.0] \"GET HTTP/1.1 /query\"\n 130.78.242.94 [31/May/2014:31208.4] \"GET HTTP/1.1 /report-abnormal\"\n 38.151.1.182 [31/May/2014:31200.2] \"GET HTTP/1.1 /test-bandwidth\"\n 38.151.1.182 [31/May/2014:31200.8] \"GET HTTP/1.1 /broadband\"\n 38.151.1.182 [31/May/2014:31202.0] \"GET HTTP/1.1 /query\"\n 38.151.1.182 [31/May/2014:31203.3] \"GET HTTP/1.1 /query\"\n 38.151.1.182 [31/May/2014:31203.8] \"GET HTTP/1.1 /report-normal\"\n 37.161.90.108 [31/May/2014:31200.2] \"GET HTTP/1.1 /test-bandwidth\"\n 37.161.90.108 [31/May/2014:31200.9] \"GET HTTP/1.1 /broadband\"\n 37.161.90.108 [31/May/2014:31202.2] \"GET HTTP/1.1 /query\"\n 37.161.90.108 [31/May/2014:31203.6] \"GET HTTP/1.1 /query\"\n 37.161.90.108 [31/May/2014:31204.7] \"GET HTTP/1.1 /report-normal\"";
var connectionargs = "-r (?<ip>.+), (?<TYPE>.+), (?<DTIME>.+) -s ^--$";
 var logstring;
 var argstring;

function writeAbstractModel() {
       logstring =  abstractlog ;
       argstring = abstractargs;K
}

function writeBrowserModel() {
    logstring = browserlog ;
    argstring = browserargs;
}

function writeConnectionModel() {
    logstring = connectionlog ;
    argstring = connectionargs;
}

function write() {
    $("#logtext").val(logstring);
    $("#args").val(argstring);
}

<button id="abstractform" onclick="writeAbstractModel(); write(); data = abc_model;">Abstract Example </button>
    <button id="bandwithform" onclick="writeBrowserModel(); write(); data = test_bandwith_model;">Bandwith Example</button>
    <button type="browserform" onclick="writeConnectionModel(); write(); data = browser_model;"> Browser Example</button>

1 个答案:

答案 0 :(得分：0)

首先，这是一个很酷的项目！

此代码的一个主要问题似乎与向HTML页面添加代码/脚本时google.load uses a document.write() call的方式有关。

但 at least one way 可以获得类似＆＃34;点击按钮以显示可视化效果＆＃34; 流程按预期工作：

第1步

尝试添加一般＆＃34;文档就绪＆＃34; JavaScript中的部分，并将google.load移入其中，如下所示：

// prepare click event for "Draw Chart" button
$(document).ready(function() {
    google.load('visualization', '1', {packages:['gauge'], callback: function () {
        $('#draw_chart').click(function () {
            chart();
        });
    }});
});

第2步

调整之前的drawChart()来电并将其置于内部$.getJSON()功能中，如下所示：

$.getJSON(url,
    function(data){
        pressure = data.value.items[0].data[1].parameters.pressure.value;
        temperature = data.value.items[0].data[1].parameters.temperature[0].value;
        humidity = data.value.items[0].data[1].parameters.humidity.value;

        // then call drawChart knowing that we have some sort of data
        drawChart();
    }
);

第3步

最后，更新HTML按钮ID，以便激活＆＃34;知道用户点击后要做什么，如下所示：

<button id="draw_chart">Draw Chart</button>

完整代码示例

<html>
  <head>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>

    var pressure;
    var temperature;
    var humidity;

    function chart() {
        var url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=97c669df9c4795db96b39188000c1998&_render=json&lat=26.6403&lon=-81.8725';
        $.getJSON(url,
            function(data){
                pressure = data.value.items[0].data[1].parameters.pressure.value;
                temperature = data.value.items[0].data[1].parameters.temperature[0].value;
                humidity = data.value.items[0].data[1].parameters.humidity.value;

                // then call drawChart knowing that we have some sort of data
                drawChart();
            }
        );
      }

    function drawChart() {

        pressure = eval(pressure);
        var barData = google.visualization.arrayToDataTable([
            ['Label', 'Value'],
            ['C/Precip', pressure]
            ]);

        var barOptions = {
            width: 200,
            height: 200,
            redFrom: 28,
            redTo: 29,
            yellowFrom: 29,
            yellowTo: 30,
            greenFrom: 30,
            greenTo: 31,
            min: 28,
            max: 31,
            majorTicks: ["28","29","30","31"],
            minorTicks: 10
        };

        var barChart = new google.visualization.Gauge(document.getElementById('barometer_div'));
        barChart.draw(barData, barOptions);

        temperature = eval(temperature);
        var thermData = google.visualization.arrayToDataTable([
            ['Label', 'Value'],
            ['Temp (F)', temperature]
            ]);

        var thermOptions = {
            width: 200,
            height: 200,
            redFrom: 80,
            redTo: 120,
            yellowFrom: 0,
            yellowTo: 40,
            yellowColor: '0099FF',
            greenFrom: 40,
            greenTo: 80,
            min: 0,
            max: 120,
            majorTicks: ["0","10","20","30","40","50","60","70","80","90","100","110","120"],
            minorTicks: 10
        };
        var thermChart = new google.visualization.Gauge(document.getElementById('thermometer_div'));
        thermChart.draw(thermData, thermOptions);

        humidity = eval(humidity);
        var humidData = google.visualization.arrayToDataTable([
            ['Label', 'Value'],
            ['Humidity', humidity]
            ]);

        var humidOptions = {
            width: 200,
            height: 200,
            yellowFrom: 10,
            yellowTo: 40,
            greenFrom: 40,
            greenTo: 70,
            redColor: '0099FF',
            redFrom: 70,
            redTo: 100,
            min: 10,
            max: 100,
            majorTicks: ["10","20","30","40","50","60","70","80","90","100"],
            minorTicks: 10
        };
        var humidChart = new google.visualization.Gauge(document.getElementById('humidostat_div'));
        humidChart.draw(humidData, humidOptions);
    }

    // prepare click event for "Draw Chart" button
    $(document).ready(function() {
        google.load('visualization', '1', {packages:['gauge'], callback: function () {
            $('#draw_chart').click(function () {
                chart();
            });
        }});
    });

    </script>
  </head>
  <body>
    <button id="draw_chart">Draw Chart</button>
    <div id='barometer_div'></div>
    <div id='thermometer_div'></div>
    <div id='humidostat_div'></div>
  </body>
</html>

代码示例演示

(as a fiddle)

备注

  • 有关此类问题及其他解决方法的更多信息，请参阅this Google Groups thread。*
  • 目前，当连续重新加载时，仪表的大小会逐渐缩小...... 通过指定 和每个可视化的高度。 有关详细信息，请参阅this thread。
相关问题
最新问题