个人中心
gpt4 book ai didi

来自外部 JavaScript 文件的 JavaScript 函数未定义

转载 作者：行者123 更新时间：2023-11-30 20:20:43 26 4
gpt4 key购买 nike

我无法获得此功能displayDate在具有另一个 JavaScript 函数的特定 HTML 页面上工作 countChars在上面。我有 3 个其他 HTML 页面，只有 displayDate功能，它们都工作正常。就这两个功能的预订页面displayDate和 countChars它不起作用。我已经尝试了 <script> 的所有不同位置 header 和正文末尾的标签。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Reservations </title>
<link rel="stylesheet" href="../css/atlantic.css" type="text/css" />
<link rel="icon" href="../images/favicon.ico" type="image/x-icon" />
<script src = "../scripts/atlanticJS.js" type="text/javascript"></script>
</head>
<body>

<div id = "wrapper">
    <header>
        <h1>Atlantic Trails Resort</h1>
    </header>

    <nav>
        <ul>
            <li><a href = "index.html">Home</a></li>
            <li><a href = "accommodations.html">Accommodations</a></li>
            <li><a href = "activities.html">Activities</a></li>
            <li><a href = "reservations.html">Reservations</a></li>
        </ul>

        <div id = "contact">
            <span class = "resort">Atlantic Trails Resort<br>
            1210 Atlantic Trails Way<br>
            Cliffside, Maine 04226</span><br><br>
            <a href = "tel:888-555-5555" id="telephone">888-555-5555</a>
            <a href = "index.html">www.atlantictrails.com</a>
        </div>
    </nav>

    <div id = "main-image">
    </div>

    <main>
        <h2>Reservations for Atlantic Trails Resort</h2>

        <h3>Contact Us Today to Make Your Reservations!</h3>

        <p>Required fields are marked with an asterisk *</p>

        <form method = "post" action = "">
            <fieldset>
                <ul>
                    <li>
                        <label for = "first_name">*First Name:</label> &nbsp &nbsp;
                        <input type = "text" id = "first_name" name = "first_name" size = "20" class = "large" required = "required" autofocus />
                    </li>
                    <li>
                        <label for = "last_name">*Last Name:</label> &nbsp &nbsp;
                        <input type = "text" id = "last_name" name = "last_name" size = "20" class = "large" required = "required" />
                    </li>
                    <li>
                        <label for = "email">*E-mail:</label> &nbsp &nbsp;
                        <input type = "temail" id = "email" name = "email" size = "25" class = "large" required = "required" />
                    </li>
                    <li>
                        <label for = "phone">Phone:</label> &nbsp &nbsp;
                        <input type = "phone" id = "phone" name = "phone" size = "20" class = "large" />
                    </li>
                    <li>
                        <label for = "date">Date:</label> &nbsp &nbsp;
                        <input type = "date" id = "date" name = "date" size = "15" class = "large" />
                    </li>
                    <li>
                        <label for = "time">Time:</label> &nbsp &nbsp;
                        <input type = "time" id = "time" name = "time" size = "10" class = "large" />
                    </li>
                    <li>
                        <label for = "num_guests">Number of Guests:</label> &nbsp &nbsp;
                        <input type = "number" id = "num_guests" name = "num_guests" size = "2" class = "large" />
                    </li>
                    <li>
                        <label for = "comments">*Comments:  </label> &nbsp &nbsp;
                        <textarea id = "comments" name = "comments" rows = "2" cols = "27" maxlength = "64" class = "large" required = "required" 
                        onkeyup = "countChars('comments', 'charcount');" onkeydown = "countChars('comments', 'charcount');" onmouseout = "countChars('comments', 'charcount');"></textarea>
                        <br>
                        <span id = "charcount"> of 64 characters left</span>
                    </li>
                </ul>
            </fieldset>
            <fieldset>
                <input type = "submit" class = "submit_info" value = "Submit"  />
            </fieldset>
        </form>


    </main>

    <footer>
        Copyright &copy; 2018 Atlantic Trails Resort<br>
        <a href = "#bobert@bobert.com">bobert@bobert.com</a><br>
        Today is: <span id = "date"></span>
    </footer>
</div>

<script>displayDate();</script>
</body>
</html>

JavaScript:

//Display date function
function displayDate(){
    document.getElementById("date").innerHTML = new Date();
}

//Character counting function / countfrom = source element / displayto = destination element
function countChars(countfrom, displayto){

    //Get length of characters in source element
    var len = document.getElementById(countfrom).value.length; 
    //Set source element length to destination element
    document.getElementById(displayto).innerHTML = 64 - len + ' of 64 characters left';  
    //If charcount is 64 make text red and bold, else text is green and not bold
    if(len == 64){
        document.getElementById(displayto).style.color = "red";
        document.getElementById(displayto).style.fontWeight = "bold";
    }
    else{
        document.getElementById(displayto).style.color = "green";
        document.getElementById(displayto).style.fontWeight = "normal";
    }
}

最佳答案

你有两个具有相同属性 id id = "date" 的元素导致了你的问题

<li>
 <input type = "date" id = "date" name = "date" size = "15" class = "large" />
</li>

和

Today is: <span id = "date"></span>

删除一个或更改其中一个的 ID。这样做解决了问题

关于来自外部 JavaScript 文件的 JavaScript 函数未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51477940/

26 4 0
文章推荐： javascript - jQuery 送货倒计时——隐藏在周末的特定时间
文章推荐： c# - 使用 NEST 在 Elasticsearch 中简单地更新现有文档
文章推荐： javascript - Webpack - 记录和分析
文章推荐： javascript - 如何从字符串 Vue.js 中删除 HTML 标签
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com