无法使javascript getelementbyid正常工作_Javascript

无法使javascript getelementbyid正常工作

javascript

无法使javascript getelementbyid正常工作,javascript,Javascript,当我试图计算这个页面的总数时，它会重新加载，但不会显示它们的总数。但是，当我从脚本中取出getElementById（）并使其显示脚本将工作的总数时 <!DOCTYPE html> <html lang="en"> <head>  <meta charset=&

当我试图计算这个页面的总数时，它会重新加载，但不会显示它们的总数。但是，当我从脚本中取出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>


造梦者
img{
文本对齐：居中；
}
.非常{
字体：斜体；
字号：14pt；
颜色：红色；
}
.labelfloatleft标签{
宽度：150px；
右边距：10px；
颜色：白色；
浮动：左；
文本对齐：右对齐；
}
.labelfloatleft输入{
显示：块；
}

造梦者






你的想法
名字
姓
电子邮件地址
最佳影片
恐怖
八达炳八达邦
滚或死
评论
你的意见
欢迎来到我们的世界
我们是一家小型电影院，希望能帮助激发灵感
来我们剧院的人。我们的剧院都有
新鲜食物、冷热饮料、纪念品和舒适的
座椅有助于让您的体验更有价值。

最受欢迎

恐怖
八达炳八达邦
滚或死

价格
票
价格
周四交易
成人
$10.00
半价
小孩
$6.00
级别高的
$8.00
票数
成人15-60岁
1-14岁儿童
50岁及以上
位置
10921北美流行街87921
美国加利福尼亚州科罗金

当我为儿童、成人和老年人添加get元素by id时，代码停止工作。我已尝试向getElementById添加.value，但这些都没有起作用

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


函数计算器总计（）{
var child=document.getElementById（“childinput”）；
var成人=document.getElementById（“成人输入”）；
var senior=document.getElementById（“seniorinput”）；
var d=新日期（）；
var n=d.getDay（）；
如果（n==4）{
总计+=（儿童*6+成人*10+高级*8）/2；}
否则{
总数+=儿童*6+成人*10+高级*8；}
警报（“您的总数为$”+总数）；
}
document.getElementById（“计算”）.addEventListener（“单击”），calculateTotal，
假）；

我已用以下内容更新了您的脚本：

使用

preventDefault

，这样表单就不会被发送（请在此处阅读更多信息：）

使用

.value

获取

-字段的值（此处阅读更多信息：）

添加了起始值为

的变量

total

（以便以后在脚本中添加该变量）

函数计算总计（e）{
//单击#计算时，请勿发送表单
e、 预防默认值（）；
//通过“.value”获取-元素中的值
var child=document.getElementById（“childinput”）.value；
var成人=document.getElementById（“成人输入”）.value；
var senior=document.getElementById（“seniorinput”）.value；
var d=新日期（）；
var n=d.getDay（）；
//以total=0开始
var合计=0；
如果（n==4）{
合计+=（儿童*6+成人*10+高级*8）/2；
}
否则{
总数+=儿童*6+成人*10+高级*8；
}
警报（“您的总数为$”+总数）；
}
document.getElementById（“calculate”）.addEventListener（“单击”，calculateTotal）

票数
成人15-60岁
1-14岁儿童
50岁及以上
您正在将实际文档元素分配给子变量、成人变量和高级变量。我假设您真正想做的是获取已输入的值，以便在后续计算中使用。您应该为每个文档添加.value。getElementById（）调用-例如var child=document.getElementById（“childinput”）。value还可以查看upppreventDefault
，您的按钮是一个“提交”按钮，它将发布表单，页面将被重新加载（preventDefault
将阻止此事件）。正确缩进代码。您将看到这样的语法错误。获得像eslint这样的工具