Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/82.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 外部JS无法使用我的HTML_Javascript_Html_External Js - Fatal编程技术网

Javascript 外部JS无法使用我的HTML

Javascript 外部JS无法使用我的HTML,javascript,html,external-js,Javascript,Html,External Js,我正在尝试将一个外部JS文件链接到我的HTML,并让提交表单在同一页面上显示信息。我将在我的HTML下面包含JS文件 <!doctype html> <html lang="en"> <head> <title>Contact Me</title> <meta charset="utf-8" /> <meta name="description" content="Rob Nelson's R

我正在尝试将一个外部JS文件链接到我的HTML,并让提交表单在同一页面上显示信息。我将在我的HTML下面包含JS文件

<!doctype html>
<html lang="en">

<head>
    <title>Contact Me</title>
    <meta charset="utf-8" />
    <meta name="description" content="Rob Nelson's Resume Website">
    <meta name="robot" content="noindex, nofollow">
    <!-- JavaScript functions will go here -->
    <script src="script.js"></script>

    <!-- noindex tells the search engine not to archive my page in the search engine
                                                             nofollow tells the robot it should not continue to crawl other pages referenced in the hypertext links on the page-->
    <!-- prgWebPage.html - My Resume Site
            Course: CSC 135
            Project Name: prjMenu
            Written by: Rob Nelson 
            Written: 4/2/17
            Revised: 4/6/17
            -->
    <link href="style.css" rel="stylesheet" type="text/css">

    <!-- CSS codes will go here -->
    <style type="text/css"></style>
</head>

<body>
    <div id="wrapper">
        <header id="top_of_the_page">
             <div id="skip"><a href="#content">Skip to main content</a></div>
            <h1>Rob Nelson</h1>

    <!-- Call the JavaScript functions here -->


            <nav class="main menu">
                <h1>
                       <a href="index.html"><span>Home</span></a>
                        <a href="clientSpec.html"><span>My Color Scheme</span></a>
                        <a href="myWork.html"><span>My Work</span></a>
                        <a href="myMusic.html"><span>My Music</span></a>
                        <a href="faveFilm.html"><span>A Few of My Favorite Films</span></a>
                        <a href="faveGroup.html"><span>Fave Artist</span></a>
                        <a href="disability.html"><span>Disabilities</span></a>
                        <a href="contact.html"><span>Contact</span></a>                                                     
                    </h1>
            </nav>
        </header>


        <br>
        <br>
        <br>
        <h1 title="This is a contact page for my resume site">Contact me Below</h1>


        <form>
            <fieldset>
                <legend>Contact Me</legend>
                <label> What is your first name:
                    <input type="text" name="txtFirstName" id="firstName" maxlength="15" value="Rob" placeholder="Type first Name here" />
                </label>
                <br>
                <label>What is your last name:
                    <input type="text" name="txtLastName" id="lastName" maxlength="15" value="Nelson" placeholder="Type last Name here" />
                </label>
                <br>
                <label>What is your email:
                    <input type="email" name="txtEmail" id="txtEmail" maxlength="50" value="youremail@gmail.com" placeholder="Type email here" required>
                </label>
                <br>
                <label>What is your phone number:
                    <input type="text" name="txtNumber" id="phoneNumber" value="651-***-****" placeholder="Type phone number here" />
                </label>
                <br>
            </fieldset>
            </form>
            <main id="content">
            <form>
            <fieldset>
                <legend>Subscirbe to the New Lens Newsletter?</legend>
                <label>Yes
                    <input type="radio" name="optYes" id="optYes" value="Yes">
                </label>
                <br>
                <label>No
                    <input type="radio" name="optNo" id="optNo" value="No">
                </label>
            </fieldset>
            </form>
            <form>
            <select id="lstMe">
                <option value="Mentoring">Learn more about Mentoring</option>
                <option value="Educational">Connect about Educational matters</option>
                <option value="Professional">Connect about Professional matters</option>
            </select>

            <button type="submit" name="btnSubmit" id="btnsubmit" value="Submit Form" onClick="displayMsg();">Submit Form</button>

            <div id="return">
            <!-- Set up a placeholder to display the results -->
            <span id="message"></span>  
            </div>

            <h3>What is the Difference between HTML,CSS, and JavaScript?</h3>
            <p>HTML is the script. It just contains the words the performing artists should state. CSS places the performing artists in their beginning positions and dresses them in different ensembles. JavaScript moves the performing artists from their unique positions to new positions, modifies the ensembles so they look not quite the same as the way they looked when the play began. It can even retroactively modify the script. Fundamentally, it can take all the "chess pieces" laid out by the HTML and CSS and play with them, rearranging them, evolving them, and so on. JavaScript can likewise speak with both the group of onlookers and the back-stage team. On the off chance that somebody in the crowd needs one of the performers to bite the dust with the goal that his understudy can have his spot, JavaScript will deal with that. On the off chance that somebody backstage needs the drapery to descend. JavaScript will deal with that, as well.</p>


        </form>



    </main>
    </div>




</body>

</html>

提前谢谢你的帮助。我之前试过发布这个问题,我已经在我的HTML中添加了div id=return,对我的JS上的占位符进行了更改,但它仍然不起作用。

那么,到底是什么不起作用呢?提交按钮当然会提交表单并重新加载页面,这就是问题所在吗?在
tagYes结尾前添加脚本标记。我需要提交表单来接收数据,并生成占位符的对话。innerHTMLI将直接放在前面,并生成与之前相同的结果。我需要sumbit按钮从占位符生成文本。InnerHTMLC将按钮类型从
submit
更改为
button
/* script.js - external JavaScript file for contact.html
   Rob Nelson 
   Written: 4-22-16
   Revisions: 

*/

/* ==============================
displayMsg( ) - Get input from the user.
                  Save it in a variable.
                  Use it to display a message on the screen.
================================= */ 
function displayMsg()
{

var txtFirstName = "";
var txtLastName = "";
var txtEmail = "";
var txtNumber = "";
var placeholder;


txtFirstName = document.getElementById("firstName").value;
txtLastName = document.getElementById("lastName").value;
txtEmail = document.getElementById("txtEmail").value;
txtNumber = document.getElementById("phoneNumber").value;

/* this wraps the message in an invisible div, and displays it when the button is clicked */

placeholder = document.getElementById("return");
response.style.display = 'block';
placeholder.innerHTML = "Hello " + txtFirstName + " " + txtLastName + ", I will email you at: " + txtEmail + " or call you at: " + txtNumber;
}

function clearMsg(){

var placeholder;
placeholder = document.getElementById("return");
response.style.display = 'none';

}
;