Question

我无法使用此功能displayDate来处理具有另一个JavaScript函数countChars的特定HTML页面。我还有其他3个HTML页面，它们仅带有displayDate函数，它们都可以正常工作。只是同时具有功能displayDate和countChars的预订页面不起作用。我已经尝试了标题和正文结尾处<script>标签的所有不同位置。

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";
    }
}

Answer 1

您有两个具有相同属性ID id = "date"的元素，从而导致了问题

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

和

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

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

Answer 2

也许可以将displayDate包装在onload函数中，以确保在尝试执行之前已加载所有内容。

window.onload = function () { displayDate(); }

未定义外部JavaScript文件中的JavaScript函数

2 个答案: