0
I am adding buttons to add music to the favorites, but this button is only appearing in the first songs, it does not appear in the others below, it seems that the buttons are superimposed... But I can’t find the problem... I’m using css and js...
CSS:
/* --- BOTOES PARA O SEE MORE --- */
.option-btn1 {
position: absolute;
display: inline;
top: 50px;
z-index: 10000;
}
.option-btn1 .btn-add-fav i {
position: relative;
left: 40px;
top: 165px;
font-size: 200%;
color: #000;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 10000;
}
.option-btn1 .btn-add-fav i:hover {
color: #74C8D2;
z-index: 10000;
}
JS:
$(".see-more-btn").click(function(){
let singles=[];
$(".div-pesquisa").hide();
$("#more-music").show();
$("#more-music .row h3").html("You searched for " + response.artists[0].name);
$(".see-more-music").empty();
$(".see-more-music").html('<li><button class="go-back-btn" type="button" name="button" id="your-playlist" onclick="backArtist()"><i class="ion-ios-arrow-back" ></i>GO BACK</button></li>');
url="http://musicbrainz.org/ws/2/artist/"+ response.artists[0].id +"?inc=releases&fmt=json";
url=encodeURI(url);
//alert(url);
$.get(url,function(response,status){
if (status=='success') {
for (result of response.releases) {
//alert(result.id);
var album = result.id;
let titulo = result.title;
url="http://musicbrainz.org/ws/2/release/"+album+"?inc=recordings+media&fmt=json";
url=encodeURI(url);
$.get(url,function(response,status){
if (status=='success') {
let aux=0;
for (music of response.media[0].tracks) {
for (var i = 0; i < singles.length; i++) {
if (singles[i]==music.title) {
aux=1;
break;
}
}
if (aux==1) {
break;
}else{
singles[i+1]=music.title;
}
$(".see-more-music").append($("<li>").append($("<figure>").addClass("music-img").append($("<div>").addClass("option-btn1").append($("<div>").addClass("btn-add-fav").append($("<i>").addClass("ion-ios-add").click(function(){
addFav(response.items[0].snippet.title);
})))).append($("<i>").addClass("ion-ios-play-circle")).append($("<div>").addClass("info-music").append($("<h6>").html(music.title).css("color","#FFF"))).click(function(){
$("#more-music").hide();
$(".player").show();
let url ="https://www.googleapis.com/youtube/v3/search?q="+music.title+"song&maxResults=1&part=snippet&key="+youtubeAPIKey;
url=encodeURI(url);
$.get(url,function(response,status){
if (status=='success') {
$(".player iframe").attr("src", "https://www.youtube.com/embed/"+response.items[0].id.videoId).css("border", "0").css("width", "100%").css("height", "100vh");
}
});
})));
}
}
});
}
}
});
});
Thank you!!
Missing the HTML entry.
– Sam
No html! I just append the Divs in js.
– Nelson Pacheco
In the first lines of the function there is:
response.artists[0].name
that is not set anywhere, only then in Ajax... this results in error.– Sam