Как загрузить различные файлы Javascript на основе ввода - PullRequest
Новая
       3

Как загрузить различные файлы Javascript на основе ввода

1 голос
/ 09 мая 2019

Я работаю над картой, которая позволит пользователю выбрать одно из двух выражений набора данных и переключаться между ними. Каждое выражение задается в своем собственном .js (main_heat.js для тепловой карты, main.js для пропорциональных символов).

Моя проблема заключается в настройке элементов управления в моем файле index.html, которые будут загружать выбранное выражение на основе щелчка мышью. Следующий код не выдает ошибок, но не дает ожидаемого результата (перезагрузки другого выражения):

index.html: 

<div id ="expression">
    <h4>Choose your expression</h4>
    <a href="#" onclick="changeExpression('heat');">Heatmap</a> |
    <a href="#" onclick="changeExpression('prop');">Proportional Symbols</a>
</div>
<!--EXTERNAL SCRIPT LINKS-->
<script type="text/javascript" src="js/main_heat.js"></script>
<script type="text/javascript" src="js/main.js"></script>

main.js: 

function changeExpression(src){
    var heat = document.createElement("script");
        heat.src = "js/main_heat.js";
        document.body.appendChild(heat);
    var prop = document.createElement("script");
        prop.src = "js/main.js";
        document.body.appendChild(prop);

    if (src === "heat"){
        loadScript("main_heat.js")
    } else if (src === "prop"){
        loadScript("main.js");
    }
};

function loadScript(src){
    var el = document.createElement("script");
    el.src = src;
    document.body.appendChild(el);
}

Оба changeExpression и loadScript вызываются в начальной функции обратного вызова в main.js, и я пытаюсь понять, почему «onclick» в index.html не приводит к изменению. Кто-нибудь видит, где я иду не так, или понимаю, что может быть причиной этого?

Ответы [ 2 ]

0 голосов
/ 09 мая 2019

Есть несколько способов достичь желаемого, если вам нужно запускать разные сценарии на основе 'onClick'.

  1. Если размер файлов Js не имеет значения, лучше всего добавить файлы Js с тегами сценария в файл index.html, как показано ниже. 

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
  <div id ="expression">
      <h4>Choose your expression</h4>
      <a href="#" onclick="changeExpression('heat');">Heatmap</a> |
      <a href="#" onclick="changeExpression('prop');">Proportional Symbols</a>
  </div>
</body>

<!--EXTERNAL SCRIPT LINKS-->
<script type="text/javascript" src="js/main_heat.js"></script>
<script type="text/javascript" src="js/main.js"></script>

</html>
  1. Если вам нужно добавить эти два скрипта на основе onClick, вы можете сделать это с помощью простой функции следующим образом. 

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
  <div id ="expression">
      <h4>Choose your expression</h4>
      <a href="#" onclick="changeExpression('heat');">Heatmap</a> |
      <a href="#" onclick="changeExpression('prop');">Proportional Symbols</a>
  </div>
</body>

<script type="text/javascript">
  let changeExpression = function (type) {
    let elem = document.createElement("script");
    
    if (type === 'heat') {
      elem.src = "js/main_heat.js";
    } else {
      elem.src = "js/main.js";
    }
    map.off();
    map.remove();
    document.body.appendChild(elem);
  }
</script>
</html>

Надеюсь, это поможет!

0 голосов
/ 09 мая 2019
  • Отсутствует точка с запятой в конце строки loadScript("main_heat.js")
  • Проверьте пути к вашим сценариям, потому что они разные (в одном месте вы опускаете каталог) и, следовательно, скорее всего, не найдены
  • Проверьте консоль на наличие ошибок, таких как net::ERR_ABORTED 404 (Not Found)
  • Попробуйте добавить код, чтобы проверить, добавлен ли сценарий, потому что каждый щелчок добавит его снова
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...