添加"计算"按钮以执行脚本

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

在页面的某个位置添加一个按钮，并在点击事件上调用该方法

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

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

要使用jquery执行此操作，请不要在标记中包含onclick。相反，您可以使用jquery单击事件

$(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    

});