每次点击更改文本

Question

我不太懂编码，但这应该很简单：用户点击 div 播放数组中的随机音频文件。这样可行。现在我确实需要显示音轨的数量（比如“1 out of 5”），由于某种原因，我似乎无法完成这项工作。我不在乎它是按钮还是段落，反正我是在 webflow 中设置样式，我只需要在每次点击时更新文本。

我做错了什么？这是我的代码：

var audio = new Audio();
var audiolist = new Array('https://res.cloudinary.com/dvugxz59z/video/upload/v1621504645/BatShevaAudio/chiaki_tpast4.mp3',
  'https://res.cloudinary.com/dvugxz59z/video/upload/v1621504643/BatShevaAudio/sean_mzegyf.mp3',
  'https://res.cloudinary.com/dvugxz59z/video/upload/v1621504636/BatShevaAudio/yoni_z4suqd.mp3',
  'https://res.cloudinary.com/dvugxz59z/video/upload/v1621504636/BatShevaAudio/Billy_x8srx0.mp3',
  'https://res.cloudinary.com/dvugxz59z/video/upload/v1621504627/BatShevaAudio/Matan_sj77wi.mp3');

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
}

function play() {
  if (audio.duration > 0 && !audio.paused) {
    audio.pause();
  }
  let rndnumber = getRandomInt(0, 4);

  audio.src = audiolist[rndnumber];
  audio.play();
  document.getElementById("audioNumber").innnerHTML = rndnumber;
}

<button onclick="play()" id="rndnumber"></button>

Answer 1

没有 HTML 个带有“audioNumber”id 的可见元素！将 DIV 与该 id 放在一起，它将起作用。

Answer 2

你不仅要使用textContent，还要在play()函数

中使用正确的document.getElementById中的id

请检查下面的代码片段，它正在运行并显示按钮数组中的歌曲索引。

var audio = new Audio();
var audiolist = new Array('https://res.cloudinary.com/dvugxz59z/video/upload/v1621504645/BatShevaAudio/chiaki_tpast4.mp3',
  'https://res.cloudinary.com/dvugxz59z/video/upload/v1621504643/BatShevaAudio/sean_mzegyf.mp3',
  'https://res.cloudinary.com/dvugxz59z/video/upload/v1621504636/BatShevaAudio/yoni_z4suqd.mp3',
  'https://res.cloudinary.com/dvugxz59z/video/upload/v1621504636/BatShevaAudio/Billy_x8srx0.mp3',
  'https://res.cloudinary.com/dvugxz59z/video/upload/v1621504627/BatShevaAudio/Matan_sj77wi.mp3');

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
}

function play() {
  if (audio.duration > 0 && !audio.paused) {
    audio.pause();
  }
  let rndnumber = getRandomInt(0, 4);

  audio.src = audiolist[rndnumber];
  audio.play();
  document.getElementById("rndnumber").textContent = rndnumber;
}

<button onclick="play()" id="rndnumber"></button>

每次点击更改文本

Change text on each click

html

javascript

button