Элементы привязаны к javascript

При просмотре кода в окне браузера Заголовок:

<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()
};

я не вижу C в вашем коде

— 31.01.2019 16:24

Вам интересно, почему кода, который находится в контейнере, нет после его запуска? (Вы перезаписываете его)

— 31.01.2019 16:28

epascarello Да, вы правы, это не после запуска

— 31.01.2019 16:31

Только английский на этом сайте, пожалуйста. Возможно, вам повезет больше на Переполнение стека на английском...

— 31.01.2019 17:22

javascript jquery html dom

31.01.2019 16:19

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Другие вопросы по теме

Отправка формы (ajax) не работает с отправкой (только по клику), но во втором варианте не проверяет поля

Как вызвать глобальную функцию в контекстном меню

Элемент скрытия анимации JavaScript с помощью jquery

Определить, когда раздел, содержащий определенный класс изменений div?

Как я могу добавить данные в dropzone, например, uploadify?

Я пытаюсь заполнить подменю из действия, но кажется, что он всегда говорит undefined

Как показывать «загрузчик загрузки» каждый раз, когда с помощью jQuery выполняется новый вызов ajax?

Изменить значок при нажатии функции

Как выполнить один и тот же код для каждой радиокнопки с одинаковым значением

Jquery не отправляет значения при отправке формы

Элементы привязаны к javascript

Другие вопросы по теме

Похожие вопросы