Page title

<title>трек-название</title>

Button

 <a data-title="\f0dc трек-название" href="">play</a>

When you click on the button, you need to add text or an icon (\ f0dc) to the title of the page here.

 <title>\f0dc - трек-название</title>

When pressed again, delete the icon.

  • Take a look at my answer. This is in case you are using jQuery. If you use Angularjs, then tell me, I will write a solution on angular. - Alliswell

3 answers 3

Look so

 <ul id="playlist"> <li class="play" data-title="David Guetta - Hey Mama ft. Nicki Minaj">David Guetta - Hey Mama ft. Nicki Minaj</li> <li class="play" data-title="Maroon 5 - Sugar">Maroon 5 - Sugar</li> <li class="play" data-title="Wiz Khalifa - See You Again ft. Charlie Puth">Wiz Khalifa - See You Again ft. Charlie Puth</li> </ul> 
 $('#playlist a').click(function() { $(this).toggleClass('active'); var title = $(this).attr('data-title') if ($(this).hasClass('active')) { document.title = "\f0dc "+title; } else { document.title = title; } });
  • the text is not added but replaced and repeated pressing (deletion) also does not work. And through JS does not work at all. - steep
  • The code works well, but the track-name in js is not inserted, you can somehow through the link, something like <a data-title= "track-name"> - steep

document title change

 $('title').text('ня');

or

 document.title = "ня";

    If you use jQuery, then something like this:

    HTML

     <a data-track="Название трека" id="play" href="">Включить трек</a>

    Js

     $(document).on('click', '#play', function(e){ e.preventDefault(); var this = $(this); var trackName = this.attr('data-track'); // либо так var trackName = this.data('track'); this.toggleClass('playing'); if (this.hasClass('playing')) { document.title = "\f0dc - "+trackName; } else { document.title = trackName; } });
    • I use jQuery, but with this code all scripts stop working at all, some kind of conflict. And I can not insert the track title in js, but only in the link. - steep
    • Try again, there was a typo. - Alliswell
    • You need to somehow pass the track title link. Something like <a data-title="Track_name"> and write something in js. After correcting the typo anyway, the conflict. - steep
    • Updated the answer, take a look. - Alliswell 1:14 pm
    • Something with this line var this = $ (this), trackName = this.attr ('data-title'); when I delete, there is no conflict - steep