Question

此代码适用于Sasha Vodnik和Dan Gosselin的第2章 - 第六版。

我无法找出为什么我的估计不会在旁边显示。我比较了我教授给我们的版本，我找不到导致估计不显示的错误。有谁知道我的错误是什么？

 <!DOCTYPE html>
 <html>
  <head>
   <!--
  JavaScript 6th Edition
  Chapter 2
  Chapter case

  Fan Trick Fine Art Photography
  Estimate web page
  Author: 
  Date:   September 23, 2015

  Filename: estimate.htm
   -->
   <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&#8209;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&nbsp;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 &bull; Austin, Texas</p>
  </footer>
  </div>
  <script src="ft.js"></script> 
  </body>
  </html>

/*    JavaScript 6th Edition
 *    Chapter 2
 *    Chapter case

 *    Fan Trick Fine Art Photography
 *    Variables and functions
 *    Author: 
 *    Date:   September 23, 2015

 *    Filename: ft.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;
}

// adds/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("photogum").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

 window.addEventListener("load", resetForm, false);

Answer 1

function resetForm() {
    document.getElementById("photogum").value = 1;
//                           ^^^^^^^^ doesn't exist should be
    document.getElementById("photognum").value = 1;

控制台日志会告诉你

这只是粗略的一瞥

Answer 2

所以我知道已经过了五年，您可能已经不在乎了，但是对于遇到此问题的任何人……我找到了解决方案。（关于：JavaScript，Sasha Vodnik和Don Gosselin撰写，第6版-第2章，教程问题）

本书中编写的代码 ...（如果您按照分步说明进行操作），它不调用createEventListeners（）函数。

（也许是吗？也许我错过了？也许我看不懂。我会再次查看它，但是我敢肯定，对createEventListeners函数的唯一调用是在resetForm（）函数中。）< / p>

我在页面底部添加了一个函数调用，现在估算显示效果很好。

createEventListeners()

TL; DR- 确保您调用了函数 -尤其是createEventListeners（）：D

我在代码中找不到我的错误。旁边的Total Estimae没有显示

2 个答案: