Question

在浏览器窗口标题中查看代码时：

<h1>Music</h1>
<h2>w</h2>
<h2>a</h2>
<h2>s</h2>
<h2>d</h2>
<h2>z</h2>
<h2>x</h2>
<h2>C</h2>

没有出现在页面上，我不明白为什么？我编写了不同版本的代码，我在js中通过element.innerHTML等引用了它们，元素出现了，但是声音却没有。有人可以帮忙吗？在js中需要这些元素的数组吗？预先感谢您的答复。

  </head>
  <body id='audios'>
  <div class="container">
       <h1>Music</h1>
      <h2>Q</h2>
      <button id="play">Play</button>
      <button id="pause">Pause</button>     
      <h2>W</h2>
      <button id="play">Play</button>
      <button id="pause">Pause</button>     
      <h2>E</h2>
      <button id="play">Play</button>
      <button id="pause">Pause</button> 
      <h2>A</h2>
      <button id="play">Play</button>
      <button id="pause">Pause</button>

//$(document).ready(function(){
 //  $("h1").html("Hello world!")
 //});

var addresses = ["https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3", "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3",  "https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3"];
var body = document.getElementById("audios");
let audiohtml = [];
addresses.map((address, i)=> {
  audiohtml.push(`<audio id='myAudio${i}' src=${address} preload='auto'></audio>

<button onClick=togglePlay(${i})>Play</button>
<button onClick=togglePause(${i})>Pause</button>`)
});
body.innerHTML= audiohtml;
function togglePlay(i) {
    var myAudio = document.getElementById(`myAudio${i}`);
    myAudio.play();
};
function togglePause(i) {
    var myAudio = document.getElementById(`myAudio${i}`);
    myAudio.pause()
};

项目绑定到javascript

0 个答案: