Блог

Главная - Вопросы по программированию - Разница между JSFiddle и локальными файлами JS?

Разница между JSFiddle и локальными файлами JS?

#javascript #html

#javascript #HTML

Вопрос:

Я получаю разные результаты при запуске в JSFiddle по сравнению с моей локальной средой. У меня есть только 2 файла: index.html и slider.js

Ссылка на JSFiddle

Настройка моего локального файла:

 asdf$ cat index.html
<html>
  <body>
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<div id="demo"></div>
</body>
</html>


asdf$ cat slider.js 
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
}

Однако, когда я открываю HTML-файл в Firefox и Chrome, я вижу, что значение «demo» невидимо. Ширина — это ширина окна, а высота равна 0. Почему это происходит?

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

1. JSFiddle встроит ваш javascript для вас, вам нужно сослаться на файл js в вашем html. w3schools.com/tags/att_script_src.asp

2. Имеет ли значение, куда я помещаю эту строку? должно ли это быть в начале тела или разделов div (и какого именно)?

3. внутри тега body (непосредственно перед </body> , после элементов, на которые ссылается код

4. Боже мой, спасибо! Это сработало 🙂

5. Рад, что вы поняли это. Ваш вопрос отклоняется, потому что вы, возможно, не исследовали. Будучи новичком в этом, вы можете даже не знать, что исследовать. Я рекомендую вам попробовать несколько руководств и обязательно изучить вашу проблему до публикации вопроса, но не стесняйтесь публиковать. Даже если вы проголосуете против, вы можете чему-то научиться. Удачи!

Ответ №1:

Спасибо, комментаторы! Это то, что index.html файл должен был выглядеть как:

 <html>
  <body>
    <div class="slidecontainer">
      <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
    </div>
    <div id="demo"></div>

    <script src="slider.js"></script> <!-- important!!!  -->
  </body>
</html>

Оказывается, что JSFiddle встраивает файлы javascript для нас, но мы должны делать это сами во время разработки.

Результат:
введите описание изображения здесь