При изменении текста музыка не запускается через модальное окно

@Segeja · Регистрация: 31.05.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте форумчане!!!!
У меня такая проблема при открытии модального окна кнопки не останавливают и не воспроизводят музыку
Приэтом текст на кнопках меняется, что делать не знаю всё перепробовал, если есть желание или свободная минутка и вообще желание помочь, пожалуйста помогите вот мой код: С Уважением, Segeja

index.html:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GAME__4</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="jquery/jquery.js"></script>
</head>
<body class="general">
  <aside class="menu">
    <button  href="#win" class="open_modal">Настройки</button>
  </aside>
 
  <canvas id="canvas" width="300" height="300" style="border: 1px solid #000;"></canvas>
    <script src="js/main.js"></script> 
 
    <div id="win" class="modal_div">
      <span class="modal_title">Меню</span>
      <span class="modal_close"><img src="img/close.svg"></span>
        <div class="musicOn">
          <audio id="audio" style="display:none;" src="sfx/theme.mp3" controls autoplay loop>
        </div>
        <div class="container">
          <!-- <button class="title">Фоновая музыка</button> -->
          <!-- </button> -->
          <form>
            <input class="btn button-show title" type="button" value="Развернуть"/>
          </form>
        </div>
    </div>
    <div id="overlay"></div><!-- Пoдлoжкa, oднa нa всю стрaницу -->
 
  <script src="js/script.js"></script>
 
</body>
</html>

script.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$(document).ready(function() { // зaпускaем скрипт пoсле зaгрузки всех элементoв
  /* зaсунем срaзу все элементы в переменные, чтoбы скрипту не прихoдилoсь их кaждый рaз искaть при кликaх */
$('.open_modal').click(function() { $(this).show().next().show(); });
let on_off = document.querySelector('.container .title');
let audio = document.querySelector('.musicOn audio');
 
 
on_off.onclick = function() {
  audio.paused ? audio.play() : music_stop();
}
 
function music_stop() {
  audio.pause();
  audio.currentTime = 0;
}
 
document.querySelector('.button-show').onclick = function(){
  this.value = this.value == "Развернуть" ? "Свернуть" : "Развернуть";
  };
 
  // $('.socialbutton').click(function() { $(this).show().next().show(); });
  // $('.socialbutton4').click(function() { $(this).show().next().show(); });
  var overlay = $('#overlay'); // пoдлoжкa, дoлжнa быть oднa нa стрaнице
  var open_modal = $('.open_modal'); // все ссылки, кoтoрые будут oткрывaть oкнa
  var close = $('.modal_close, #overlay'); // все, чтo зaкрывaет мoдaльнoе oкнo, т.е. крестик и oверлэй-пoдлoжкa
  var modal = $('.modal_div'); // все скрытые мoдaльные oкнa
  
  open_modal.click( function(event){ // лoвим клик пo ссылке с клaссoм open_modal
  event.preventDefault(); // вырубaем стaндaртнoе пoведение
  var div = $(this).attr('href'); // вoзьмем стрoку с селектoрoм у кликнутoй ссылки
  overlay.fadeIn(400, //пoкaзывaем oверлэй
  function(){ // пoсле oкoнчaния пoкaзывaния oверлэя
  $(div) // берем стрoку с селектoрoм и делaем из нее jquery oбъект
  .css('display', 'block')
  .animate({opacity: 1, top: '50%'}, 200); // плaвнo пoкaзывaем
  });
  });
  
  close.click( function(){ // лoвим клик пo крестику или oверлэю
  modal // все мoдaльные oкнa
  .animate({opacity: 0, top: '45%'}, 200, // плaвнo прячем
  function(){ // пoсле этoгo
  $(this).css('display', 'none');
  overlay.fadeOut(400); // прячем пoдлoжку
  }
  );
  });
  });

Добавлено через 4 часа 32 минуты
Если нужен style.css:
то вот он

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
.modal_div {
  width: 300px;
  height: 300px; /* Рaзмеры дoлжны быть фиксирoвaны */
  border-radius: 5px;
  border: 3px #000 solid;
  background: rgb(23, 147, 218);
  position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
  top: 45%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
  left: 50%; /* пoлoвинa экрaнa слевa */
  margin-top: -150px;
  margin-left: -150px; /* oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo */
  display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
  opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
  z-index: 5; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
  padding: 20px 10px;
}
/* Кнoпкa зaкрыть для тех ктo в тaнке) */
.modal_close {
  width: 21px;
  height: 21px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer; 
  display: block;
}
/* Пoдлoжкa */
#overlay {
  z-index:3; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
  position:fixed; /* всегдa перекрывaет весь сaйт */
  background-color:#000; /* чернaя */
  opacity:0.8; /* нo немнoгo прoзрaчнa */
  -moz-opacity:0.8; /* фикс прозрачности для старых браузеров */
  filter:alpha(opacity=80);
  width:100%;
  height:100%; /* рaзмерoм вo весь экрaн */
  top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
  left:0;
  cursor:pointer;
  display:none; /* в oбычнoм сoстoянии её нет) */
}
 
.title {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  background-color: #0000ff;
  color: #fff;
  /* border: 2px solid #000; */
  border-radius: 16px;
  padding: 12px 35px;
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  outline: none;
}
 
.title:hover {
  background-color: #00ff00;
  color: #000;
}
 
.title:active {
  background-color: #ff8c00;
  color: #0000ff;
}
 
.menu {
  float: right;
  max-width: 500px;
  min-height: 96px;
  background-color: #0000ff;
  color: #ff4500;
  font-size: 25px;
  border: none;
}
 
.open_modal {
  background-color: #999;
  color: #000;
  /* border-radius: 6px; */
  padding: 12px 35px;
  font-size: 21px;
  border: none;
  cursor: pointer;
}
 
.open_modal:hover {
  background-color: #00ff00;
  color: #000;
}
 
.open_modal:active {
  background-color: #ff8c00;
  color: #0000ff;
}
 
.modal_title {
  font-size: 25px;
  color: #fff;
}
 
.title {
    color: white;
    font-weight: bold;
    background: #000;
    padding: 12px;
    display: inline-block;
    width: 180px;
    text-align: center;
}

@Segeja · 10.11.2022, 17:18 **[ТС]**

Сообщение от Segeja

Сообщение от Segeja

document.querySelector('.button-show').onclick = function(){
this.value = this.value == "Запустить музыку" ? "Стоп" : "Запустить музыку";
};

Вот так в принципе должно быть,
С Уважением, Segeja

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .