Question

我试图使用距离公式来找出游戏中两座城堡之间的差异。游戏以下列格式存储城堡坐标＆＃34; L + K：//坐标16321,16520＆安培; 146＆＃34;？这座城堡的坐标是16321＆amp;我编写了一个函数来从两个城堡链接中提取这些信息，然后使用距离公式来返回答案。但是由于某种原因，在网站中调用此函数时，它不会返回预期的结果。有谁知道为什么会发生这种情况。请在下面找到我的代码。我还附上了一个JSFiddle。

https://jsfiddle.net/ajdxetod/

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Lords &amp; Knights - Distance Calculator</title>
    <script type="text/javascript" src="distanceScript.js"></script>
</head>
<body>
    <h1 class="heading">Distance Calculator</h1>

    <div>
        <fieldset>
            <legend>Castle Link One</legend>
            <input type="text" id="castle_one">
        </fieldset>
    </div>

    <div>
        <fieldset>
            <legend>Castle Link Two</legend>
            <input type="text" id="castle_two">
        </fieldset>
    </div>

    <div class="map_of_areadiv">
        <fieldset>
            <legend>Is Map Of Area Researched</legend>
            <input type="checkbox" id="moa_checkbox" checked="true"><label for="moa_checkbox">Is "Map Of Area Researched in the Libary?</label>
        </fieldset>
    </div>

    <div class="calculate_button">
        <button id="calculate" onclick="distanceCastles()">Calculate Distance</button>
    </div>

    <div class="distance_output">
        <fieldset id="castle_distance">
            <legend>Distance (in fields)</legend>
            <input type="text" id="output" placeholder="Click the Calculate Distance Button">
        </fieldset>
        <textarea id="troop_times"></textarea>
    </div>

</body>

distanceScript.js

var castleone;
var castletwo;
var x1;
var x2;
var y1;
var y2;
var distance = 0;

function distanceCastles() {
    castleone = document.getElementById("castle_one") ;
    castletwo = document.getElementById("castle_two") ;

    if (typeof castleone === "string" && castleone.length === 33) {
        x1 = castleone.substring(18, 23);
        y1 = castleone.substring(24, 29);

        x2 = castletwo.substring(18, 23);
        y2 = castletwo.substring(24, 29);

        distance = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));

        document.getElementById("output").innerHTML = distance;      
    } 
    else if (typeof castleone !== "string" || castleone.length !== 33) {
        document.getElementById("troop_times").innerHTML = "Error: You have not entered valid castle links";
    } 
    else {
        document.getElementById("troop_times").innerHTML = "Error: You have not entered valid castle links";
    }       

}

Answer 1

您正在声明变量

var distance = 0;

然后创建一个具有相同名称的函数

function distance () {
    // code...
}

你想知道为什么会出错。重命名。

Answer 2

一些问题

正如第一个回答所述，距离首先被声明为变量

您正在将html对象与字符串进行比较..您不需要这样做（请参阅我是如何尝试的）

您试图在不使用属性innerHTML或textContent的情况下插入消息。

您可以使用输入框

的.value属性获取每个输入距离的值

请参阅下面的代码段

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Lords &amp; Knights - Distance Calculator</title>
  <script type="text/javascript" src="distanceScript.js"></script>
</head>

<body>
  <script>
    var castleone;
    var castletwo;
    var x1;
    var x2;
    var y1;
    var y2;

    function distance() {

      castleone = document.getElementById("castle_one");
      castletwo = document.getElementById("castle_two");

      if (castleone.value.length === 33) {
        x1 = castleone.value.substring(18, 23);
        y1 = castleone.value.substring(24, 29);

        x2 = castletwo.value.substring(18, 23);
        y2 = castletwo.value.substring(24, 29);

        distance = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
        console.log(distance);

        document.getElementById("output").value = distance;
      } else if (castleone.value.length !== 33) {
        document.getElementById("troop_times").innerHTML = "Error: You have not entered valid castle links";
      } else {
        document.getElementById("troop_times").innerHTML = "Error: You have not entered valid castle links";
      }

    }
  </script>

  <h1 class="heading">Distance Calculator</h1>

  <div>
    <fieldset>
      <legend>Castle Link One</legend>
      <input type="text" id="castle_one">
    </fieldset>
  </div>

  <div>
    <fieldset>
      <legend>Castle Link Two</legend>
      <input type="text" id="castle_two">
    </fieldset>
  </div>

  <div class="map_of_areadiv">
    <fieldset>
      <legend>Is Map Of Area Researched</legend>
      <input type="checkbox" id="moa_checkbox" checked="true">
      <label for="moa_checkbox">Is "Map Of Area Researched in the Libary?</label>
    </fieldset>
  </div>

  <div class="calculate_button">
    <button id="calculate" onclick="distance()">Calculate Distance</button>
  </div>

  <div class="distance_output">
    <fieldset id="castle_distance">
      <legend>Distance (in fields)</legend>
      <input type="text" id="output" placehodler="Click the Calculate Distance Button">
    </fieldset>
    <textarea id="troop_times"></textarea>
  </div>

</body>

</html>

＆＃13;

HTML不会在点击时运行功能

2 个答案: