javascript - 如何让一个按钮改变一个<h2>标签

Question

我有一个工作的随机歌曲生成器，它有一个播放和暂停按钮，以及一个随机播放歌曲的按钮。我通过 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)';
    }
}

Answer 1

JQuery 解决方案:

为您的 rand 变量分配您正在播放的歌曲索引的数值，而不是从数组中选择的数据的值。或者将中间变量设置为“selectedindex”。 为什么？因为数字可以帮助您在这里引用特定数据。

然后决定您希望如何向用户提供信息。 想象一下，你放了一些标签 <h2 id="name1">Name of the song</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。