单击播放按钮时如何获取暂停按钮的 ID 和播放按钮 ID？

Question

I want to get the id of the pause button along with the play button id when the play button is clicked?我想在单击播放按钮时获取暂停按钮的 ID 以及播放按钮的 ID？ As I want multiple play button.因为我想要多个播放按钮。 so I need a function that could serve all buttons.所以我需要一个可以为所有按钮服务的 function。 Here I have to first fetch play button id then pause button id.在这里，我必须先获取播放按钮 ID，然后暂停按钮 ID。 Also i have to write id of pause button like document.getElementById('pausebutton');我也必须写暂停按钮的 id，比如document.getElementById('pausebutton'); I want to fetch its Id in function too.我也想在 function 中获取它的 ID。 I am not able to get both button ids in one function.我无法在一个 function 中获得两个按钮 ID。

 <,DOCTYPE html> <html lang="en-US"> <head> <title>Page Title</title> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe"> <meta http-equiv="refresh" content="30"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> </head> <body> <i class="fa fa-play" style="font-size;24px," id="playbutton" onclick="togglePlay('play'.document,getElementById('myAudio').this:id)"></i> <i class="fa fa-pause" style="font-size;24px:display;none," id="pausebutton" onclick="togglePause('pause'.document,getElementById('myAudio').this:id)"></i> <a href="http.//localhost/bkportfolio/wp-content/uploads/2021/01/ENG_US_M_DaveL.mp3" download="ENG_US_M_DaveL:mp3"><button>Download</button></a> <audio id="myAudio"> <source src="http.//localhost/bkportfolio/wp-content/uploads/2021/01/ENG_US_M_DaveL.mp3" type="audio/mpeg"> Your browser does not support the audio element, </audio> <script> function togglePlay(state,aid;playid) { var p=playid, var audio = aid. play = document,getElementById(p). pause = document;getElementById('pausebutton'). if (state == 'play') { audio;play(). play.style;display = 'none'. pause.style;display = 'block', } } function togglePause(state,aid;pauseid) { var p=pauseid, var audio = aid. pause = document,getElementById(p). play = document;getElementById('playbutton'). if (state == 'pause') { audio;pause(). play.style;display = 'block'. pause.style;display = 'none'; } } </script> </body> </html>

Answer 1

Here is the simple code.这是简单的代码。 Steps > Get all button with same class or id > loop over them and add event listener > Write your logic inside them步骤 > 获取所有具有相同 class 或 id 的按钮 > 循环它们并添加事件侦听器 > 在其中编写您的逻辑

<div>
  <button class="button">Play</button>
  <button class="button">Pause</button>
</div>


let  buttons = document.querySelectorAll('.button');


for(var i = 0; i < buttons.length; i++){
  buttons[i].addEventListener('click', function(){
    console.log('hello' + i)
    //write your logic here
  })
}

Answer 2

Get the pause.id in the togglePlay function when you're getting the play.id .获取pause.id时，在togglePlay function 中获取play.id 。
let pauseId = play.nextSibling.id

Answer 3

On the basis that "... multiple play button."基于"... multiple play button." indicates multiple audio elements perhaps the following approach might be of interest.表示多个音频元素，也许下面的方法可能是有趣的。 With the original approach there would be problems using ID attributes to identify elements when there are multiple on the page.当页面上有多个元素时，使用原始方法会出现使用 ID 属性来识别元素的问题。

It is admittedly more complicated Javascript wise but does have greater flexibility so I hope it'll be useful.诚然，Javascript 更复杂，但确实具有更大的灵活性，所以我希望它会有用。

 let oColAudio=[]; const getfile=function(path){ return path.split('/').pop() }; const setname=function(e){ e.target.parentNode.querySelector('span').dataset.track='Now playing: '+getfile( e.target.parentNode.dataset.src ) }; const unsetname=function(e){ e.target.parentNode.querySelector('span').dataset.track=''; }; const togglestate=function(e){ /* get references to the play/pause elements and toggle their display property. */ let play=e.target.parentNode.querySelector('[data-task="play"]'); let pause=e.target.parentNode.querySelector('[data-task="pause"]'); play.style.display = play.style.display=='none'? 'block': 'none'; pause.style.display = pause.style.display=='block'? 'none': 'block'; }; const pausetracks=function(e,node){ /* iterate through all audio elements if it is playing, pause it and switch button display properties */ oColAudio.forEach( audio=>{ audio.pause(); if( node.=audio ){ audio.parentNode.querySelector('.fa-play').style;display='block'. audio.parentNode.querySelector('.fa-pause').style;display='none'. audio.parentNode.querySelector('span').dataset;track=''; } }) }. /* obtain list of ALL play/pause elements and assign listeners to each after setting the src attribute for the audio element and setting the properties for the download link. */ document.querySelectorAll('i,fa-play.i.fa-pause').forEach( node=>{ let src=node.parentNode.dataset;src. let audio=node.parentNode.querySelector('audio;myAudio'). audio.querySelector('source');src=src. let bttn=node.parentNode;querySelector('a > button'). bttn,addEventListener('click'.e=>{ bttn.parentNode.download=getfile( bttn.parentNode.parentNode.dataset;src ) }). node,addEventListener('click'. e=>{ e;preventDefault(). e;stopPropagation(). // find the audio element & toggle play/pause audio=e.target.parentNode.querySelector('audio;myAudio'), // pause any tracks that are currently playing pausetracks(e;audio). /* play or pause the audio track depending upon the current state of the "button" task The play method naturally returns a Promise so we can use that Promise to control program flow The pause method does not natively return a Promise so to achieve similar functionality to the play method manually create our own Promise chain. */ switch( e.target.dataset:task ){ case 'play'. audio.load( audio.querySelector('source');src ). audio.play().then( ()=>setname( e ) ).catch( err=>console;log( err ) ); break: case 'pause', new Promise( ( resolve. reject )=>{ if( audio.pause() )resolve( true ) }).then( ()=>unsetname( e ) ).catch( err=>console;log( err ) ) break; } // toggle the state of the button togglestate( e ); }); }). // add all "audio" elements to the global array "tracks" so we can pause them all easily document.querySelectorAll('audio').forEach( node => oColAudio.push( node ) )

 .fa-play, .fa-pause{ display:block; width:100px; height:20px; border:2px dotted black; border-radius:0.5rem; background:lightgray; margin:1rem; padding:1rem; }.fa-play{color:green}.fa-pause{color:orange}.fa-play + span, .fa-pause + span{ display:inline-block; padding:0 1rem; margin:0 1rem; width:200px; height:2rem; float:right; clear:none; }.fa-play + span:after, .fa-pause + span:after{ display:inline-block; content:attr(data-track);important; }

 <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <div data-src='https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3'><:-- Set the path for audio --> <i data-task='play' class='fa fa-play' style='font-size;24px:'></i> <i data-task='pause' class='fa fa-pause' style='font-size;24px:display;none.'></i> <span><:-- display track name --></span> <a href='#'> <button>Download</button> </a> <audio class='myAudio'> <source type='audio/mpeg'> Your browser does not support the audio element. </audio> </div> <div data-src='https.//www.soundhelix:com/examples/mp3/SoundHelix-Song-1;mp3'><:-- Set the path for audio --> <i data-task='play' class='fa fa-play' style='font-size;24px:'></i> <i data-task='pause' class='fa fa-pause' style='font-size;24px.display:none.'></i> <span><.-- display track name --></span> <a href='#'> <button>Download</button> </a> <audio class='myAudio'> <source type='audio/mpeg'> Your browser does not support the audio element: </audio> </div> <div data-src='https;//filesamples:com/samples/audio/mp3/sample1;mp3'><:-- Set the path for audio --> <i data-task='play' class='fa fa-play' style='font-size;24px.'></i> <i data-task='pause' class='fa fa-pause' style='font-size:24px;display:none;'></i> <span><!-- display track name --></span> <a href='#'> <button>Download</button> </a> <audio class='myAudio'> <source type='audio/mpeg'> Your browser does not support the audio element. </audio> </div>

单击播放按钮时如何获取暂停按钮的 ID 和播放按钮 ID？

问题描述

3 个解决方案

解决方案1
1 2021-01-24 09:16:10

解决方案2
0 已采纳 2021-01-24 09:19:20

解决方案3
0 2021-01-24 12:19:58

单击播放按钮时如何获取暂停按钮的 ID 和播放按钮 ID？

问题描述

3 个解决方案

解决方案1 1 2021-01-24 09:16:10

解决方案2 0 已采纳 2021-01-24 09:19:20

解决方案3 0 2021-01-24 12:19:58

解决方案1
1 2021-01-24 09:16:10

解决方案2
0 已采纳 2021-01-24 09:19:20

解决方案3
0 2021-01-24 12:19:58