托管时提交显示代码答案

【问题标题】：Submit shows code when hosted托管时提交显示代码
【发布时间】：2016-11-29 09:15:11
【问题描述】：

我有一个测验，其中的值被添加到一个总和中，该总和确定了显示的图像，但当我单击提交时只显示我的原始 .js 文件。我正在托管它，但不确定它为什么向我展示这个。文件中的前一个函数有效，因为验证有效并且可以在该文件中找到。

HTML

 <!DOCTYPE html>
<html>
<head>



    <title></title>

    <meta name="author" content="Kenneth Dunn" />
    <meta name="description" content="" />


    <link rel="stylesheet" href="css/random.css" type="text/css" />

</head>
<body>


<div id="page">
  <div id="logo">
    <h1><a href="https://playoverwatch.com">Overwatch</a></h1>
  </div>

  <div id="content">
    <h2 align="center">Overwatch Quiz</h2>
    <p>
      Hi there! This quiz is dedicated to one of my favorite games Overwatch!
    </p>
    <form action="js/random.js" method="post" name="quiz_form" onsubmit="owchar()">
      <p>
        <br>
        <input id='fName' name "first_name" type="text" placeholder="First Name"   onblur="this.placeholder='First Name'" onfocus="this.placeholder='Use only letters'"  class="validate" />
        <img width="45px" height="45px"src='img/Q.png' id="fNameImg" />
      </p>


      <p>
        <br>
        <input id="last_name" name="last_name" type="text"  placeholder="Last Name"  onblur="this.placeholder='Last Name'" onfocus="this.placeholder='Use only Letters'" class="validate"/>
        <img width="45px" height="45px" src='img/Q.png' id="last_nameImg"  />
      </p>


      <p>
        <br>
        <input id="email" name="email" type="email"  placeholder="Email"  onblur="this.placeholder='Email'" onfocus="this.placeholder='Must contain @ '" class="validate" />
        <img  width="45px" height="45px" src='img/Q.png' id="emailImg"  />
      </p>


      <p>
        <br>
        <input id='phone' name="number"  type="tel" placeholder="Phone Number" onblur="this.placeholder='Phone Number'" onfocus="this.placeholder='Must follow xxx-xxx-xxx '" class="validate" />
        <img  width="45px" height="45px" src='img/Q.png' id="phoneImg" />
      </p>


      <p>
        <br>
        <input id='sulley' name="sulley" type="sulley"  placeholder="Sulley Email" onblur="this.placeholder='Sulley Email Address'" onfocus="this.placeholder='Must contain ~ and https:// '"  class="validate"/>
        <img width="45px" height="45px" src='img/Q.png' id="sulleyImg" />
      </p>
      <br>
      <br>
      <p>

        <h2>Find out which Overwatch character you are most like!</h2>


        <p>If you could pick what form to take in a fictional universe with magic and cool science what would you want to be?</p>

        <input type="radio" name="exist" value="1">Male(Human).
        <br>
        <input type="radio" name="exist" value="2">Female(Human).
        <br>
        <input type="radio" name="exist" value="3">An Animal or something crazy.

        <p>What is your preferred weapon to take on bad guys and defend yourself?</p>

        <input type="radio" name="weapon" value="1">Twin Shotguns for close range.
        <br>
        <input type="radio" name="weapon" value="2">Twin pistols medium range.
        <br>
        <input type="radio" name="weapon" value="3">An electro gun that schocks enemies into submission.

        <p>Which motivations most align with your own?
          <p>

            <input type="radio" name="idea" value="1">To become more powerful and to defeat those who would oppose me.
            <br>
            <input type="radio" name="idea" value="2">To explore the world and discover the unknown.
            <br>
            <input type="radio" name="idea" value="3">To protect my friends and those I care about.

            <p>What do you look like?</p>

            <input type="radio" name="look" value="1">Dark and mysterious black-hooded figure ,very edgy, like people in the Matix.
            <br>
            <input type="radio" name="look" value="2">Short and spunky British airforce pilot who can travel back in time.
            <br>
            <input type="radio" name="look" value="3">I'm a large gorilla who likes to eat bananas and peanut butter and can sheild my friends from harm.


            <br>
            <br>
             <input type="submit" value="Submit">
            <input type="reset" name="reset" id="reset" value="Reset" />
          </p>
    </form>
    <br>
    <br>
    <br>
    <br>

    <h2 align="center" >Congratulations you got...</h2>
    <div id="character" align="center" height="499" width="281" >
        <img src="" id="character"/>
        <br>
        <br>
        <br>
    </div>


    <div id="footer">
      <h2 align="center">Created by Kenneth Dunn </h2>

      </p>
    </div>

  </div>

</div>

<script src="js/random.js" type="text/javascript"></script>

</body>
</html>

 function validateData() {
      console.log(this);
      var letters = /^[A-Za-z]+$/;
      var email = [@];
      var tel = /^\d{3}-\d{3}-\d{4}$/gm;
      var sulley = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/;

      var imgId = this.id + 'Img';
      var img = document.getElementById(imgId);
      console.log(img)
      var valid = false;

      if (this.type == 'text') {
        if (this.value.match(letters)) {
          valid = true;
        }
      }

      if (this.type == 'email') {
        if (this.value.match(email)) {
          valid = true;
        }
      }

      if (this.type == 'tel') {
        if (this.value.match(tel)) {
          valid = true;
        }
      }

      if (this.type == 'sulley') {
        if (this.value.match(sulley)) {
          valid = true;
        }
      }


      if (valid) {
        img.src = "img/check.png";
      } else {
        img.src = "img/redx.png";
      }


    }

    var els = document.getElementsByClassName("validate");
    for(i=0 ; i<els.length ; i++){
      els[i].addEventListener("change", validateData, false);
    }

    function owchar(){
        var sum = 0;
        var w = document.forms["quiz_form"]["exist"].value;
        sum+=w;
        var q = document.forms["quiz_form"]["weapon"].value;
        sum+=q;
        var r = document.forms["quiz_form"]["idea"].value;
        sum+=r;
        var g = document.forms["quiz_form"]["look"].value;
        sum+=g;

        if (sum>1 && sum<6){
            document.getElementById("character").src="img/reaper.png";
                return false;
        }
        else if (sum>6 && sum<9){
            document.getElementById("character").src="img/tracer.jpeg";
                return false;
        }
        else {
            document.getElementById("character").src="img/winston.png";
                return false;
        }


    }

【问题讨论】：

a quick note 我有一个叫做文件夹的文件夹，用来存放html文件，然后是3个子文件夹，分别是css、img和js，分别存放css、img和js。跨度>
为什么要发布到 JS 文件？
第一部分是表单验证，第二部分是与答案关联的值会给我我的总和，我用它来确定哪个 img 来更改 img id("character")。跨度>
是的，但是当您将表单提交给 JS 文件时，它不会运行。如果要运行 JavaScript 进行验证，则应在页面上包含脚本并绑定 onsubmit 事件。
我不知道，如果我使用一个按钮，它的操作方式是否相同？这是一个作业，必须使用外部js

标签： javascript image hosting src

【解决方案1】：

您的表单定义为：

<form action="js/random.js" method="post" name="quiz_form" onsubmit="owchar()">

action 告诉浏览器提交后去哪里，而不是查看哪个 js 文件。Javascript 使用共享的全局范围，这意味着所有 JS 文件都使用相同的全局范围，即使是直接内置在页面中的文件。由于这种 Javascript 令人敬畏——或怪异（取决于你的观点）——你不需要指定你想要运行代码的位置，你只需要加载代码（使用<script> 标签）。

TL;DR;

更改此行，使其类似于以下示例：

<form name="quiz_form" onsubmit="owchar()">

【讨论】：