How to distinguish between the work of JS?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
22 views
There are 3 JS file, inside they are almost the same, hooked it all to one html file. In the end, in different places are called other or all of the js files, which leads to bugs...
Don't know how to make the JS worked in a certain section (in the range of section id="1, 2, 3...")
Prompt in what direction to drip...
... ... 
...
UPD:
js/1.js
$(function(){ var page_number = 1 getRequest(page_number); $("#mnp-next").on("click", function () { page_number +=1 getRequest(page_number); $("#mnp-pageCounter").text(page_number); }); $("#mnp-prev").on("click", function () { if (page_number==1){ return; }else { page_number -=1; getRequest(page_number); $("#mnp-pageCounter").text(page_number); } }); $("#mnp-first").on("click", function () { page_number = 1 getRequest(page_number); $("#mnp-pageCounter").text(page_number); }); $("#mnp-last").on("click", function () { page_number = 48 getRequest(page_number); $("#mnp-pageCounter").text(page_number); }); function getRequest(page_number) { var params = { api_key: '123', page: page_number, language: ru-ru }; var url = 'http://api.themoviedb.org/3/movie/now_playing'; $.getJSON(url, params).done(function(data) { showResults(data.results); }); } function showResults(results) { var html = "; $.each(results, function(index,value) { console.log(value.title); var poster_path = value.poster_path; poster_title var = value.title; var id = value.id; if (poster_path === null) { return; } else { html += '
image'; $('#mnp-posters').html(html); } }); $(".poster").on("click", function () { console.log($(this).data('id')); var movie_id = $(this).data('id') console.log(movie_id) movieDetails(movie_id); }); } function movieDetails(id) { var params = { api_key: '123', external_source: "imdb_id", language: ru-ru }; var url = 'http://api.themoviedb.org/3/movie/' + id; $.getJSON(url, params).done(function(data) { showModal(data.backdrop_path, data.poster_path, data.title, data.original_title, data.vote_average, data.release_date, data.genres, data.overview, data.production_countries); }); } function showModal(backdrop_path, poster_path, title, original_title, vote_average, release_date, genres, overview, production_countries) { $('#mnp-myModal').modal('show'); var genre = genres.map(function(item) { return " + item['name']; }); var production_countrie = production_countries.map(function(item) { return " + item['name']; }); var html = '
image
'; $('.modal-body').html(html); var css = 'linear-gradient(rgba(0, 0, 0, 0.85),rgba(0, 0, 0, 0.85)), url(http://image.tmdb.org/t/p/original/' + backdrop_path + ')'; $('.modal-content').css('background-image',css); } });
js/2.js
$(function(){ var page_number = 1 getRequest(page_number); $("#mtr-next").on("click", function () { page_number +=1 getRequest(page_number); $("#mtr-pageCounter").text(page_number); }); $("#mtr-prev").on("click", function () { if (page_number==1){ return; }else { page_number -=1; getRequest(page_number); $("#mtr-pageCounter").text(page_number); } }); $("#mtr-first").on("click", function () { page_number = 1 getRequest(page_number); $("#mtr-pageCounter").text(page_number); }); $("#mtr-last").on("click", function () { page_number = 100 getRequest(page_number); $("#mtr-pageCounter").text(page_number); }); function getRequest(page_number) { var params = { api_key: '123', page: page_number, language: ru-ru }; var url = 'http://api.themoviedb.org/3/movie/top_rated'; $.getJSON(url, params).done(function(data) { showResults(data.results); }); } function showResults(results) { var html = "; $.each(results, function(index,value) { console.log(value.title); var poster_path = value.poster_path; poster_title var = value.title; var id = value.id; if (poster_path === null) { return; } else { html += '
image'; $('#mtr-posters').html(html); } }); $(".poster").on("click", function () { console.log($(this).data('id')); var movie_id = $(this).data('id') console.log(movie_id) movieDetails(movie_id); }); } function movieDetails(id) { var params = { api_key: '123', external_source: "imdb_id", language: ru-ru }; var url = 'http://api.themoviedb.org/3/movie/' + id; $.getJSON(url, params).done(function(data) { showModal(data.backdrop_path, data.poster_path, data.title, data.original_title, data.vote_average, data.release_date, data.genres, data.overview, data.production_countries); }); } function showModal(backdrop_path, poster_path, title, original_title, vote_average, release_date, genres, overview, production_countries) { $('#mtr-myModal').modal('show'); var genre = genres.map(function(item) { return " + item['name']; }); var production_countrie = production_countries.map(function(item) { return " + item['name']; }); var html = '
image
'; $('.modal-body').html(html); var css = 'linear-gradient(rgba(0, 0, 0, 0.85),rgba(0, 0, 0, 0.85)), url(http://image.tmdb.org/t/p/original/' + backdrop_path + ')'; $('.modal-content').css('background-image',css); } });
by | 22 views

2 Answers

0 like 0 dislike
Maybe you need to consistently load the JS files using the attribute defer?
by
0 like 0 dislike
Try to explore Webpack, Babel, what are modules in JS. Structure your code.
by
110,608 questions
257,186 answers
0 comments
35,430 users