I’ll say right away that js didn’t really study, and I usually do everything using the method of selection, lessons, scientific spear.

I wrote an interesting service for myself, today I decided to clean the code by adding variables, but here is bad luck: I tried differently, I saw some variables, some I didn't, in general I decided to ask for your help.

Uncaught ReferenceError: Activator is not defined

Here is the code itself:

if (location.hash.length == 134 || location.pathname == "/audios") { Audios(); } Audio = document.getElementById("Player"); PUT = '\ <div class="AudiosBackground">\ <div class="AudiosTop">\ <input id="search" placeholder="Поиск..." oninput="Search();" onchange="Search();">\ <button id="exit">X</button></div>\ <div class="AudiosBottom">\ <button id="AudiosPause" class="AudiosUnit" style="display: none;"></button>\ <button id="AudiosPlay" class="AudiosUnit"></button>\ <button id="AudiosBack" class="AudiosUnit"></button>\ <button id="AudiosNext" class="AudiosUnit"></button>\ <button id="AudiosReload" class="AudiosUnit" title="Перезагрузить список"></button>\ <input type="range" onchange="AudiosVolume(this.value);" value="100" oninput="AudiosVolume(this.value);" id="AudiosVolume" class="AudiosUnit">\ <img src="/Audios/loading.gif" id="loading" style="display:none;">\ <a title="Нажмите, что-бы скачать." class="AudiosTitle" download></a>\ </div>\ <div class="AudiosIndicator">\ <div class="AudiosPlayed">\ </div>\ <div class="AudiosLoaded">\ </div>\ </div>\ <div class="AudiosBlock">\ </div>\ </div>'; Activator = "#PlayerActivator", Window = ".AudiosBackground", Block = ".AudiosBlock", Player = "#Player"; Play = "#AudiosPlay", Pause = "#AudiosPause", Prev = "#AudiosBack", Next = "#AudiosNext", Reload = "#AudiosReload"; PlayerTruck = ".PlayerTruck", PlayerTruckActive = ".PlayerTruckActive", PlayerTruckActiveHidden = ".PlayerTruckActiveHidden", PlayerTruckHidden = ".PlayerTruckHidden"; Truck = "#Truck", TruckNumber = $(Player).attr("number"); $(Activator).click(function() { if ($(this).attr("use") == "1") { $(Window).fadeIn(); } else { Audios(); } return false; }); // Функция получения данных из строки (взял из паблика) function HashParams(output) { var hashParams = {}; var e, a = /\+/g, r = /([^&;=]+)=?([^&;]*)/g, d = function(s) { return decodeURIComponent(s.replace(a, " ")); }, q = window.location.hash.substring(1); while (e = r.exec(q)) hashParams[d(e[1])] = d(e[2]); return hashParams[output]; } function Audios() { var token = HashParams("access_token"); var user = HashParams("user_id"); history.pushState('', document.title, window.location.pathname); if (token == null) { location.href = "https://oauth.vk.com/authorize?client_id=5569755&scope=Audio&redirect_uri=" + location.href + "&display=wap&response_type=token"; } else { history.pushState(null, null, "/audios"); $(Activator).attr("connect-url", "https://api.vk.com/method/audio.get?owner_id=" + user + "&access_token=" + token); connect = $(Activator).attr("connect-url"); try { $.ajax({ url: connect, crossDomain: true, dataType: 'jsonp', success: function(data) { $("body").append(PUT); console.log(connect); for (var i = 1; i < data.response.length; i++) { artist_ = data.response[i].artist; title_ = data.response[i].title; $(Block).append('<button title="' + artist_ + ' - ' + title_ + '" class="PlayerTruck" id="Truck' + i + '" onclick="AudioThis(&#039;' + data.response[i].url + '&#039;,&#039;' + [i] + '&#039;);">\ <span class="PlayerTitleAuthor">' + data.response[i].artist + '</span>\ <span class="PlayerTitleSong">' + data.response[i].title + '</span>\ </button>'); } $(Window).fadeIn(); $('#exit').click(function() { $(Window).fadeOut(); }); $(Pause).click(function() { $(Play).show(); $(Pause).hide(); if (Audio.duration != "0") { Audio.pause(); } }); $(Play).click(function() { $(Play).hide(); $(Pause).show(); if ($(Player).attr("number") == null) { $(Truck + '1').trigger('click'); } else { Audio.play(); } }); $(Prev).click(function() { if (TruckNumber != null) { $("#Truck" + TruckNumber).prevAll(PlayerTruck).filter(":first").trigger('click'); } }); $(Next).click(function() { if (TruckNumber != null) { $("#Truck" + TruckNumber).nextAll(PlayerTruck).filter(":first").trigger('click'); } }); $(Reload).click(function() { $('#search').val(""); $(Reload).prop("disabled", true); $.ajax({ url: connect, crossDomain: true, dataType: 'jsonp', success: function(data) { $(Reload).prop("disabled", false); $(Block).html("<!-- Список -->"); for (var i = 1; i < data.response.length; i++) { artist_ = data.response[i].artist; title_ = data.response[i].title; $(Block).append('<button title="' + artist_ + ' - ' + title_ + '" class="PlayerTruck" id="Truck' + i + '" onclick="AudioThis(&#039;' + data.response[i].url + '&#039;,&#039;' + [i] + '&#039;);"><span class="PlayerTitleAuthor">' + data.response[i].artist + '</span><span class="PlayerTitleSong">' + data.response[i].title + '</span></button>'); } } }); }); $(Activator).attr('use', '1'); $(Activator).attr('authorize', 'yes'); } }); } catch (e) { console.log(e); } } } function AudioThis(url, id) { $("#download").attr("href", url); $(PlayerTruckActive).attr("class", "PlayerTruck"); $(Player).attr("src", url); $(Player).attr("number", id); $(".AudiosTitle").html($("#Truck" + id).attr("title")); $(".AudiosTitle").attr("href", url); document.title = $(Truck + id).attr("title"); Audio.play(); $(Play).hide(); $(Pause).show(); Audio.onerror = function(e) { alert(e); }; $(Truck + id).attr("class", "PlayerTruckActive"); Audio.addEventListener('ended', function() { $(PlayerTruckActive).attr("class", "PlayerTruck"); $(PlayerTruckActiveHidden).attr("class", "PlayerTruckHidden"); $("#Truck" + TruckNumber).nextAll(PlayerTruck).filter(":first").trigger('click'); }); Audio.addEventListener("timeupdate", function() { percent = 100 * Audio.currentTime / Audio.duration; $(".AudiosPlayed").attr("style", "width:" + ~~percent + "%;"); if (isNaN(Audio.duration)) { $("#loading").show(); } else { $("#loading").hide(); } }); Audio.addEventListener('progress', function() {}); } function Search() { search = $('#search').val(); if (search == '') { $(PlayerTruckHidden).attr("class", "PlayerTruck"); $(PlayerTruckActiveHidden).attr("class", "PlayerTruckActive"); } else { $(PlayerTruck).attr("class", "PlayerTruckHidden"); $(PlayerTruckActive).attr("class", "PlayerTruckActiveHidden"); $(PlayerTruckHidden + "[title *= '" + search + "']").attr("class", "PlayerTruck"); $(PlayerTruckActiveHidden + "[title *= '" + search + "']").attr("class", "PlayerTruckActive"); } } function AudiosVolume(volume) { Audio.volume = volume / 100; }

Web: http://w-0rld.ru/Audios/audios.module.js

But the old, working code (Dangerous to the psyche):

 $('#PlayerActivator').click(function() { if ($("#PlayerActivator").attr("use") == "1") { $('.AudiosBackground').fadeIn(); } else { Audios(); } return false; }); function HashParams(output) { var hashParams = {}; var e, a = /\+/g, r = /([^&;=]+)=?([^&;]*)/g, d = function(s) { return decodeURIComponent(s.replace(a, " ")); }, q = window.location.hash.substring(1); while (e = r.exec(q)) hashParams[d(e[1])] = d(e[2]); return hashParams[output]; } function escapeHtml(text) { return text .replace(/&/g, "&amp;") .replace(/</g, "&lt;") .replace(/>/g, "&gt;") .replace(/"/g, "&quot;") .replace(/'/g, "&#039;"); } function Audios() { var token = HashParams("access_token"); var user = HashParams("user_id"); history.pushState('', document.title, window.location.pathname); if (token == null) { document.title = "Авторизация..."; location.href = "https://oauth.vk.com/authorize?client_id=5569755&scope=audio&redirect_uri=" + location.href + "&display=wap&response_type=token"; } else { history.pushState(null, null, "/audios"); document.title = "Загрузка аудиозаписей..."; $("#PlayerActivator").attr("connect-url", "https://api.vk.com/method/audio.get?owner_id=" + user + "&access_token=" + token); connect = $("#PlayerActivator").attr("connect-url"); try { $.ajax({ url: connect, crossDomain: true, dataType: 'jsonp', success: function(data) { $("body").append('<div class="AudiosBackground"><div class="AudiosTop"><input id="search" placeholder="Поиск..." oninput="Search();" onchange="Search();"><button id="exit">X</button></div><div class="AudiosBottom"><button id="AudiosPause" class="AudiosUnit" style="display: none;"></button><button id="AudiosPlay" class="AudiosUnit"></button><button id="AudiosBack" class="AudiosUnit"></button><button id="AudiosNext" class="AudiosUnit"></button><button id="AudiosReload" class="AudiosUnit" title="Перезагрузить список"></button><input type="range" onchange="AudiosVolume(this.value);" value="100" oninput="AudiosVolume(this.value);" id="AudiosVolume" class="AudiosUnit"><img src="/Audios/loading.gif" id="loading" style="display:none;"><a title="Нажмите, что-бы скачать." class="AudiosTitle" download></a></div><div class="AudiosIndicator"><div class="AudiosLoaded"></div></div><div class="AudiosBlock"></div></div>'); try { for (var i = 1; i < data.response.length; i++) { artist_ = escapeHtml(data.response[i].artist); title_ = escapeHtml(data.response[i].title); $('.AudiosBlock').append('<button title="' + artist_ + ' - ' + title_ + '" class="PlayerTruck" id="Truck' + i + '" onclick="Audio(&#039;' + data.response[i].url + '&#039;,&#039;' + [i] + '&#039;);"><span class="PlayerTitleAuthor">' + data.response[i].artist + '</span><span class="PlayerTitleSong">' + data.response[i].title + '</span></button>'); } $('.AudiosBackground').fadeIn(); $('#exit').click(function() { $(".AudiosBackground").fadeOut(); }); var audio = document.getElementById("Player"); $('#AudiosPause').click(function() { $('#AudiosPlay').show(); $('#AudiosPause').hide(); if (audio.duration != "0") { audio.pause(); } }); $('#AudiosPlay').click(function() { $('#AudiosPlay').hide(); $('#AudiosPause').show(); if ($("#Player").attr("number") == null) { $('#Truck1').trigger('click'); } else { audio.play(); } }); $('#AudiosBack').click(function() { idnum = $("#Player").attr("number"); if (idnum != null) { $("#Truck" + idnum).prevAll(".PlayerTruck:first").filter(":first").trigger('click'); } }); $('#AudiosNext').click(function() { idnum = parseInt($("#Player").attr("number")); if (idnum != null) { $("#Truck" + idnum).nextAll(".PlayerTruck:first").filter(":first").trigger('click'); } }); $('#AudiosReload').click(function() { $('#search').val(""); $('#AudiosReload').prop("disabled", true); $.ajax({ url: connect, crossDomain: true, dataType: 'jsonp', success: function(data) { try { $('#AudiosReload').prop("disabled", false); $('.AudiosBlock').html("<!-- Список -->"); for (var i = 1; i < data.response.length; i++) { artist_ = escapeHtml(data.response[i].artist); title_ = escapeHtml(data.response[i].title); $('.AudiosBlock').append('<button title="' + artist_ + ' - ' + title_ + '" class="PlayerTruck" id="Truck' + i + '" onclick="Audio(&#039;' + data.response[i].url + '&#039;,&#039;' + [i] + '&#039;);"><span class="PlayerTitleAuthor">' + data.response[i].artist + '</span><span class="PlayerTitleSong">' + data.response[i].title + '</span></button>'); } } catch (e) { alert("Не вышло обновить список. Ваша сессия устарела."); $(".AudiosBackground").remove(); location.href = protocol + site + slesh + "audios"; } } }); }); $('#PlayerActivator').attr('use', '1'); } catch (e) { alert("Не удалось загрузить ваши аудиозаписи. Ваша сессия устарела."); $(".AudiosBackground").remove(); } document.title = "HR | Аудиозаписи"; $('#PlayerActivator').attr('authorize', 'yes'); } }); } catch (e) { alert("Не удалось получить список аудиозаписей. Проверьте соединение с интернетом."); } } } function onload() { if (location.hash.length == 134 || location.pathname == "/audios") { Audios(); } } function Search() { search = $('#search').val(); if (search == '') { $(".PlayerTruckHidden").attr("class", "PlayerTruck"); $(".PlayerTruckActiveHidden").attr("class", "PlayerTruckActive"); } else { $(".PlayerTruck").attr("class", "PlayerTruckHidden"); $(".PlayerTruckActive").attr("class", "PlayerTruckActiveHidden"); $(".PlayerTruckHidden[title *= '" + search + "']").attr("class", "PlayerTruck"); $(".PlayerTruckActiveHidden[title *= '" + search + "']").attr("class", "PlayerTruck"); } } function Audio(url, id) { audio = document.getElementById("Player"); $("#download").attr("href", url); $(".PlayerTruckActive").attr("class", "PlayerTruck"); $("#Player").attr("src", url); $("#Player").attr("number", id); $(".AudiosTitle").html($("#Truck" + id).attr("title")); $(".AudiosTitle").attr("href", url); document.title = $("#Truck" + id).attr("title"); audio.play(); $('#AudiosPlay').hide(); $('#AudiosPause').show(); audio.onerror = function() { alert("Данная композиция недоступна или у вас отсутствует соединение с интернетом."); }; $("#Truck" + id).attr("class", "PlayerTruckActive"); audio.addEventListener('ended', function() { $(".PlayerTruckActive").attr("class", "PlayerTruck"); idnum = $("#Player").attr("number"); if (idnum != null) { $("#Truck" + idnum).nextAll(".PlayerTruck:first").filter(":first").trigger('click'); } }); setInterval(function() { audio = document.getElementById("Player"); percent = 100 * audio.currentTime / audio.duration; $(".AudiosLoaded").attr("style", "width:" + ~~percent + "%;"); if (isNaN(audio.duration)) { $("#loading").show(); } else { $("#loading").hide(); } }, 500); } function AudiosVolume(volume) { new_volume = volume / 100; audio = document.getElementById("Player"); audio.volume = new_volume; }
  • In es5, variables have scop functions. If the variable is not found in the current function's scopes, then the search in the function scopes is one level higher, and so on recursively. - Ali
  • learn.javascript.ru - Alexey Ten
  • I did not quite understand the phrases: es5, function scop .. My problem is a solution - to push these variables into each function, but you can do something nice as well? Tell me what to do to work? - user224149
  • one
    Oh. So learn. Scope is how js differs from most other common languages. The scope is determined by the function, but not {} - Duck Learns to Take Cover
  • one
    js didn’t really study (and obviously I’m not going to), but you can figure it out in my sheet and tell me why. Hi, good mood. - Igor

1 answer 1

Just write var Activatore = "#PlayerActivator", ... , as advised by Vyacheslav Danshin. Actually, a var is needed before Play, PlayerTruck and Truck below the code.