A. Seidel A. Seidel - 1 month ago 4
Javascript Question

HTML does not run function on click

I'm trying to use the distance formula to find the difference between two castle on a game. The game stores the castle coordinates in the following format
"l+k://coordinates?16321,16520&146" the coordinates of this castle would be 16321 & 16520. I have written a function to extract this information from two castle links and then use the distance formula to return the answer. However for some reason when this function is called in the website it does not return the expected result. Does anyone know why this might be happening. Please find my code below. I have also attached a JSFiddle.

enter image description here

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

Some issues

  • As what first answer stated the distance was declared as a variable first
  • You are comparing an html object with a string..You don't need to do this (See how I attempted it)
  • You are trying to insert out message without using using the property innerHTML OR textContent..
  • You can get the value of each input distance using .value property of input box

    See snippet below

    <!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>

  • Comments