Блог

Главная - Вопросы по программированию - вызов функции java script через тег script

вызов функции java script через тег script

#javascript #html

#javascript #HTML

Вопрос:

когда я пытаюсь загрузить скрипт и вызвать функции, присутствующие в моем скрипте, он показывает, что функция не определена. ниже приведен мой html-файл 

 <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Jekyll v4.1.1">
  <title>Magic Bricks</title>

  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="{{templateInfo.url}}/css/custom.css">
</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark customTopBar">
    <a class="navbar-brand navLogo" href="#">MAGIC BRICKS</a>

    <a class="nav-link loginLink ml-auto" href="#">
      <img class='navProfileImage' src="{{templateInfo.url}}/images/userProfile.png" alt='profile' />
      LOGIN
    </a>
  </nav>

  <main role="main" class="bgImage">
    <div class="text-center col-md-12">
      <h1 class="landingHeadingCss">
        Properties for <strong>Sale </strong>in <strong>Hyderabad</strong>
      </h1>
    </div>
    <div class="landingSearchCard card">
      <div class="d-flex mb-3">
        <div class="activeSearchTab">Sale</div>
        <div class="searchTab ml-5">Rent</div>
      </div>
      <div class="input-group mb-3 customInput row mx-0">
        <div class="input-group-prepend searchButton col-3 px-0">
          <input type="text" class="form-control" value="" id="city" aria-describedby="basic-addon2">
        </div>
        <input type="text" class="form-control col-auto" placeholder="Search for locality..."
          aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div class="input-group-append searchButton col-auto px-0">
          <!-- <a class="input-group-text" href="{{templateInfo.url}}api/searchProperties?city=Hyderabad">Search</a> -->
          <button onclick="reload()" id="basic-addon2" class="input-group-text">Search</button>
        </div>
      </div>
    </div>
  </main>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx"
    crossorigin="anonymous"></script>
  <script type="application/json" src='../services/reload.service.js'></script>
</body>

</html>

и это мой reload.service.js

 import fetch from 'node-fetch';

import config from '../config/config';

const serverUrl = config.localUrl;

function reload() {
  console.log(">>>>>>>>>>.")
  let url = serverUrl   "api/searchProperties";
  fetch(url, { method: 'GET', headers: { "Content-Type": "application/javascript" } }).then(response =>
    console.log(response))
}

export {
  reload
}

когда я нажимаю на кнопку поиска, она отображается как перезагрузка не определена.
Как это решить

Любое объяснение приветствуется и приветствуется, заранее спасибо.

Ответ №1:

Я думаю, что ваша ошибка здесь:

тип скрипта=»application/json» src=’../services/reload.service.js ‘

Почему вы указываете «application / json», поскольку вы импортируете файл .js?

Убедитесь, что вы добавили ‘script type = «application / javascript» или ничего, потому что это должно быть значением по умолчанию. Я думаю, проблема в том, что вы экспортируете. Я не знаю, какой фреймворк вы используете. Если это чистый javascript, вы можете удалить это:
export { reload }
Поскольку вы уже импортируете файл javascript, все функции импортируются автоматически. Пожалуйста, посмотрите на скриншот этой картинки : введите описание изображения здесь

Комментарии:

1. когда я удаляю tye=»application / json», я получаю сообщение об ошибке, поскольку отказано в выполнении скрипта из ‘ localhost:5112/services/reload.service.js ‘потому что его MIME-тип (‘text/html’) не является исполняемым, и включена строгая проверка типа MIME. @Тони Кейт

2. Я обновил свой ответ, потому что я не могу разместить здесь скриншоты

3.Когда у вас есть type="application/json" браузер, он даже не пытается загрузить JavaScript, потому что вы сказали ему, что это не JS. Когда вы удаляете его, вы обнаруживаете другую проблему: сервер отправляет обратно то, что, по его утверждению, является HTML. Таким образом, либо URL неверен, сервер отправляет неправильный MIME-тип для JS, либо URL, для которого сервер отправит JS, не существует.

4. @Tony Keith я использую node.js и express framework даже после удаления export{reload} прогресса нет

5. Использование вами кода модуля ES6 (и правил разрешения модулей узла, а также модулей, предназначенных для использования в узле, а не в браузере) в JS-файле на стороне клиента вызовет проблемы, но вы не будете испытывать их, пока не сможете убедить сервер фактически отправить JS-файл в браузер.