現在費用を計算するページを作成しているのですがtotal estimateの金額がブラウザに表示されません。estimateにidをつけて呼び出してはいるのですが、順序が違うのでしょうか。
コンソールでのエラー表示はありません。どなたか回答よろしくお願いします。
HTML
<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>
JavaScript
var photographerCost = 0;
var totalCost = 0;
var memoryBook = false;
var reproductionRights = false;
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;
}
function toggleMembook(){
(document.getElementById("membook").checked === false)?
totalCost -= 250 : totalCost += 250;
document.getElementById("estimate").innerHTML = "$"+ totalCost;
}
function toggleRights(){
(document.getElementById("reprodrights").checked === false)?
totalCost -= 1250 : totalCost += 1250;
document.getElementById("estimate").innerHTML = "$" + totalCost;
}
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();
}
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);
}
resetForm()
関数が実行されていませんのでwindow.onload = resetForm;
を追加するとよろしいかと。