如何獲取span元素以顯示值？

Question

我有一個帶有 .js 文件的 HTML 文件，其中包含 javascript。

在 HTML 文件中，我有<p>Total Estimate: <span id= "estimate"></span></p>

但是在瀏覽器中打開時沒有任何顯示。 這是你應該在我的教科書中遵循的做法，據我所知，我做得對。 我在 JS 中收到一個錯誤，說
錯誤：'document' 未定義。[no-undef] 這是在 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);

下面是 HTML

        <!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&#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>

Answer 1

您可以在下面嘗試此代碼

 function calcStaff() { var num = document.getElementById("photognum"); var hrs = document.getElementById("photoghrs"); var distance = document.getElementById("distance"); totalCost -= photographerCost; //You need use Number to change all value //fix photographerCost = Number(num.value) * 100 * Number(hrs.value) + Number(distance.value) * Number(num.value); //============// //This code systax not support //photographerCost = num.value * 100 * hrs.value + distance.value * num.value; totalCost += photographerCost; document.getElementById("estimate") .innerHTML = "$" + totalCost; }

如何獲取span元素以顯示值？

問題描述

1 個解決方案

解決方案1
0 2020-09-19 01:49:34

如何獲取span元素以顯示值？

問題描述

1 個解決方案

解決方案1 0 2020-09-19 01:49:34

解決方案1
0 2020-09-19 01:49:34