如何让按钮改变 <h2> 标签

Question

如何让按钮改变 <h2> 标签

4

我是一名有用的助手，可以帮您进行翻译。以下是需要翻译的内容：

我有一个工作中的随机歌曲生成器，它有一个播放和暂停的按钮，以及一个随机歌曲的按钮。我是通过变量rand和s实现的，虽然这不是最好的方法，但它有效。当按下揭示按钮时，我希望能够揭示出这首歌曲，但我不知道如何去做，请问有人可以帮忙吗？

HTML：

<audio id="1st" >
        <source src="intervals/1st.mp3" type = "audio/mp3"/>
    </audio>

    <audio id="2nd" >
        <source src="intervals/2nd.mp3" type = "audio/mp3"/>
    </audio>

    <audio id="3rd">
        <source src="intervals/3rd.mp3" type= "audio/mp3"/>
    </audio>

     <audio id="4th">
        <source src="intervals/4th.mp3" type= "audio/mp3"/>
    </audio>

    <audio id="5th">
        <source src="intervals/5th.mp3" type= "audio/mp3"/>
    </audio>

    <audio id="6th">
        <source src="intervals/6th.mp3" type="audio/mp3" />
    </audio>

    <audio id="7th">
        <source src="intervals/7th.mp3" type="audio/mp3" />
    </audio>

    <button type="button" id="reveal">Reveal</button>
    <button type="button" id="playButton"></button>
    <button type="button" id="randomise"></button>

JavaScript：

var playButtonJS = document.getElementById('playButton');
var randomiseJS = document.getElementById('randomise');
var revealJS = document.getElementById("reveal");
var FstJS = document.getElementById('1st');
var SndJS = document.getElementById('2nd');
var TrdJS = document.getElementById('3rd');
var FOthJS = document.getElementById('4th');
var FIthJS = document.getElementById('5th');
var SIthJS = document.getElementById('6th');
var SEthJS = document.getElementById('7th');


var audioPlaying = [FstJS, SndJS, TrdJS,FOthJS, FIthJS, SIthJS, SEthJS];

var rand = audioPlaying[Math.floor(Math.random() * audioPlaying.length)];

playButtonJS.addEventListener('click', playOrPause, false);
randomiseJS.addEventListener('click', random, false);
revealJS.addEventListener('click', rev, false);

function random() {
    rand.pause();
    playButtonJS.style.backgroundImage = 'url(playbutton.svg)';
    var song = audioPlaying[Math.floor(Math.random() * audioPlaying.length)];
    playButtonJS.style.backgroundImage = 'url(pausebutton.png)';
    songf(song);
}

function songf(s) {
    rand.currentTime=0;
    rand = s;

    if (!s.paused && !s.ended) {
        s.pause();
        playButtonJS.style.backgroundImage = 'url(playbutton.svg)';
    }
    else {
        s.play();
        playButtonJS.style.backgroundImage = 'url(pausebutton.png)';
    }
}

function playOrPause() {
    if (!rand.paused && !rand.ended) {
        rand.pause();
        playButtonJS.style.backgroundImage = 'url(playbutton.svg)';
    }
    else {
        rand.play();
        playButtonJS.style.backgroundImage = 'url(pausebutton.png)';
    }
}

- Deps

你的意思是标签内的内容吗？ - Bhanuka Mahanama

如果选择的歌曲是song1，那么我希望h2标签显示为“歌曲1”。 - Deps

你正在错误地使用ID。这正是类发挥作用的典型示例！ - Roko C. Buljan

3个回答

0

var songNames = ["songName_1", "songName_2", "songName_3", "songName_4"];



function randomSong() {
  var songName = arguments[0][randomNum(0, songNames.length - 1)];
  document.getElementById("songName").innerHTML = songName;
}

document.getElementById("randomSong").addEventListener("click", function() {
  randomSong(songNames);
})


function randomNum(minNum, maxNum) {
  switch (arguments.length) {
    case 1:
      return parseInt(Math.random() * minNum + 1, 10);
      break;
    case 2:
      return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      break;
    default:
      return 0;
      break;
  }
}

<h2 id="songName"></h2>

<input id="randomSong" type="button" value="randomSong!" />

这是我理解的兄弟的意思，你的代码真的有点乱，如果有问题可以问我。

我有一个更好的解决方案，但现在我在工作中，稍后会发给你。

- peter

0

在处理音乐播放变化的任何位置添加以下代码行。将“songTitle”替换为相关的HTML标签ID，将歌曲名称替换为相关的名称。

document.getElementById("songTitle").innerHTML = "New song name";

https://www.w3schools.com/jsref/prop_html_innerhtml.asp

希望这能有所帮助。 :)

- Bhanuka Mahanama

我希望发生这件事，但文本更改取决于实际播放的歌曲。 - Deps

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sam · Accepted Answer

JQuery解决方案：

将rand变量的值赋为正在播放歌曲的索引数字，而不是从数组中选择的数据。或者创建一个名为“selectedindex”的中间变量。为什么？因为数字可以帮助您引用特定的数据。

然后决定如何向用户提供信息。想象一下，在每个歌曲标签上方放置一些标签<h2 id="name1">歌曲名称</h2>...<h2 id ="name6">...。最初将它们的样式设置为display:none; 。然后您可以执行类似以下的操作

function reveal () {
   $("#name+rand").style.display = "block";
   console.log('You are playing the song number', rand)
}

如果您更喜欢使用常见的容器/div/h2来提供信息，您可以用以下代码替换内部HTML内容：

$("#label").html('Song is the number: '+ selectedIndex);

不使用jQuery翻译：

document.getElementById("label").innerHTML = "Song is number" +      
String(selectedIndex);

或者使用数字从名称数组中给出歌曲的名称。

$("#label").html('Song is:'+ ArrayOfNames[selectedIndex]);

不使用jQuery翻译：

document.getElementById("label").innerHTML = "Song is" +    
ArrayOfNames[selectedIndex];

编辑：如果你要添加这类功能，我建议你使用JQuery。