Question

我有一段脚本是在页面加载时运行的，但是由于它在整个页面中使用的变量，我需要增加在命令上运行脚本的能力，而不是在页面加载时自动运行。我是javascript新手，所以我不确定该怎么做

我已经尝试了一些脚本选项，但是还没有使它们起作用

        $('.cf-table-block').on('blur change', '.domain2Sum select, .domain3Sum, .domain4sum, .domain1sum, .achievementSum select', calcScore);

    function calcScore() {
    var s = (parseNumber($('.professionalSubtotal input').val()) * .90) + (parseNumber($('.achievementSubtotal input').val()) * .10);
    $('.teacherScore input').val((s).toFixed(2));
  }

  function parseNumber(n) {
    var f = parseFloat(n); //Convert to float number.
    return isNaN(f) ? 0 : f; //treat invalid input as 0;
  }

计算有效，但我只需要添加一个计算按钮即可随意执行计算。

Answer 1

在页面的某处添加按钮，并在click事件上调用方法

<button type='button' id='calculate-button' onclick='calcScore()'>Calculate</button>

您也可以通过jquery将click事件添加到按钮上（看起来您正在使用jquery），但这应该使您朝着正确的方向开始。

要使用jquery做到这一点，请不要在标记中包含onclick。相反，您可以使用jquery click event

$(function() {
  $('#calculate-button').click(function() { calcScore(); });
}

您需要将其添加到文档标题中的脚本标签中。不过，这依赖于“ calcScore”方法在文档范围内，我们无法从您的代码片段中得知这一点。您还需要确保此脚本在另一个脚本之后。

Answer 2

    .dontshow {display: none;}
    .done {color: tomato !important; font-weight: bold;}
    .blink {
    animation: blinker 1.5s step-start infinite;
    }

    @keyframes blinker {
    50% {
    opacity: 0;
    }
    }
$(document).ready(function () {

    //Countdown Timer

  var startTime = 15; //set countdown in Minutes  
  var doneClass = "done";
  var blinkerClass = "blink";
  function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    var intervalLoop = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        for(var i=0;i<display.length;i++){
          display[i].textContent = minutes + ":" + seconds;
        }
        if (--timer < 0) {
          for(var i=0;i<display.length;i++){
            display[i].classList.add(doneClass);
            display[i].classList.add(blinkerClass);
            display[i].textContent = "SAVE NOW";
          }
          clearInterval(intervalLoop);
        }
        }, 1000);
    }
window.onload = function () {
    var setMinutes = 60 * startTime,
    display = $('#timer');
    startTimer(setMinutes, display);
};

  //End Countdown timer  

  //Start Add row amount fields together for domain 1
        $('.cf-table-block').on('blur change', '.domain1Sum select', domain1sumtotal);

    function domain1sumtotal() {
        var s = 0;
        $('.domain1Sum select').each(function () {
            s += parseNumber($(this).val());
        });
        s = s/6;
        $('.domain1Subtotal input').val((s).toFixed(2));
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
    //End Add row amount fields together for domain 1

    //Start Add row amount fields together for domain 2
        $('.cf-table-block').on('blur change', '.domain2Sum select', domain2sumtotal);

    function domain2sumtotal() {
        var s = 0;
        $('.domain2Sum select').each(function () {
            s += parseNumber($(this).val());
        });
        s = s/5;
        $('.domain2Subtotal input').val((s).toFixed(2));
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
    //End Add row amount fields together for domain 2

   //Start Add row amount fields together for domain 3
        $('.cf-table-block').on('blur change', '.domain3Sum select', domain3sumtotal);

    function domain3sumtotal() {
        var s = 0;
        $('.domain3Sum select').each(function () {
            s += parseNumber($(this).val());
        });
        s = s/5;
        $('.domain3Subtotal input').val((s).toFixed(2));
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
    //End Add row amount fields together for domain 3

    //Start Add row amount fields together for domain 4
        $('.cf-table-block').on('blur change', '.domain4Sum select', domain4sumtotal);

    function domain4sumtotal() {
        var s = 0;
        $('.domain4Sum select').each(function () {
            s += parseNumber($(this).val());
        });
        s = s/6;
        $('.domain4Subtotal input').val((s).toFixed(2));
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
    //End Add row amount fields together for domain 4

    //Start Add domain 1, 2, 3 and domain 4 totals
        $('.cf-table-block').on('blur change', '.domainSum select', domainsumtotal);

    function domainsumtotal() {
        var s = 0;
        $('.domainSum select').each(function () {
            s += parseNumber($(this).val());
        });
        s = s/22;
        $('.professionalSubtotal input').val((s).toFixed(2));
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
    //End Add domain 1, 2, 3 and domain 4 totals

    //Start Add row amount fields together for teacher score
        $('.cf-table-block').on('blur change', '.domain2Sum select, .domain3Sum, .domain4sum, .domain1sum, .achievementSum select', calcScore);

    function calcScore() {
        var s = (parseNumber($('.professionalSubtotal input').val()) * .90) + (parseNumber($('.achievementSubtotal input').val()) * .10);
        $('.teacherScore input').val((s).toFixed(2));
        $('#calculate-button').click(function() { calcScore(); });
   }

    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;

   } 
     //End Add row amount fields together for score    


});

添加计算按钮以执行脚本

2 个答案: