無法讓 javascript getelementbyid 工作

Question

當我嘗試計算此頁面的總數時，它將重新加載但不顯示其總數。 但是，當我從腳本中取出 getElementById() 並使其顯示腳本將起作用的總數時。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Final Project
         Author: Kaleb Moore
         Date: 3/14/21
    -->
<meta charset="utf-8" />
<link href = "style_sheet.css" rel = "stylesheet" type = "text/css" />
  <title>Dream Giver</title>

  <style>
    img {
        text-align: center;
    }
    
    .very {
        font-style: italic;
        font-size: 14pt;
        color: red;
    }
    .labelfloatleft label {
        width: 150px;
        margin-right: 10px;
        color: white;
        float: left;
        text-align: right;
    }
    .labelfloatleft input {
        display: block;
    }
  </style>
  <script src="modernizr.custom.05819.js"></script>
</head>
<body>

 <header>
 <p><img src="Images/Cinema.jpg" alt="Dreams Logo" /></p>
 </header>

 <h1>Dream Giver</h1>
 <!-- Links for other pages go under h1 -->
  <nav> 
    <ul>
        <li><a href="About.html#top">About Us</a></li>
        <li><a href="Movies.html#top">Movies</a></li>
        <li><a href="Menu.html#top">Menu</a></li>
        <li><a href="Deals.html#top">Deals</a></li>
    </ul>
 </nav>
<form id="survey" name="survey" method="post">
<fieldset class="labelfloatleft"><legend>Your Thoughts</legend>
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" />
    
    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" />
    
    <label for="emailaddress">Email Address</label>
    <input type="email" name="emailaddress" id="emailaddress" 
    size="30" placeholder="foryou@yahoo.com" />
</fieldset>
<fieldset><legend>Best Movie</legend>
    
    <input type="radio" name="movie" id="horror" value="horror" checked="checked"/>
    <label for="horror">The Horror</label>

    <input type="radio" name="movie" id="badabing" value="badabing" />
    <label for="badabing">Bada-Bing Bada-Boom</label>

    <input type="radio" name="movie" id="roll" value="roll" />
    <label for="roll">Roll or Die</label>
</fieldset>
<fieldset><legend>Comments</legend>
    <label for="message">Your Opinion</label>
    <textarea name="message" id="message" rows="7" cols="30"></textarea>
</fieldset>
    <input type="submit" value="Send" class="button" />
    <input type="reset" value="Cancel" class="button" />
</form>


 <h2>Welcome To Our World</h2>

 <p class="very">We are a small time movie theater looking to help inspire
    people who come to our theater. Our theaters come with
    fresh food, cold and hot drinks, souvenirs and comfortable
    seats to help make your experience worth while.
 </p>

 <h2>Most Popular</h2>

 <ul>
    <li>The Horror</li> 
    <li>Bada-Bing Bada-Boom</li> 
    <li>Roll or Die</li>
 </ul>


 <h2>Prices</h2>
 <table title="prices">
    <tr>
        <th>Ticket</th>
        <th>Price</th>
        <th>Thursday Deal</th>
    </tr>
    <tr>
        <td>Adult</td>
        <td>$10.00</td>
        <td rowspan="3">Half-Off</td>
        
    </tr>
    <tr>
        <td>Child</td>
        <td>$6.00</td>
    </tr>
    <tr>
        <td>Senior</td>
        <td>$8.00</td>
</table>

<form id="price" name="price" method="post">

<fieldset><legend>Ticket Quantity</legend>
    <label for="adultinput">Adult 15-60
    <input type="text" id="adultinput" value="1" size="2"/>
    </label>
    <label for="childinput">Child 1-14
    <input type="text" id="childinput" value="0" size="2"/>
    </label>
    <label for="seniorinput">Senior 50 and up
    <input type="text" id="seniorinput" value="0" size="2"/>
    </label>
</fieldset>

    <input type="submit" value="Calculate" id="calculate" class="button" />
    <input type="reset" value="Cancel" class="button" />
</form>
<footer class="grey">
<h3>Location</h3>

 <p>10921 North Popular St. 87921<br> Corogin, CA. USA.</p> 
</footer>
    <p><a href="Index.html">Back to Top</a></p>

當我為孩子、成人和老年人添加按 id 獲取元素時，代碼停止工作。 我已經嘗試將 .value 添加到 getElementById 並且那些沒有奏效。

    <script>
    function calculateTotal() {
            var child = document.getElementById("childinput");
            var adult = document.getElementById("adultinput");
            var senior = document.getElementById("seniorinput");
            var d = new Date();
            var n = d.getDay();
            if (n === 4) {              
                total += (child * 6 + adult * 10 + senior * 8) / 2;}
             else {         
                total += child * 6 + adult * 10 + senior * 8;}
                
                alert("Your total is $" + total);
                
                
                }
                
                document.getElementById("calculate").addEventListener("click", calculateTotal, 
 false);
                </script>
    
</body>
</html>

Answer 1

我已將您的腳本更新為：

使用preventDefault這樣表單就不會被發送（在這里閱讀更多： https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault ）
使用.value獲取<input> -field 的值（在此處閱讀更多信息： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue ）
添加了起始值為0的變量total （以便您稍后可以在腳本中添加到該變量）

 function calculateTotal(e) { // Do not send the form, when #calculate is clicked e.preventDefault(); // Get the value in the <input>-element by ".value" var child = document.getElementById("childinput").value; var adult = document.getElementById("adultinput").value; var senior = document.getElementById("seniorinput").value; var d = new Date(); var n = d.getDay(); // Start with total = 0 var total = 0; if (n === 4) { total += (child * 6 + adult * 10 + senior * 8) / 2; } else { total += child * 6 + adult * 10 + senior * 8; } alert("Your total is $" + total); } document.getElementById("calculate").addEventListener("click", calculateTotal);

 <form id="price" name="price" method="post"> <fieldset><legend>Ticket Quantity</legend> <label for="adultinput">Adult 15-60 <input type="text" id="adultinput" value="1" size="2"/> </label> <label for="childinput">Child 1-14 <input type="text" id="childinput" value="0" size="2"/> </label> <label for="seniorinput">Senior 50 and up <input type="text" id="seniorinput" value="0" size="2"/> </label> </fieldset> <input type="submit" value="Calculate" id="calculate" class="button" /> <input type="reset" value="Cancel" class="button" /> </form>

無法讓 javascript getelementbyid 工作

問題描述

1 個解決方案

解決方案1
0 2021-03-23 23:22:43

無法讓 javascript getelementbyid 工作

問題描述

1 個解決方案

解決方案1 0 2021-03-23 23:22:43

解決方案1
0 2021-03-23 23:22:43