Javascript 如何让跨度元素显示值？
我有一个HTML文件和一个包含javascript的.js文件 在HTML文件中，我有Javascript 如何让跨度元素显示值？,javascript,html,Javascript,Html,我有一个HTML文件和一个包含javascript的.js文件 在HTML文件中，我有总估算： 但在浏览器中打开时，不会显示任何内容。这是一个你们应该在我的教科书中遵循的实践，就我所见，我做的是正确的。我在JS中发现一个错误，上面写着 错误：“文档”未定义。[无未定义] 这是在JS中看到文档的地方 这是我的JS代码。有什么我看不到的问题吗 // global variables var photographerCost = 0; var totalCost = 0; var memoryBook
总估算：错误：“文档”未定义。[无未定义] 这是在JS中看到文档的地方 这是我的JS代码。有什么我看不到的问题吗
// global variables
var photographerCost = 0;
var totalCost = 0;
var memoryBook = false;
var reproductionRights = false;
// calculates all costs based on staff and adds to total cost
function calcStaff() {
var num = document.getElementById("photognum");
var hrs = document.getElementById("photoghrs");
var distance = document.getElementById("distance");
totalCost -= photographerCost;
photographerCost = num.value * 100 * hrs.value + distance.value * num.value;
totalCost += photographerCost;
document.getElementById("estimate") .innerHTML = "$" + totalCost;
}
// adds/subtracts cost of memory book from total cost
function toggleMembook() {
(document.getElementById("membook") .checked === false) ?
totalCost -= 250 : totalCost + 250;
document.getElementById("estimate") .innerHTML = "$" + totalCost;
}
// ads/subtracts cost of reproduction rights from total cost
function toggleRights() {
(document.getElementById('reprodrights') .checked === false) ?
totalCost -= 1250 : totalCost += 1250;
document.getElementById("estimate") .innerHTML = "$" + totalCost;
}
// sets all form field values to defaults
function resetForm() {
document.getElementById ("photognum") .value = 1;
document.getElementById ("photoghrs") .value =2;
document.getElementById ("membook") .checked = memoryBook;
document.getElementById ("reprodrights") .checked = reproductionRights;
document.getElementById ("distance") .value = 0;
calcStaff();
createEventListeners();
}
// creates event listeners
function createEventListeners() {
document.getElementById("photognum") .addEventListener("change", calcStaff, false);
document.getElementById("photoghrs") .addEventListener("change", calcStaff, false);
document.getElementById("membook") .addEventListener("change", toggleMembook, false);
document.getElementById("reprodrights") .addEventListener("change", toggleRights, false);
document.getElementById("distance") .addEventListener("change", calcStaff, false);
}
// resets form when page is reloaded
document.addEventListener("load", resetForm, false);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Fan Trick Fine Art Photography - Estimate</title>
<link rel="stylesheet" media="screen and (max-device-width: 999px)" href="fthand.css" />
<link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="fantrick.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="ftie.css" />
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Mr+Bedfort' rel='stylesheet' type='text/css'>
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>
<img src="images/ftlogo.png" alt="Fan Trick Fine Art Photography" title="" />
</h1>
</header>
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li id="currentpage"><a href="#">estimate</a></li>
<li><a href="digital.htm">Digital 101</a></li>
</ul>
</nav>
<article>
<h2>Estimate</h2>
<p>Our experienced, professional photography team is available to capture memories of your wedding, celebration, or other special event.</p>
<p>Choose the custom options that fit your needs:</p>
<form id="estimateform">
<fieldset>
<legend><span>Photography</span></legend>
<input type="number" min="0" max="4" id="photognum" value="1" />
<label for="photognum">
<p># of photographers (1‑4)</p>
<p>$100/hr</p>
</label>
<input type="number" min="2" id="photoghrs" value="2" />
<label for="photoghrs">
<p># of hours to photograph (minimum 2)</p>
</label>
<input type="checkbox" id="membook" />
<label for="membook">
<p>Memory book</p>
<p>$250</p>
</label>
<input type="checkbox" id="reprodrights" />
<label for="reprodrights">
<p>Reproduction rights for all photos</p>
<p>$1250</p>
</label>
</fieldset>
<fieldset>
<legend><span>Travel</span></legend>
<input type="number" id="distance" value="0" />
<label for="distance">
<p>Event distance from Austin, TX</p>
<p>$1/mi per photographer</p>
</label>
</fieldset>
</form>
</article>
<aside>
<p>Total Estimate: <span id= "estimate"></span></p>
</aside>
<footer>
<p>Fan Trick Fine Art Photography • Austin, Texas</p>
</footer>
</div>
<script src="ft.js"></script>
</body>
</html>
扇子把戏美术摄影-评估
估计
我们经验丰富的专业摄影团队可为您拍摄婚礼、庆典或其他特殊事件的记忆
选择适合您需要的自定义选项：
摄影
#摄影师数量（1&8209；4）
每小时100美元
#拍摄时间（至少2小时）
记事本
250美元
所有照片的复制权
1250美元
旅行
距离德克萨斯州奥斯汀的活动距离
每位摄影师每英里1美元
总估计数：
Fan Trick美术摄影&公牛；德克萨斯州奥斯汀
函数calcStaff（）{
var num=document.getElementById（“photognum”）；
var hrs=document.getElementById（“photoghrs”）；
var distance=document.getElementById（“距离”）；
总成本-=摄影成本；
//您需要使用Number来更改所有值
//修理
摄影师成本=数字（数值）*100*数字（小时值）+数字（距离值）*数字（数值）；
//============//
//此代码不支持systax
//摄影师成本=num.value*100*hrs.value+distance.value*num.value；
总成本+=摄影成本；
document.getElementById（“估算”）.innerHTML=“$”+总成本；
}