Question

我是脚本等新手，所以如果你能告诉我（a）为什么我的代码不起作用以及（b）你能提供的任何其他有用的提示，我感激不尽。我确定原因很简单:)。感谢任何反馈。

我只是设计一个基本的计算器 - 用户输入动物的体重，脱水水平和另一个数字，并且javascript进行一些计算以输出流体速率（用于计算流体应该有多快）遇到生病的动物。）

代码：

＆＃13;

$(document).ready(function()	{

document.write("this script is working");

// Veterinary Calculator Code



// 	update maint, replacement, dailyRequirement and rate when bw, dh or ol changes.
function updateDetails()	{
	
	// define variables for body weight, dehydration and ongoing losses
	var $bw = $('#bodyWeight');
	var $dh = $('#dehydration');
	var $ol = $('#ongoingLosses');
	var $dr = $('#dailyRequirement');
	var $repl = $('#replacement');

	var $rt = $('#rate');

	var mt = (1.5 * (70 * (math.pow($bw.val, 0.75))));	// maintenance requirement
	$dr.text(mt + 'ml/24 hours');
	
	var rep = $bw * 0.01 * $dh;
	$repl.text(rep + 'ml');
	
	var rt = ((mt + rep + $ol.val)/24);
	$rt.text(rt + "ml/hr");
	}



// add event listeners for input elements
$bw.on('change', updateDetails());
$dh.on('change', updateDetails());
$ol.on('change', updateDetails());

}

＆＃13;

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>Veterinary Calculators</title>
		<meta name="description" content="">
		<meta name="author" content="Cameron Fay">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
	</head>

	<body>
		<div>
			<header>
				<h1>Fluid Calculator</h1>
			</header>
			

			<div>
				<fieldset id="params">
					<legend>Inputs</legend>
					<label>Body Weight (kg):</label><br />
					<input type="number" id="bodyWeight" autofocus min="0" />
					<br><br />
					<label>% Dehydration:</label><br />
					<input type="number" id="dehydration"/>
					<br /><br />
					<label> Losses (ml):</label><br />
					<input type="number" id="ongoingLosses" />
					<br /><br />		
									 
				</fieldset><br />

				<label>Daily Requirement:</label> <label class="result" id="dailyRequirement"></label>	<br />
				<label>Replacement:</label> <label class="result" id="replacement"></label>	<br />
				
				
				<br />
				<label> Rate (ml/hr):</label> <label class="result" id="rate"></label>
			</div>

			<footer>
				<p>		
					&copy; Copyright 2015 by VETsharp Pty Ltd
				</p>
			</footer>
		</div>
		<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
		<script type="text/javascript" src="vc.js"></script>
		
	</body>
</html>

＆＃13;

Answer 1

您应该为事件处理程序提供函数引用。像这样修复你的代码：

$bw.on('change', updateDetails);
$dh.on('change', updateDetails);
$ol.on('change', updateDetails);

区别在于updateDetails()立即执行函数并返回undefined作为事件处理程序，因此基本上没有注册处理程序。

另一个问题是您需要将变量定义移到updateDetails函数之外：

var $bw = $('#bodyWeight');
var $dh = $('#dehydration');
var $ol = $('#ongoingLosses');
var $dr = $('#dailyRequirement');
var $repl = $('#replacement');

function updateDetails() { ... }

Answer 2

从哪里开始...

您的文档已经丢失了)和;。
您正在尝试在函数内声明一个新函数。
您正在尝试将$.on与旧版本的jquery一起使用。

我可能一眼就看不到更多。你的空间和缩进总体上很糟糕。

Answer 3

问题：

您在函数内声明了var，但绑定了change未知的var事件（在函数之外）范围）。所以你必须在函数之外的父范围内声明那些。
它的.val()是jQuery中不是.val的方法。
在.on()方法中触发事件时，需要传递函数指针。它被称为事件处理程序。它与调用函数不同。所以它的

$bw.on('change', updateDetails);不是$bw.on('change', updateDetails());

解决方案： 这就是你的脚本应该是什么样子，

$bw = $('#bodyWeight');
$dh = $('#dehydration');
$ol = $('#ongoingLosses');

//update maint, replacement, dailyRequirement and rate when bw, dh or ol changes.
function updateDetails()    {
// define variables for body weight, dehydration and ongoing losses
   var $dr = $('#dailyRequirement');
    var $repl = $('#replacement');

    var $rt = $('#rate');

    var mt = (1.5 * (70 * (Math.pow($bw.val(), 0.75))));    // maintenance requirement
    $dr.text(mt + 'ml/24 hours');

    var rep = $bw.val() * 0.01 * $dh.val();
    $repl.text(rep + 'ml');

    var rt = ((mt + rep + $ol.val())/24);
    $rt.text(rt + "ml/hr");
}



// add event listeners for input elements
$bw.on('change', updateDetails);
$dh.on('change', updateDetails);
$ol.on('change', updateDetails);

jsFiddle

无法使javascript工作（初学者） - 请检查我的代码

3 个答案: