Загружается только один тег javascript?
Итак, у меня есть два внешних файла .js, и я правильно связал их через файл index.html, однако только первый тег скрипта загружает оба файла .js, но я могу загрузить только один из них в свой файл html.
HTML-файл:
<!DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
<meta charset = "utf-8">
<title>Crypto Monitor</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel = "stylesheet" href = "style.css" type = "text/css">
</head>
<body>
<div class = "ui left fixed vertical menu">
<div class = "item">
<img class = "image" src = "https://i.imgur.com/KpBo4E0.png">
</div>
<a class = "item">Dashboard</a>
<a class = "item">Exit</a>
</div>
<div class = "bitcoin container">
<div class = "ui orange center aligned raised segment">
<img src = "https://s2.coinmarketcap.com/static/img/coins/16x16/1.png"> <p>Current Bitcoin Price:</p>
<h3 id = "btc" style = "color:green">Loading Price...</h3>
<script type = "text/javascript" src = "btc.js"></script>
</div>
</div>
<div class = "Ethereum container">
<div class = "ui blue center aligned raised segment">
<img src = "https://s2.coinmarketcap.com/static/img/coins/16x16/1027.png"> <p>Current Ethereum Price:</p>
<h3 id = "eth" style = "color:green">Loading Price...</h3>
<script type = "text/javascript" src = "eth.js"></script>
</div>
</div>
<div class = "ui black center aligned raised segment">
<img src = "https://s2.coinmarketcap.com/static/img/coins/16x16/52.png">
<p style = "color:green;">Current XRP Price:</p>
<p>Loading...</p>
<label for = "24 hr change">Change (24HR): loading...</label>
</div>
<div class = "ui yellow center aligned raised segment">
<img src = "https://s2.coinmarketcap.com/static/img/coins/16x16/328.png">
<p>Current Monero Price:</p>
<p style = "color:green;">Loading...</p>
<label for = "24 hr change">Change (24HR): loading...</label>
</div>
<div class = "ui black center aligned raised segment">
<img src = "https://s2.coinmarketcap.com/static/img/coins/16x16/2.png">
<p>Current Litecoin Price:</p>
<p style = "color:green;">Loading...</p>
<label for = "24 hr change">Change (24HR): loading...</label>
</div>
<style type = "text/css">
body {
overflow:hidden;
}
</style>
</body>
</html>
btc.js файл:
const electron = require('electron')
const path = require('path')
const axios = require('axios')
function getBTC() {
axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC&tsyms=USD')
.then(res => {
const cryptos = res.data.BTC.USD
btc.innerText = '$' + cryptos.toLocaleString('en')
})
}
getBTC()
setinterval(getBTC, 1000);
Файл eth.js:
const electron = require('electron')
const path = require('path')
const axios = require('axios')
function getETH() {
axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=ETH&tsyms=USD')
.then(res => {
const cryptos = res.data.ETH.USD
eth.innerText = '$' + cryptos.toLocaleString('en')
})
}
window.addEventListener("onload", function(){
console.info('I am loaded');
});
getETH()
setinterval(getETH, 2000);
Оба файла .js работают правильно, однако, когда я включаю их в index.html, загружается только первый скрипт.
Обновлено: https://i.imgur.com/cQ2wmjs.gifv вы можете видеть, что функция загрузки цены ... не работает, однако, когда я просто использую один тег скрипта в файле index.html, он загружается нормально.
Я предлагаю вам поискать ошибки в консоли вашего браузера.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы используете одни и те же переменные electron, path и axios в обоих файлах. Вы также объявляете их с помощью const, что запрещает их переназначение. Поэтому, когда вы пытаетесь загрузить второй файл .js, он получает ошибку из-за попытки присвоения переменной const.
Оберните весь код в IIFE, чтобы каждый файл находился в своей области.
(function() {
const electron = require('electron')
const path = require('path')
const axios = require('axios')
function getETH() {
axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=ETH&tsyms=USD')
.then(res => {
const cryptos = res.data.ETH.USD
eth.innerText = '$' + cryptos.toLocaleString('en')
})
}
window.addEventListener("onload", function() {
console.info('I am loaded');
});
getETH()
setinterval(getETH, 2000);
})();OP не использует type = "module", поэтому маловероятно, что require() будет работать в любом из сценариев. Даже тогда я почти уверен, что вы можете использовать только import
Он утверждает, что загрузка только одного из них работает сама по себе.
Обе функции .js работают по назначению, только если они протестированы с одним тегом сценария внутри html файла, однако, если я использую два тега сценария, в консоль загружается только один из файлов js. Я получаю эту ошибку Uncaught SyntaxError: Identifier 'electron' has already been declared. Я получаю эту ошибку SyntaxError, даже если вместо этого использую 'let' 'const' в обоих файлах.
Хорошо, измените сценарии на использование IIFE, чтобы они были в разных областях.
Спасибо, Бармар, ты помог мне завершить мое первое JS-приложение, не описать это чувство :)