Jukebox.random不是函数“，随机按钮不起作用

Question

我正在制作面向对象的自动点唱机，但由于某种原因，当我点击它时，我的随机播放按钮无效。它应该从我的歌曲列表中播放一首随机歌曲，但由于某种原因它不起作用。有人可以解释一下我做错了吗？

// defines the Jukebox object
var Juke = function(songList) {

  // the code for what happens when you create a Jukebox object
  //  goes here
  //sets list of songs by a tag elements in html
  //initialize songNumber to 0
  //initialize currentSong to the songList's songnumber
  //initialize timeinsong to 0

  this.songList = document.getElementById('playlist').getElementsByTagName('A'),
    // the code for playing a song would go here
    this.songNumber = 0,
    this.currentSong = this.songList[this.songNumber],
    this.timeInSong = 0,
    //function to play jukebox
    this.play = function() {
      // if pl
      if (document.getElementById('play').classList.contains('fa-play-circle-o')) {
        document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
        document.getElementById('play').classList.remove('fa-play-circle-o');
        document.getElementById('play').classList.add('fa-pause-circle-o');
        document.getElementById('player').currentTime = this.timeInSong;
        var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(0deg); -webkit-transition: -webkit-transform 2s ease;'; //
        document.getElementById('vinyl').setAttribute('style', css)
        document.getElementById('player').play();
        document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;

      } else {
        this.timeInSong = document.getElementById('player').currentTime
        document.getElementById('player').pause();
        document.getElementById('play').classList.remove('fa-pause-circle-o');
        document.getElementById('play').classList.add('fa-play-circle-o');
      }
    },
    this.next = function() {
      // creates a new Jukebox object method
      // this play the next song in the array and removes the li class and adds to the  next element in the array
      document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight')
      this.songNumber++;
      //incrementing song number by one
      if (this.songNumber == this.songList.length) {
        // if the song number is equal to the last element in the arrary start from 0
        this.songNumber = 0;
      }
      document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
      // add highlight to li song number
      this.currentSong = this.songList[this.songNumber]
      //currrent song is equal to this song number
      document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
      if (document.getElementById('play').classList.contains('fa-pause-circle-o')) {
        document.getElementById('player').play();
      }
      document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
      // setting title of the song to current song name
    },
    this.stop = function() {
      // time of song is -
      this.timeInSong = 0;
      document.getElementById('seekbar').setAttribute('value', 0);
      // adding pause to the player
      document.getElementById('player').pause();
      // removing pause class
      document.getElementById('play').classList.remove('fa-pause-circle-o');
      document.getElementById('play').classList.add('fa-play-circle-o');
    },
    this.previous = function() {
      // removing song number highlight class
      document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight');
      //decrementing song number by 1
      this.songNumber--;
      // if song number isless than 0 play the last one
      if (this.songNumber <= 0) {
        this.songNumber = this.songList.length - 1;
      }
      document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
      // adding highlight to current song
      this.currentSong = this.songList[this.songNumber]
      // current song is this song number
      document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
      console.log(document.getElementById('player').getAttribute("src"));
      document.getElementById('player').play();
      document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
      // song tittle
    },
    this.addSong = function() {
      // method to add song
      var ul = document.getElementById('playlist')
      // url
      var url = document.getElementById('url').value;
      var name = document.getElementById('title').value;
      //name is equal to title value
      if (url != "" && name != "") {
        //i furl and name are not empty
        var li = document.createElement('li');
        // creting new li element
        var atag = document.createElement('a');
        atag.setAttribute('href', url);
        atag.innerHTML = name;
        var but = document.createElement('button');
        but.innerHTML = "";
        but.setAttribute('onclick', "Jukebox.delete(this)");
        // appending user value
        li.appendChild(atag);
        li.appendChild(but).classList.add('delete', 'fa', 'fa-times');
        ul.appendChild(li);
        document.getElementById('url').value = '';
        document.getElementById('title').value = '';
      } else {
        alert("Error You haven't Filled in A Form Item")
      }
    },
    this.delete = function(n) {
      if (document.getElementById('player').src == n.parentNode.getElementsByTagName('a')[0].getAttribute('href')) {
        document.getElementById('player').src = '';
        document.getElementById('player').pause();
        this.next();
      }
      n.parentNode.parentNode.removeChild(n.parentNode);
      this.songList = document.getElementById('playlist').getElementsByTagName('A');
    },
    this.preparingToFastForward = function() {
      document.getElementById('player').currentTime += document.getElementById('player').currentTime + 100 < document.getElementById('player').duration ? 100 : 0;
    },
    this.backDatAssUp = function() {
      document.getElementById('player').currentTime -= document.getElementById('player').currentTime - 100 > 0 ? 100 : 0;
    },
    this.listener = function() {
      document.getElementById('player').addEventListener("timeupdate", function() {
        var currentTime = document.getElementById('player').currentTime;
        var duration = document.getElementById('player').duration;
        if (currentTime / duration != 1) {
          document.getElementById('seekbar').setAttribute('value', currentTime / duration);
          var deg = document.getElementById('player').currentTime % 2;
          deg = Math.floor(deg % 2) > 0 ? 170 : -170;
          console.log(deg)
          var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(' + deg + 'deg); -webkit-transition: -webkit-transform 2s ease;';
          document.getElementById('vinyl').setAttribute('style', css)
        } else {
          Jukebox.next();
        }
      });
    }
}

this.random = function() {

  var randomIndex = Math.floor(this.songList.length * Math.random());
  this.currentSong = randomIndex;

  randomIndex.play();


}

function setVolume() {
  var mediaClip = document.getElementById("player");
  mediaClip.volume = document.getElementById("volume1").value;

}
var Jukebox = new Juke(document.getElementById('playlist'));

<body onload="Jukebox.listener()">
  <input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='1'>
  <div class='container'>
    <div class='recordPlayer'>
      <img id='vinyl' class='recordPic' src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRpCviLXje4Wve8WwujEm2luErz6VbuoVFkNW785Kxuap6O1Gpt0eXobRk'>
      <img class='recPlayer' src="https://c1.staticflickr.com/3/2260/3694333300_37bd1ff316.jpg">
      <img class='recArm' src="arm.png">
      <div class='controls'>
        <span class='titleTitle'>Currently Playing:<span id='songTitle'></span></span><br>
        <audio id='player' src='http://www.archive.org/download/bolero_69/Bolero.mp3'>
            </audio>

        <progress id="seekbar" value="0" max="1"></progress><br>

        <button id='back' class='fa fa-backward' onclick="Jukebox.backDatAssUp()"></button>
        <button id='play' class='fa fa-play-circle-o' onclick="Jukebox.play()"></button>
        <button id='stop' class='fa fa-stop-circle-o' onclick="Jukebox.stop()"></button>
        <button id='previous' class='fa fa-step-backward' onclick="Jukebox.previous()"></button>
        <button id='next' class='fa fa-step-forward' onclick="Jukebox.next()"></button>
        <button id='back' class='fa fa-forward' onclick="Jukebox.preparingToFastForward()"></button>
        <button id='random' onclick="Jukebox.random()"> Rnadom song</button>
      </div>
    </div>

    <div class='listOsongs'>

      <ol id="playlist">
        <h4>Up Next</h4>

        <li>
          <a id="song" href="http://www.archive.org/download/bolero_69/Bolero.mp3">
                Ravel Bolero
              </a>
          <button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
        </li>
        <li>
          <a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">
                Moonlight Sonata - Beethoven
              </a>
          <button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
        </li>
        <li>
          <a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">
                Canon in D Pachabel
              </a>
          <button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
        </li>
        <li>
          <a href="https://cf-media.sndcdn.com/MzhGaP8pde4q.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vTXpoR2FQOHBkZTRxLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODI2Mzh9fX1dfQ__&Signature=SyWy~ghuKuTgWmoMWvnGgA~HArGVxjKkiD61UUENA4Ke-aUgivz4ANDUmNW68-AOE-o-7X~MYn8ObL4AonSuVsPz3LbGPQcmxD-3N14qpCFEx3F4zwZh43v1-aDzlypCRtY6IaEzun9NksxbABrqqL~BokIKSH0U6yxJmEmKq98e8PrUO24IcDHiSZZlviYI-bRRtdsFXxM1bxbYh-s32Rkoihj~uxTOGVDwAADwexg5VT2Z8xAuMj2NJ9vMCYkydhmZGOG4G~SQ3lZE3ODyEtD5Vf6myOMGjhWIq9qss~u6eHJbrQ2AB~oon-44WIqEknjWT63NP-O-WyHCBmAf4w__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
                Canon in D Pachabel
              </a>
          <button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
        </li>
        <li>
          <a href="https://cf-media.sndcdn.com/zYh4wOY76Fez.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20velloNHdPWTc2RmV6LjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODMzMzN9fX1dfQ__&Signature=nIZ6247SDTQ5LY5pGrdvJkxi3wektW8Kp2uRxOlCg3TthYAq6FeYiu0TJJEdQNNPF8y5WCvbJUi4G553RMwn5xLpxkZR0s0f6B0Fw4m~T18zvic1YH~kRxRVy1ropC2NPax4aI9yCWdKpgFmPNKz21lhFIXoa9F6hnIHaQT0jdFv9eNnjv8CN024j5RnfbFaT1vSzu0AnguXqMlm4uJS8XD~XOT1Y62X4qHzCp685Ahf~Lm9LyhECBXK3nrVF~3QIsxwdYp73Epui29eZsd~7LVCeLwQabU4kvXL9ntTZFft9-JiqLZH4pkmWmSTWlN3Dw~c8dVlZQihruYa81qVPg__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
                Canon in D Pachabel
              </a>
          <button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
        </li>

      </ol>

Answer 1

您遇到的主要问题是您在random构造函数之外定义了Juke函数。现在出现了一个不同的错误，你尝试在一个数字上调用play方法 - 但我不知道你在那里做了什么。

＆＃13;

＆＃13;

// defines the Jukebox object
var Juke = function(songList) {

  // the code for what happens when you create a Jukebox object
  //  goes here
  //sets list of songs by a tag elements in html
  //initialize songNumber to 0
  //initialize currentSong to the songList's songnumber
  //initialize timeinsong to 0

  this.songList = document.getElementById('playlist').getElementsByTagName('A'),
    // the code for playing a song would go here
    this.songNumber = 0,
    this.currentSong = this.songList[this.songNumber],
    this.timeInSong = 0,
    //function to play jukebox
    this.play = function() {
      // if pl
      if (document.getElementById('play').classList.contains('fa-play-circle-o')) {
        document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
        document.getElementById('play').classList.remove('fa-play-circle-o');
        document.getElementById('play').classList.add('fa-pause-circle-o');
        document.getElementById('player').currentTime = this.timeInSong;
        var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(0deg); -webkit-transition: -webkit-transform 2s ease;'; //
        document.getElementById('vinyl').setAttribute('style', css)
        document.getElementById('player').play();
        document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;

      } else {
        this.timeInSong = document.getElementById('player').currentTime
        document.getElementById('player').pause();
        document.getElementById('play').classList.remove('fa-pause-circle-o');
        document.getElementById('play').classList.add('fa-play-circle-o');
      }
    },
    this.next = function() {
      // creates a new Jukebox object method
      // this play the next song in the array and removes the li class and adds to the  next element in the array
      document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight')
      this.songNumber++;
      //incrementing song number by one
      if (this.songNumber == this.songList.length) {
        // if the song number is equal to the last element in the arrary start from 0
        this.songNumber = 0;
      }
      document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
      // add highlight to li song number
      this.currentSong = this.songList[this.songNumber]
      //currrent song is equal to this song number
      document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
      if (document.getElementById('play').classList.contains('fa-pause-circle-o')) {
        document.getElementById('player').play();
      }
      document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
      // setting title of the song to current song name
    },
    this.stop = function() {
      // time of song is -
      this.timeInSong = 0;
      document.getElementById('seekbar').setAttribute('value', 0);
      // adding pause to the player
      document.getElementById('player').pause();
      // removing pause class
      document.getElementById('play').classList.remove('fa-pause-circle-o');
      document.getElementById('play').classList.add('fa-play-circle-o');
    },
    this.previous = function() {
      // removing song number highlight class
      document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight');
      //decrementing song number by 1
      this.songNumber--;
      // if song number isless than 0 play the last one
      if (this.songNumber <= 0) {
        this.songNumber = this.songList.length - 1;
      }
      document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
      // adding highlight to current song
      this.currentSong = this.songList[this.songNumber]
      // current song is this song number
      document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
      console.log(document.getElementById('player').getAttribute("src"));
      document.getElementById('player').play();
      document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
      // song tittle
    },
    this.addSong = function() {
      // method to add song
      var ul = document.getElementById('playlist')
      // url
      var url = document.getElementById('url').value;
      var name = document.getElementById('title').value;
      //name is equal to title value
      if (url != "" && name != "") {
        //i furl and name are not empty
        var li = document.createElement('li');
        // creting new li element
        var atag = document.createElement('a');
        atag.setAttribute('href', url);
        atag.innerHTML = name;
        var but = document.createElement('button');
        but.innerHTML = "";
        but.setAttribute('onclick', "Jukebox.delete(this)");
        // appending user value
        li.appendChild(atag);
        li.appendChild(but).classList.add('delete', 'fa', 'fa-times');
        ul.appendChild(li);
        document.getElementById('url').value = '';
        document.getElementById('title').value = '';
      } else {
        alert("Error You haven't Filled in A Form Item")
      }
    },
    this.delete = function(n) {
      if (document.getElementById('player').src == n.parentNode.getElementsByTagName('a')[0].getAttribute('href')) {
        document.getElementById('player').src = '';
        document.getElementById('player').pause();
        this.next();
      }
      n.parentNode.parentNode.removeChild(n.parentNode);
      this.songList = document.getElementById('playlist').getElementsByTagName('A');
    },
    this.preparingToFastForward = function() {
      document.getElementById('player').currentTime += document.getElementById('player').currentTime + 100 < document.getElementById('player').duration ? 100 : 0;
    },
    this.backDatAssUp = function() {
      document.getElementById('player').currentTime -= document.getElementById('player').currentTime - 100 > 0 ? 100 : 0;
    },
    this.listener = function() {
      document.getElementById('player').addEventListener("timeupdate", function() {
        var currentTime = document.getElementById('player').currentTime;
        var duration = document.getElementById('player').duration;
        if (currentTime / duration != 1) {
          document.getElementById('seekbar').setAttribute('value', currentTime / duration);
          var deg = document.getElementById('player').currentTime % 2;
          deg = Math.floor(deg % 2) > 0 ? 170 : -170;
          console.log(deg)
          var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(' + deg + 'deg); -webkit-transition: -webkit-transform 2s ease;';
          document.getElementById('vinyl').setAttribute('style', css)
        } else {
          Jukebox.next();
        }
      });
    }
  this.random = function() {

    var randomIndex = Math.floor(this.songList.length * Math.random());
    this.currentSong = randomIndex;

    randomIndex.play();


  }

}



function setVolume() {
  var mediaClip = document.getElementById("player");
  mediaClip.volume = document.getElementById("volume1").value;

}
var Jukebox = new Juke(document.getElementById('playlist'));

＆＃13;

<body onload="Jukebox.listener()">
  <input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='1'>
  <div class='container'>
    <div class='recordPlayer'>
      <img id='vinyl' class='recordPic' src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRpCviLXje4Wve8WwujEm2luErz6VbuoVFkNW785Kxuap6O1Gpt0eXobRk'>
      <img class='recPlayer' src="https://c1.staticflickr.com/3/2260/3694333300_37bd1ff316.jpg">
      <img class='recArm' src="arm.png">
      <div class='controls'>
        <span class='titleTitle'>Currently Playing:<span id='songTitle'></span></span><br>
        <audio id='player' src='http://www.archive.org/download/bolero_69/Bolero.mp3'>
            </audio>

        <progress id="seekbar" value="0" max="1"></progress><br>

        <button id='back' class='fa fa-backward' onclick="Jukebox.backDatAssUp()"></button>
        <button id='play' class='fa fa-play-circle-o' onclick="Jukebox.play()"></button>
        <button id='stop' class='fa fa-stop-circle-o' onclick="Jukebox.stop()"></button>
        <button id='previous' class='fa fa-step-backward' onclick="Jukebox.previous()"></button>
        <button id='next' class='fa fa-step-forward' onclick="Jukebox.next()"></button>
        <button id='back' class='fa fa-forward' onclick="Jukebox.preparingToFastForward()"></button>
        <button id='random' onclick="Jukebox.random()"> Rnadom song</button>
      </div>
    </div>

    <div class='listOsongs'>

      <ol id="playlist">
        <h4>Up Next</h4>

        <li>
          <a id="song" href="http://www.archive.org/download/bolero_69/Bolero.mp3">
                Ravel Bolero
              </a>
          <button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
        </li>
        <li>
          <a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">
                Moonlight Sonata - Beethoven
              </a>
          <button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
        </li>
        <li>
          <a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">
                Canon in D Pachabel
              </a>
          <button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
        </li>
        <li>
          <a href="https://cf-media.sndcdn.com/MzhGaP8pde4q.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vTXpoR2FQOHBkZTRxLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODI2Mzh9fX1dfQ__&Signature=SyWy~ghuKuTgWmoMWvnGgA~HArGVxjKkiD61UUENA4Ke-aUgivz4ANDUmNW68-AOE-o-7X~MYn8ObL4AonSuVsPz3LbGPQcmxD-3N14qpCFEx3F4zwZh43v1-aDzlypCRtY6IaEzun9NksxbABrqqL~BokIKSH0U6yxJmEmKq98e8PrUO24IcDHiSZZlviYI-bRRtdsFXxM1bxbYh-s32Rkoihj~uxTOGVDwAADwexg5VT2Z8xAuMj2NJ9vMCYkydhmZGOG4G~SQ3lZE3ODyEtD5Vf6myOMGjhWIq9qss~u6eHJbrQ2AB~oon-44WIqEknjWT63NP-O-WyHCBmAf4w__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
                Canon in D Pachabel
              </a>
          <button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
        </li>
        <li>
          <a href="https://cf-media.sndcdn.com/zYh4wOY76Fez.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20velloNHdPWTc2RmV6LjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODMzMzN9fX1dfQ__&Signature=nIZ6247SDTQ5LY5pGrdvJkxi3wektW8Kp2uRxOlCg3TthYAq6FeYiu0TJJEdQNNPF8y5WCvbJUi4G553RMwn5xLpxkZR0s0f6B0Fw4m~T18zvic1YH~kRxRVy1ropC2NPax4aI9yCWdKpgFmPNKz21lhFIXoa9F6hnIHaQT0jdFv9eNnjv8CN024j5RnfbFaT1vSzu0AnguXqMlm4uJS8XD~XOT1Y62X4qHzCp685Ahf~Lm9LyhECBXK3nrVF~3QIsxwdYp73Epui29eZsd~7LVCeLwQabU4kvXL9ntTZFft9-JiqLZH4pkmWmSTWlN3Dw~c8dVlZQihruYa81qVPg__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
                Canon in D Pachabel
              </a>
          <button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
        </li>

      </ol>

＆＃13;

＆＃13;

＆＃13;