HTML не запускает функцию при нажатии

ProgramBox

HTML не запускает функцию при нажатии

Post author:admin
Запись опубликована:10 мая, 2023
Post category:Вопросы по программированию

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

Я пытаюсь использовать формулу расстояния, чтобы найти разницу между двумя замками в игре. Игра сохраняет координаты замка в следующем формате «l k://coordinates?16321,16520 amp;146» координаты этого замка будут 16321 и 16520. Я написал функцию для извлечения этой информации из двух ссылок castle, а затем использую формулу distance для возврата ответа. Однако по какой-то причине, когда эта функция вызывается на веб-сайте, она не возвращает ожидаемый результат. Кто-нибудь знает, почему это может происходить. Пожалуйста, найдите мой код ниже. Я также прикрепил JSFiddle.

https://jsfiddle.net/ajdxetod/

Index.html

 <!DOCTYPE html>
<html>
<head>
    <title>Lords amp;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" amp;amp; 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";
    }       

}

1. (индекс): 117 Неперехваченная ошибка ссылки: расстояние не определено Получила эту ошибку

2. вы проверили консоль?

3. @chhameed я запускал это раньше с немного другим кодом и получил ту же ошибку, но сейчас я ее не получаю. Я добавил скриншот консоли

4. Исправить ошибки javascript? Он остановит выполнение вашего скрипта, если возникнет ошибка, soo…

5. «Я также атаковал JSFiddle» — опечатки иногда могут быть забавными. Это была опечатка, верно? Нам не нужно помогать потерянному и заброшенному JSFiddle, который где-то ищет банку канифоли, чтобы починить себя…

Ответ №1:

Вы объявляете переменную

 var distance = 0;

И затем вы создаете функцию с тем же именем

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

и вы задаетесь вопросом, почему вы получаете ошибку. Переименовать тоже.

Ответ №2:

Некоторые проблемы

Как указано в первом ответе, расстояние было объявлено как переменная первым

Вы сравниваете html-объект со строкой..Вам не нужно этого делать (смотрите, как я пытался это сделать)

Вы пытаетесь вставить сообщение без использования свойства innerHTML ИЛИ textContent ..

Вы можете получить значение каждого входного расстояния, используя .value свойство поля ввода

Смотрите фрагмент ниже

 <!DOCTYPE html>
<html>

<head>
  <title>Lords amp;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>