Cannot get javascript getelementbyid to work

Question

When I try to calculate the total for this page it will reload but not show their total. However when I take the getElementById() out of the script and make it show the total the script will work.

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

When I add the get element by id for the child, adult and senior the code stops working. I have tried adding.value to the getElementById and those have not worked.

    <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

I've updated your script with:

Use preventDefault so the form won't be sent (read more here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault )
Use .value to get the value of the <input> -field (read more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue )
Added the variable total with start value of 0 (so that you can add to that variable later in your script)

 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>

Cannot get javascript getelementbyid to work

Question

1 answers

solution1
0 2021-03-23 23:22:43

Cannot get javascript getelementbyid to work

Question

1 answers

solution1 0 2021-03-23 23:22:43

solution1
0 2021-03-23 23:22:43