javascript - 非常奇怪的 JS/HTML 错误

Question

首先，我对 javascript 的了解真的很有限，所以我可能使用的一些术语可能完全不适用，但我已尽力描述它。

我遇到了一个非常奇怪的问题...我一直在尝试编辑其他人的 JS 脚本，因为如果他们已经拥有我想要的大部分功能，我就没有必要自己制作了。问题出在直接插入 html 的 JS 脚本底部附近，特别是那些实际将脚本连接到 HTML 代码中的 ID 的脚本，例如“document.getElementById("playerAdmin").innerHTML = playerAdmin;”。正如您所看到的，与其他地方相比，它相当困惑，因为由于它们似乎只是随机工作的原因，我不得不一直弄乱它，所以我不得不继续弄乱这些顺序东西进去。例如，而不是:

        document.getElementById("playerID").innerHTML = playerID;
    document.getElementById("playerWanted").innerHTML = wanted;
    document.getElementById("playerBankMoney").innerHTML = bank;

我可能不得不将它的顺序交换为:

document.getElementById("playerWanted").innerHTML = wanted;
    document.getElementById("playerBankMoney").innerHTML = bank;
document.getElementById("playerID").innerHTML = playerID;

因为其中一个 ID 似乎不起作用 - 代码中没有任何内容向我暗示为什么会发生这种情况，而且它对我来说确实很随机 - 一般来说，似乎无论代码是什么在“碎 block ”(同样是随机选择的)下停止运行。

function parseURLParams(url) {
  var queryStart = url.indexOf("?") + 1,
    queryEnd = url.indexOf("#") + 1 || url.length + 1,
    query = url.slice(queryStart, queryEnd - 1),
    pairs = query.replace(/\+/g, " ").split("&"),
    parms = {},
    i, n, v, nv;

  if (query === url || query === "") return;

  for (i = 0; i < pairs.length; i++) {
    nv = pairs[i].split("=", 2);
    n = decodeURIComponent(nv[0]);
    v = decodeURIComponent(nv[1]);

    if (!parms.hasOwnProperty(n)) parms[n] = [];
    parms[n].push(nv.length === 2 ? v : null);
  }
  return parms;
}

var urlParams = parseURLParams(document.location.href);
console.log(urlParams);

* {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

a {
  text-decoration: none;
}

div.header {
  width: 100%;
  background-color: rgb(35, 56, 89);
  height: 59px
}

div.header a {
  text-decoration: none;
  text-transform: capitalize;
  color: white;
  padding: 20px;
  float: right;
  transition: 0.2s;
}

div.header a:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: deepskyblue;
}

div.header a.active {
  color: deepskyblue;
}

body {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGklEQVQYV2NkwAIYCQkaMzAwnAUpIqgSbhIAMXABBoGmkP0AAAAASUVORK5CYII=);
  background-color: rgba(44, 105, 140, 0.1);
  background-position: center center;
}

h1.title {
  color: rgb(35, 56, 89);
  text-transform: lowercase;
  font-size: 5em;
  text-align: center;
  padding: 140px;
  text-shadow: 0px 0px 21px rgba(0, 0, 0, 0.3);
}

h1.title span {
  color: deepskyblue;
  text-transform: uppercase;
}

div.search {
  width: 80%;
  height: 70px;
  padding: 20px;
  margin: 30px auto;
  background-color: rgb(35, 56, 89);
  box-shadow: 0px 0px 28px -4px rgba(0, 0, 0, 0.75);
}

div.search a {
  color: deepskyblue;
  text-decoration: none;
  font-size: 2em;
  line-height: 70px;
  transition: 0.2s;
}

div.search a:hover {
  color: white;
}

i {
  border: solid deepskyblue;
  border-width: 0 10px 10px 0;
  display: inline-block;
  padding: 15px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  float: right;
  position: relative;
  top: 12px;
  right: 15px;
}

div.result {
  width: 80%;
  padding: 20px;
  height: 80px;
  margin: 10px auto;
  background-color: rgba(35, 56, 89, 0.9);
  transition: 0.2s;
}

div.result:hover {
  background-color: rgba(35, 56, 89, 1);
  box-shadow: 0px 0px 28px -4px rgba(0, 0, 0, 0.75);
}

div.result h2 {
  color: white;
  margin-left: 10px;
  line-height: 26px;
  text-shadow: 0px 0px 21px rgba(0, 0, 0, 0.2);
}

div.result h3 {
  color: lightgray;
  font-weight: 100;
  margin-left: 10px;
  line-height: 26px;
  text-decoration: none;
}

div.playerdata {
  width: 80%;
  margin: 20px auto;
  background-color: rgb(35, 56, 89);
  padding: 20px;
}

div.playerdata img {
  width: 100%;
  height: 100%;
  background-color: rgba(256, 256, 256, 0.1);
}

div.playerdata h1 {
  color: white;
  text-shadow: 0px 0px 21px rgba(0, 0, 0, 0.2);
}

div.playerdata div.head {
  padding-bottom: 10px;
  border-bottom: 5px solid deepskyblue;
  margin-bottom: 10px;
  text-align: center;
  font-size: 3em
}

div.playerdata div.head button {
  border-radius: 0px;
  border: solid deepskyblue 2px;
  padding: 10px;
  margin-top: 10px;
}

div.playerdata div.head h2 {
  color: deepskyblue;
  font-size: 1em;
  font-weight: 100;
  text-shadow: 0px 0px 21px rgba(0, 0, 0, 0.2);
}

div.playerdata div.head button:hover {
  background-color: deepskyblue;
  border-color: white;
  color: white;
  text-shadow: 0px 0px 21px rgba(0, 0, 0, 0.2);
}

div.playerdata div.info {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  color: white;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  border-bottom: 5px solid deepskyblue;
  padding-bottom: 10px;
}

span.result {
  color: lightgray !important;
}

div.playerdata div.info div.right {
  border-left: 5px solid deepskyblue;
  padding-left: 10px;
  min-height: 350px;
}

div.playerdata div.info p {
  background-color: deepskyblue;
  padding: 10px;
  width: 200px;
  margin-top: 10px;
}

div.net .hidden {
  display: none;
}

div.net:hover .hidden {
  display: block;
  background-color: rgb(35, 56, 89);
  color: lightgray;
  width: 300px;
  margin-top: 0px;
  border: 2px solid deepskyblue;
  -webkit-animation: fadeEffect 0.5s;
  animation: fadeEffect 0.5s;
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

div.vehicle .hidden {
  display: none;
}

div.vehicle:hover .hidden {
  display: block;
  background-color: rgb(35, 56, 89);
  color: lightgray;
  width: 400px;
  margin-top: 0px;
  border: 2px solid deepskyblue;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

.hidden span {
  color: white;
}

div.license div.hidden {
  display: none;
  padding-left: 3px;
}

div.license:hover div.hidden {
  display: block;
  background-color: rgb(35, 56, 89);
  color: lightgray;
  width: 400px;
  margin-top: 0px;
  border: 2px solid deepskyblue;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

span.true {
  background-color: lawngreen;
  margin-top: 3px;
  margin-right: 3px;
  display: inline-block;
  padding: 5px;
}

span.false {
  background-color: orangered;
  margin-top: 3px;
  margin-right: 3px;
  display: inline-block;
  padding: 5px;
}

div.playerdata div.info p:hover {
  background-color: rgba(0, 191, 255, 0.8);
  cursor: default;
}

div.playerdata div.info div.police p {
  background-color: rgb(70, 133, 201);
}

div.playerdata div.info div.police:hover p {
  background-color: rgba(70, 133, 201, 0.9);
}

div.playerdata div.info div.police p.hidden {
  display: none;
}

div.playerdata div.info div.police:hover p.hidden {
  display: block;
  background-color: rgb(35, 56, 89);
  color: lightgray;
  width: 300px;
  margin-top: 0px;
  border: 2px solid deepskyblue;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

div.playerdata div.info div.nhs p {
  background-color: rgb(94, 206, 74);
}

div.playerdata div.info div.nhs:hover p {
  background-color: rgba(94, 206, 74, 0.9);
}

div.playerdata div.info div.nhs p.hidden {
  display: none;
}

div.playerdata div.info div.nhs:hover p.hidden {
  display: block;
  background-color: rgb(35, 56, 89);
  color: lightgray;
  width: 300px;
  margin-top: 0px;
  border: 2px solid deepskyblue;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

div.playerdata div.info div.unmc p {
  background-color: rgb(201, 70, 70);
}

div.playerdata div.info div.unmc:hover p {
  background-color: rgba(201, 70, 70, 0.9);
}

div.playerdata div.info div.unmc p.hidden {
  display: none;
}

div.playerdata div.info div.unmc:hover p.hidden {
  display: block;
  background-color: rgb(35, 56, 89);
  color: lightgray;
  width: 300px;
  margin-top: 0px;
  border: 2px solid deepskyblue;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

div.playerdata div.info div.gang p {
  background-color: rgb(133, 70, 201);
}

div.playerdata div.info div.gang:hover p {
  background-color: rgba(133, 70, 201, 0.9);
}

div.playerdata div.info div.gang p.hidden {
  display: none;
}

div.playerdata div.info div.gang:hover p.hidden {
  display: block;
  background-color: rgb(35, 56, 89);
  color: lightgray;
  width: 300px;
  margin-top: 0px;
  border: 2px solid deepskyblue;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

<!DOCTYPE html>
<html>

<head>
  <title>Stats page</title>
  <link href="css/style.css" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="assets/js/urlParse.js"></script>

  <script type="text/javascript">
    var request = "https://api.roleplay.co.uk/v1/player/" + "76561198062083666";

    var leaderBoardsRequest = "https://api.roleplay.co.uk/v1/statistics/leaderboards";
    var leaderboardsData = "";

    var data = "";

    function numberWithCommas(x) {
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    function error(data) {
      console.log(url);
      var playerIdExpression = new RegExp("765611[0-9]{11}$");
      var guidExpression = new RegExp("[a-f0-9]{32}$");
      var request = "https://api.roleplay.co.uk/v1/player/" + "76561198062083666";
      try {
        if (typeof urlParams['q'][0] !== 'undefined') {
          if (playerIdExpression.test(urlParams['q'][0]) == false && guidExpression.test(urlParams['q'][0]) == false) {
            window.location.replace("https://stats.roleplay.co.uk/400.html");
          } else {
            window.location.replace("https://stats.roleplay.co.uk/error.html?errorCode=500&errorQ=" + window.location.href.substring(0, window.location.href.indexOf("?q=")) + "&q=" + urlParams['q'][0] + "?apiQ=" + request);
          }
        } else {
          window.location.replace("https://stats.roleplay.co.uk/400.html");
        }
      } catch (err) {
        window.location.replace("https://stats.roleplay.co.uk/404.html");
      }
    }

    function success(data) {
      console.log(data);
      var isPolice = false;
      var isUNMC = false;
      var isNHS = false;
      var isGroup = false;

      var playerName = data['name'];
      var playerID = data['steamid'];
      var steamName = data.steam['name'];
      var playerWorth = "£" + numberWithCommas(data['bank'] + data['cash']);
      var bank = "£" + numberWithCommas(data['bank']);
      var cash = "£" + numberWithCommas(data['cash']);
      var playerGroups = [];
      var wanted = data['wanted'];
      var vehicleCount = data['vehicles']['length'];
      var playerAdmin = "Not Staff";
      var prank = "Not Police";
      var nhsrank = "Not NHS";
      var urank = "Not UNMC";
      var undercover = data['undercoverrank'];
      var licencesall = data.civ_licenses;
      var licencesfinal = [];

      document.title = playerName + " - Roleplay UK - Stats";

      for (l = 0; l < data.civ_licenses['length']; l++) {
        if (data.civ_licenses[l].owned == true) {
          licencesfinal.push(data.civ_licenses[l]);
        }
      }

      switch (wanted) {
        case true:
          wanted = "Player Wanted!";
          break;
        case false:
          wanted = "Player Not Wanted!";
          break;
      }

      var guid = data['guid'];

      if (data['policerank'] > 0) {
        playerGroups.push("Altis Police");

        var units = [];

        switch (data['arrank']) {
          case 0:
            break;
          case 1:
            units.push("Armed Response");
            break;
        }
        switch (data['ncarank']) {
          case 0:
            break;
          case 1:
            units.push("National Crime Agency");
            break;
        }
        switch (data['npasrank']) {
          case 0:
            break;
          case 1:
            units.push("NPAS Tier 1");
            break;
          case 2:
            units.push("NPAS Tier 2");
            break;
          case 3:
            units.push("NPAS Tier 3");
            break;
        }

        switch (data['mporank']) {
          case 0:
            break;
          case 1:
            units.push("MPO Tier 1");
            break;
          case 2:
            units.push("MPO Tier 2");
            break;
        }

        switch (undercover) {
          case "1":
            units.push("Undercover Permit");
            break;
        }

        if (units.length == 0) {
          units = "None";
        }

        for (f = 0; f < units.length; f++) {
          if (units.length == 5) {
            units = "All";
          } else if (f != units.length && f != 0) {
            units[f] = " " + units[f];
          }
          console.log(units);
        }

        switch (data['policerank']) {
          case 1:
            var prank = "Police Community Support Officer";
            break;
          case 2:
            var prank = "Probationary Police Constable";
            break;
          case 3:
            var prank = "Police Constable";
            break;
          case 4:
            var prank = "Sergeant";
            break;
          case 5:
            var prank = "Inspector";
            break;
          case 6:
            var prank = "Chief Inspector";
            break;
          case 7:
            var prank = "Superintendent";
            break;
          case 8:
            var prank = "Chief Superintendent";
            break;
          case 9:
            var prank = "Assistant Chief Constable";
            break;
          case 10:
            var prank = "Deputy Chief Constable";
            break;
          case 11:
            var prank = "Chief Constable";
            break;
        }
        isPolice = true;
      }

      if (data['unmcrank'] > 0) {
        playerGroups.push("UNMC");
        switch (data['unmcrank']) {
          case 1:
            var urank = "Recruit";
            break;
          case 2:
            var urank = "Private";
            break;
          case 3:
            var urank = "Private First Class";
            break;
          case 4:
            var urank = "Lance Corporal";
            break;
          case 5:
            var urank = "Corporal";
            break;
          case 6:
            var urank = "Sergeant";
            break;
          case 7:
            var urank = "Staff Sergeant";
            break;
          case 8:
            var urank = "Sergeant Major";
            break;
          case 9:
            var urank = "Lieutenant";
            break;
          case 10:
            var urank = "Captain";
            break;
          case 11:
            var urank = "Major";
            break;
          case 12:
            var urank = "Colonel";
            break;
          case 13:
            var urank = "General";
            break;
        }
        isUNMC = true;
      }

      if (data['nhsrank'] > 0) {
        playerGroups.push("NHS");

        var nhsunits = [];

        switch (data['nhsarrank']) {
          case 0:
            break;
          case 1:
            nhsunits.push("Air Rescue Tier 1");
            break;
          case 2:
            nhsunits.push("Air Rescue Tier 2");
            break;
          case 3:
            nhsunits.push("Air Rescue Tier 3");
            break;
        }
        switch (data['nhsrirrank']) {
          case 0:
            break;
          case 1:
            nhsunits.push("Road Incident Responder");
            break;
        }

        if (nhsunits.length == 0) {
          units = "None";
        }

        for (g = 0; g < nhsunits.length; g++) {
          if (g != nhsunits.length && g != 0) {
            nhsunits[g] = " " + nhsunits[g];
          }
        }

        switch (data['nhsrank']) {
          case 1:
            var nhsrank = "Student";
            break;
          case 2:
            var nhsrank = "First Aider";
            break;
          case 3:
            var nhsrank = "Paramedic";
            break;
          case 4:
            var nhsrank = "Surgeon";
            break;
          case 5:
            var nhsrank = "Doctor";
            break;
          case 6:
            var nhsrank = "Consultant";
            break;
          case 7:
            var nhsrank = "NHS Administration";
            break;
          case 8:
            var nhsrank = "Chief Medical Officer";
            break;
        }
        isNHS = true;
      }

      if (data['grouprank'] > 0) {
        playerGroups.push(data['groupname']);
        isGroup = true;
      }

      if (data['adminlevel'] > 0 && data['adminlevel'] <= 4) {
        playerAdmin = "Staff Team - Level " + data['adminlevel'];
      } else if (data['adminlevel'] == 5) {
        playerAdmin = "Staff Team - Lead " + data['adminlevel'];
      } else if (data['adminlevel'] == 6) {
        playerAdmin = "Management";
      } else if (data['adminlevel'] == 7) {
        playerAdmin = "Developer";
      }
      //Putting the commas in the right places and formatting it nicely

      if (playerGroups.length == 0) {
        playerGroups = "None";
      }

      for (i = 0; i <= playerGroups.length; i++) {
        if (i != playerGroups.length && i != 0) {
          playerGroups[i] = " " + playerGroups[i]
        }
      }

      if (data['groupname'] == null) {
        data['groupname'] = "<b>Not in a group</b>";
      }
      document.getElementById("playerAdmin").innerHTML = playerAdmin;
      document.getElementById("playerID").innerHTML = playerID;
      document.getElementById("playerWanted").innerHTML = wanted;
      document.getElementById("playerBankMoney").innerHTML = bank;
      document.getElementById("playerCashMoney").innerHTML = cash;

      document.getElementById("playerTotalMoney").innerHTML = playerWorth;
      document.getElementById("playerName").innerHTML = playerName;
      document.getElementById("playerTotalMoney").innerHTML = playerWorth;

      document.getElementById("playerVehicleCount").innerHTML = vehicleCount;
      if (prank != "Not Police") {
        document.getElementById("playerPoliceRank").innerHTML = prank + "<br/>";
        document.getElementById("playerSpecUnits").innerHTML = "Specialist Units: <b>" + units + "</b>";
      } else {
        document.getElementById("playerPoliceRank").innerHTML = prank + "";
        document.getElementById("playerSpecUnits").style.display = "none";
      }
      if (nhsrank != "Not NHS") {
        document.getElementById("playerNHSRank").innerHTML = nhsrank + "<br/>";
        document.getElementById("playerNHSSpecUnits").innerHTML = "Branches: <b>" + nhsunits + "</b>";
      } else {
        document.getElementById("playerNHSRank").innerHTML = nhsrank + "";
        document.getElementById("playerNHSSpecUnits").style.display = "none";
      }
      document.getElementById("groupLabel").innerHTML = data['groupname'];
      if (data['groupname'] != "<b>Not in a group</b>") {
        document.getElementById("groupLabel").innerHTML = data['groupname'];
        document.getElementById("playerGroupRank").innerHTML = data['grouprank'];
      }
      document.getElementById("playerGUID").innerHTML = guid;

      document.getElementById("playerUNMCRank").innerHTML = urank;
      document.getElementById("groupLabel").innerHTML = data['groupname'];

      if (playerName.length > 13) {
        playerNameDisplay = playerName.substring(0, 10) + "...";
      } else {
        playerNameDisplay = playerName;
      }

      if (data['forumid'] != null) {
        document.getElementById("buttons").innerHTML += " <a href='" + data['forumurl'] + "' class='button'>Forum Profile</a>";
      }

      if (data.steam['profileurl'] != null) {
        document.getElementById("buttons").innerHTML += " <a href='" + data.steam['profileurl'] + "' class='button'>Steam Profile</a>";
      }

      document.getElementById("buttons").innerHTML += " <span><a href='https://www.roleplay.co.uk/forms/4-report-a-player/?form_field_26=" + escape(playerName) + "' class='button'>Report</a></span>";
      document.getElementById("buttons").innerHTML += " <span><a href='https://www.roleplay.co.uk/forum/123-recommend-a-player/?do=add&topic_title=" + escape(playerName) + "&topic_tags=" + playerID + "' class='button'>Recommend</a></span>";

      $.ajax({
        dataType: 'json',
        url: leaderBoardsRequest,
        data: leaderboardsData
      });
    }

    $.ajax({
      dataType: 'json',
      url: request,
      data: data,
      success: success,
      error: error
    });
  </script>
</head>

<body>
  <div class=playerdata>
    <div class=head>
      <h1 id="playerName">...</h1>
      <h2 id="playerID">...</h2>
      <button>Steam Profile</button>
      <button>Forum Profile</button>
      <button>Report</button>
      <button>Recommend</button>
    </div>
    <div class=info>
      <div class=general>
        <h2>General Information</h2>
        <div class=net>
          <p id=playerTotalMoney>...</p>
          <p class=hidden><span>Bank: </span><span class=result id=playerBankMoney>...</span><br><span>Cash On Hand: </span><span class=result id=playerCashMoney>...</span></p>
        </div>
        <div class=vehicle>
          <p id=playerVehicleCount>...</p>
          <p class=hidden>'VEHICLE LIST'</p>
        </div>
        <div class=license>
          <p>'LICENSES'</p>
          <div class=hidden><span class=true>Cement</span><span class=true>Copper</span><span class=false>Iron</span></div>
        </div>
        <div class=wanted>
          <p id=playerWanted>...</p>
        </div>
        <div class=admin>
          <p id=playerAdmin>...</p>
        </div>
      </div>
      <div class="right">
        <h2>Organisations</h2>
        <div class=police>
          <p id=playerPoliceRank>...</p>
          <p class=hidden><span>Last Logon: </span><span class=result id=policelog>...</span><br><span id=npas class=false>...</span><span id=mpo class=false>...</span><span id=ar class=false>...</span><span id=nca class=false>...</span><span id=rtu class=false>...</span>
            <span
              id=undercover class=false>...</span>
          </p>
        </div>
        <div class=nhs>
          <p id=playerNHSRank>...</p>
          <p class=hidden><span>Last Logon: </span><span class=result id=nhslog>...</span><br><span class=true>Undercover</span><span class=false>NCA</span><span class=true>AR</span><span class=true>MPO</span><span class=false>NPAS</span></p>
        </div>
        <div class=unmc>
          <p>'UNMC RANK'</p>
          <p class=hidden><span>Last Logon: </span><span class=result id=unmclog>...</span><br><span class=true>Undercover</span><span class=false>NCA</span><span class=true>AR</span><span class=true>MPO</span><span class=false>NPAS</span></p>
        </div>
        <div class=gang>
          <p id=groupLabel>...</p>
          <p class=hidden><span>Last Logon:</span> 10/09/08 12:11:10<br><span class=true>Undercover</span><span class=false>NCA</span><span class=true>AR</span><span class=true>MPO</span><span class=false>NPAS</span></p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

显然这在加载 DOM 之前运行:

 $.ajax({
  dataType: 'json',
  url: request,
  data: data,
  success: success,
  error: error
 });

这可能是您得到的错误是随机的原因。

也许你应该尝试这样的事情:

function ajaxLoad(){
     $.ajax({
         dataType: 'json',
         url: request,
         data: data,
         success: success,
         error: error
         });
     }
window.onload = ajaxLoad;

最好的做法是在文档末尾放置/加载您拥有的任何 javascript(代码或文件)。