如何解决这个错误..。对象数据显示在控制台中，但resetValue函数出现了错误。

Question

Index.html我试图从对象读取数据，但我发现它不能正常工作。seekbar也给出了空错误。图像和歌曲是本地存储的，我正在尝试访问它。

<div class="music-player">
      <div class="song">
        <div class="current-song-image"></div>
        <div class="current-song-name">&ltSong Name&gt</div>
        <div class="current-song-artist">Song Artist Name</div>
      </div>
      <!-- song playing bar -->
      <div class="song-seek-line">
        <div class="curr-time">00:00</div>
        <input
          type="range"
          min="1"
          max="100"
          value="0"
          class="seek-bar"
          onchange="jumpTo()"
        />
        <div class="end-time">00:00</div>
      </div>
      <!-- volume control bar -->
      <div class="volume-control">
        <i class="fa fa-volume-down volume-down"></i>
        <input
          type="range"
          min="1"
          max="100"
          value="99"
          class="volume-bar"
          onchange="volume()"
        />
        <i class="fa fa-volume-up volume-up"></i>
      </div>
      <!-- song control buttons -->
      <div class="playing-buttons">
        <div class="prev-song-button" onclick="prevSong()">
          <i class="fa fa-step-backward fa-2x"></i>
        </div>
        <div class="song-play-pause-button" onclick="PlayPauseSong()">
          <i class="fa fa-play-circle fa-5x"></i>
        </div>
        <div class="next-song-button" onclick="nextSong()">
          <i class="fa fa-step-forward fa-2x"></i>
        </div>
      </div>
    </div>

Index.js

    let song_num = 0;
   let currentlySongPlaying = false;
   let changeTimer;
   
   let songlist = [
      {
         name: "Khaab",
         artist:"Akhil",
         image: 'images/khaab_song_image.jpg',
         songPath: "songs/khaab.mp3"
      
      },

   ];
   
   // console.log(songlist[2]);      // object created successfully
   function loadSong(song_num){
      clearInterval(changeTimer);
      resetValues();
      
      document.createElement('audio').src = songlist[song_num].songPath;
      document.createElement('audio').load();
      console.log(songlist[song_num].image);
      console.log(songlist[song_num].name);
      console.log(songlist[song_num].artist);
      document.querySelector('.current-song-image').style.backgoundImage = "url(" + songlist[song_num].image + ")";
      document.querySelector('.current-song-name').textContent = songlist[song_num].name;
      document.querySelector('.current-song-artist').textContent = songlist[song_num].artist;
   
      changeTimer = setInterval(seekUpdatedTime,1000);
      document.createElement('audio').addEventListener("songFinished",nextSong);
   }
   
   function resetValues(){
         document.querySelector('.curr-time').textContent = "00:00";
         document.querySelector('.end-time').textContent = "00:00";
         document.querySelector('.seek-bar').value = 0;
   }
   
   function PlayPauseSong(){
      if(!currentlySongPlaying) playSong();
      else pauseSong();
   }
   
   function playSong(){
      document.createElement('audio').play();
      currentlySongPlaying = true;
      document.querySelector('.song-play-pause-button').innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
   }
   
   function pauseSong(){
      document.createElement('audio').pause();
      currentlySongPlaying = false;
      document.querySelector('.song-play-pause-button').innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';
   }
   
   function nextSong(){
      if(song_num<songlist.length-1){
         song_num+=1;
      }else{
         song_num=0;
      }
      loadSong(song_num);
      playSong();
   }
   
   function prevSong(){
      if(song_num>0){
         song_num-=1;
      }else{
         song_num = songlist.length-1;
      }
      loadSong(song_num);
      playSong();
   }
   
   function jumpTo(){
      jumpto = document.createElement('audio').duration * (document.querySelector('.seek-bar').value / 100);
      document.createElement('audio').currentTime = jumpto;
   }
   
   function volume(){
      document.createElement('audio').volume = document.querySelector('.volume-bar').value/100;
   }
   
   function seekUpdatedTime(){
      let seekPosition = 0;
      if(!isNaN(document.createElement('audio').duration)){
         seekPosition = document.createElement('audio').currentTime*(100/document.createElement('audio').duration);
         document.querySelector('.seek-bar').value = seekPosition;
   
         let currentSongMinLeft = Math.floor(document.createElement('audio').currentTime/60);
         let currentSongSecLeft = Math.floor(document.createElement('audio').currentTime - currentSongMinLeft * 60);
         let SongDurationMin = Math.floor(document.createElement('audio').duration/60);
         let SongDurationSec = Math.floor(document.createElement('audio').duration - SongDurationMin * 60);
   
         if(currentSongMinLeft<10) 
            currentSongMinLeft = "0"+currentSongMinLeft;
         if(currentSongSecLeft<10)
            currentSongSecLeft = "0"+currentSongSecLeft;
         if(SongDurationMin<10)
            SongDurationMin = "0"+SongDurationMin;
         if(SongDurationSec<10)
            SongDurationSec = "0"+SongDurationSec;
   
         currSongTime.textContent = currentSongMinLeft+":"+currentSongSecLeft;
         currSongEndTime.textContent = SongDurationMin+":"+SongDurationSec;
      }
   }
   
   loadSong(song_num);

在index.js中，resetValues()函数中的uncaught查询选择器为null之类的错误。我试过所有可能的thing..but没有得到它。有人能帮上忙吗。

Answer 1

尝试在满载事件中运行您的代码：

window.onload = function() 
   loadSong(song_num);
};

或者将您的代码放在<body>的末尾，以确保它在元素创建之后运行。