Как заменить ссылку html href на кнопку

У меня есть HTML-страница с Javascript (см. Ниже).

На странице HTML есть строка кода HTML, которая вызывает функцию Javascript. Это работает точно так, как должно, и выглядит так:

<a href="#" id="hour">hour</a>

Эта строка кода вызывает из последней части ниже Javascript.

Я хочу заменить эту строку кода кнопкой. Как я могу это сделать?

Спасибо

PS Javascript для использования с Dygraph, и я не писал его. Я мало знаю о Javascript. Я просто пытаюсь заменить вышеупомянутую единственную строку html кнопкой, которая выполняет ту же самую работу или производит кнопку с помощью других минималистических изменений.

$(document).ready(function () {
    var r = [ ];
    var base_time = Date.parse("2014/03/05");
    var num = 24 * 0.25 * 365;

    for (var i = 0; i < num; i++) {
        r.push([
            new Date(base_time + i * 3600 * 1000),
            i + 50 * (i % 60),        // line
            i * (num - i) * 4.0 / num  // parabola
        ]);
    }

    var orig_range = [
        r[0][0].valueOf(),
        r[r.length - 1][0].valueOf()
    ];

    // NEW CODE INSERTED -   STARTS
    var one_month_previous = new Date();
    one_month_previous.setMonth(one_month_previous.getMonth() - 1);

    var one_week_previous = new Date();
    one_week_previous.setDate(one_week_previous.getDate()-7);

    var three_days_previous = new Date();
    three_days_previous.setDate(three_days_previous.getDate()-3);

    var one_days_previous = new Date();
    one_days_previous.setDate(one_days_previous.getDate()-1);

    var twelve_hours_previous = new Date();
    twelve_hours_previous.setHours(twelve_hours_previous.getHours() - 12);


    // NEW CODE INSERTED -   ENDS

    g = new Dygraph(
        document.getElementById("graphdiv3"),
        "show_csv.php",
        {

            // NEW CODE INSERTED -   STARTS
            //  dateWindow: [ Date.parse(one_month_previous) ,
            //            Date.parse(new Date()) ],

            dateWindow: [
                    Date.parse(one_week_previous),
                    Date.parse(new Date())
            ],

            //  dateWindow: [ Date.parse(three_days_previous) ,
            //            Date.parse(new Date()) ],

            //  dateWindow: [ Date.parse(one_days_previous) ,
            //            Date.parse(new Date()) ],

            //  dateWindow: [ Date.parse(twelve_hours_previous) ,
            //            Date.parse(new Date()) ],

            //  dateWindow: [ Date.parse("2014/03/01 12:00:00"),    
            //            Date.parse("2014/03/31 12:00:00") ],   

            // NEW CODE INSERTED -   ENDS

            title: 'Temperature(&deg;C) vs Time',
            rollPeriod: 1,
            showRoller: true,
            xlabel: 'Time',
            ylabel: 'Temperature (&deg;C)',
            legend: 'always',
            labelsKMB: 'true',
            labelsSeparateLines: 'true',
            colors: [
                "rgb(51,204,204)",
                "#00DD55",
                "rgb(255,100,100)",
                "rgba(50,50,200,0.4)"
            ]
        }
    );


    var desired_range = null;

    function approach_range() {
        if (!desired_range) return;
        // go halfway there
        var range = g.xAxisRange();

        if (Math.abs(desired_range[0] - range[0]) < 60 &&
            Math.abs(desired_range[1] - range[1]) < 60) {
                g.updateOptions({dateWindow: desired_range});
                // (do not set another timeout.)
        } else {
            var new_range;
            new_range = [
                0.5 * (desired_range[0] + range[0]),
                0.5 * (desired_range[1] + range[1])
            ];
            g.updateOptions({dateWindow: new_range});
            animate();
        }
    }

    function animate() {
        setTimeout(approach_range, 50);
    }

    var zoom = function(res) {
        var w = g.xAxisRange();
        desired_range = [ w[0], w[0] + res * 1000 ];
        animate();
    }

    var reset = function() {
        desired_range = orig_range;
        animate();
    }

    var pan = function(dir) {
        var w = g.xAxisRange();
        var scale = w[1] - w[0];
        var amount = scale * 0.25 * dir;
        desired_range = [
            w[0] + amount,
            w[1] + amount
        ];
        animate();
    }

    document.getElementById('hour').onclick = function() { zoom(3600); };
    document.getElementById('day').onclick = function() { zoom(86400); };
    document.getElementById('week').onclick = function() { zoom(604800); };
    document.getElementById('month').onclick = function() { zoom(30 * 86400); };
    document.getElementById('full').onclick = function() { reset(); };
    document.getElementById('left').onclick = function() { pan(-1); };
    document.getElementById('right').onclick = function() { pan(+1); };
});
Источник

3 ответа

Решение

Просто сделайте это по-своему! =)

(IE оптимизирован:) не уверен, если это правильно, хотя.

<a href="#">
    <button id="hour">Hour</button>
</a>

Обычная кнопка

<button id="hour">Hour</button>

метод формы:

<form action="#">
    <input type="submit" value="submit">
</form>
Источник

Если вы хотите, чтобы ссылка выглядела как кнопка, то вы можете присвоить стилю ссылку css, чтобы он выглядел как кнопка.

http://www.usabilitypost.com/2012/01/10/pressed-button-state-with-css3/

Источник

Чувак сначала инкапсулирует JavaScript внутри функции //

 function foo()
 {
 $(document).ready(function () {
      var r = [ ];

    var base_time = Date.parse("2014/03/05");

      var num = 24 * 0.25 * 365;
      for (var i = 0; i < num; i++) {
        r.push([ new Date(base_time + i * 3600 * 1000),
                 i + 50 * (i % 60),        // line
                 i * (num - i) * 4.0 / num  // parabola
               ]);
      }
      var orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ];

// NEW CODE INSERTED -   STARTS
    var one_month_previous = new Date();
    one_month_previous.setMonth(one_month_previous.getMonth() - 1);

    var one_week_previous = new Date();
    one_week_previous.setDate(one_week_previous.getDate()-7);

    var three_days_previous = new Date();
    three_days_previous.setDate(three_days_previous.getDate()-3);

    var one_days_previous = new Date();
    one_days_previous.setDate(one_days_previous.getDate()-1);

    var twelve_hours_previous = new Date();
    twelve_hours_previous.setHours(twelve_hours_previous.getHours() - 12);
// NEW CODE INSERTED -   ENDS

g = new Dygraph(
    document.getElementById("graphdiv3"),
    "show_csv.php",
    {

// NEW CODE INSERTED -   STARTS

//  dateWindow: [ Date.parse(one_month_previous) ,
//            Date.parse(new Date()) ],

    dateWindow: [ Date.parse(one_week_previous) ,
              Date.parse(new Date()) ],

//  dateWindow: [ Date.parse(three_days_previous) ,
//            Date.parse(new Date()) ],

//  dateWindow: [ Date.parse(one_days_previous) ,
//            Date.parse(new Date()) ],

//  dateWindow: [ Date.parse(twelve_hours_previous) ,
//            Date.parse(new Date()) ],

//  dateWindow: [ Date.parse("2014/03/01 12:00:00"),    
//            Date.parse("2014/03/31 12:00:00") ],   

// NEW CODE INSERTED -   ENDS

      title: 'Temperature(&deg;C) vs Time',
      rollPeriod: 1,
      showRoller: true,
      xlabel: 'Time',
      ylabel: 'Temperature (&deg;C)',
      legend: 'always',
      labelsKMB: 'true',
      labelsSeparateLines: 'true',
      colors: [
        "rgb(51,204,204)",
        "#00DD55",
        "rgb(255,100,100)",
        "rgba(50,50,200,0.4)"]
    }
  );


      var desired_range = null;
      function approach_range() {
        if (!desired_range) return;
        // go halfway there
        var range = g.xAxisRange();
        if (Math.abs(desired_range[0] - range[0]) < 60 &&
            Math.abs(desired_range[1] - range[1]) < 60) {
          g.updateOptions({dateWindow: desired_range});
          // (do not set another timeout.)
        } else {
          var new_range;
          new_range = [0.5 * (desired_range[0] + range[0]),
                       0.5 * (desired_range[1] + range[1])];
          g.updateOptions({dateWindow: new_range});
          animate();
        }
      }
      function animate() {
        setTimeout(approach_range, 50);
      }

      var zoom = function(res) {
        var w = g.xAxisRange();
        desired_range = [ w[0], w[0] + res * 1000 ];
        animate();
      }

      var reset = function() {
        desired_range = orig_range;
        animate();
      }

      var pan = function(dir) {
        var w = g.xAxisRange();
        var scale = w[1] - w[0];
        var amount = scale * 0.25 * dir;
        desired_range = [ w[0] + amount, w[1] + amount ];
        animate();
      }

      document.getElementById('hour').onclick = function() { zoom(3600); };
      document.getElementById('day').onclick = function() { zoom(86400); };
      document.getElementById('week').onclick = function() { zoom(604800); };
      document.getElementById('month').onclick = function() { zoom(30 * 86400); };
      document.getElementById('full').onclick = function() { reset(); };
      document.getElementById('left').onclick = function() { pan(-1); };
      document.getElementById('right').onclick = function() { pan(+1); };
    }
);
}

//]]>  
</script>

Теперь вызовите функцию с кнопки

<button id="hour" onClick="foo()">Hour</button>

Редактировать: А для document.ready() небезопасно: безопасно ли вызывать $(document).ready() изнутри функции?

Редактировать: Ребята, вы правы, и мне очень жаль, я не видел весь вопрос, прежде чем ответить.

user1062153 Нет необходимости выполнять дополнительную работу в javascript, вам просто нужно присвоить идентификатор элементу, который вы используете. Просто добавьте

<button id="hour">Hour</button>

как сказал Xatenev. Это должно работать нормально..

Источник
Другие вопросы по тегам