click callback со звуком и innerHTML вместе не работает так, как ожидалось?

В приведенном ниже фрагменте предполагаемое поведение - нажать «Воспроизвести», затем mp3 будет воспроизведен, а «Play» будет изменен на «воспроизведение». Однако в моих браузерах (Mozilla, Safari) я получаю следующее: При нажатии на «Play» он трансформируется в «воспроизведение», но файл не воспроизводится. Затем, только при нажатии на «воспроизведение» файл воспроизводится. Почему я должен нажать два раза? При комментировании строки «document.getElementById (« игрок »). InnerHTML = 'play'; файл сразу же воспроизводится после первого щелчка.click callback со звуком и innerHTML вместе не работает так, как ожидалось?

<!doctype html> 
<html> 
<body> 
<div id="player">Play</div> 
<script> 
    audioEl = document.createElement("audio"); 
    audioEl.setAttribute('src','audioFile.mp3'); 
    document.getElementById('player').appendChild(audioEl); 

    document.getElementById('player').addEventListener('click',function() { 
    document.getElementById('player').innerHTML = 'playing'; 
    audioEl.play(); 
    }); 
</script> 
</body> 
</html>

источник

2017-01-22 Andreas

innerHTML заменяет все содержимое элемента, а не только текстом. После создания audio тега, ваш HTML выглядит следующим образом:

<!doctype html> 
<html> 
<body> 
    <div id="player">Play 
     <audio src='audioFile.mp3'> 
    </div> 
</body> 
</html>

Итак, когда вы заменить содержание DIV с playing вы удалите <audio src='audioFile.mp3'>.

Вы должны добавить элемент для текста в DIV, как этот

<div id="player"> 
    <div id="player-text"> 
</div>

и использовать этот код JavaScript

audioEl = document.createElement("audio"); 
audioEl.setAttribute('src','audioFile.mp3'); 
document.getElementById('player').appendChild(audioEl); 

document.getElementById('player').addEventListener('click',function() { 
    document.getElementById('player-text').innerHTML = 'playing'; 
    audioEl.play(); 
});

источник

2017-01-22 21:40:51

Вы замены .innerHTML из #player, в том числе <audio> элемента, на

document.getElementById('player').innerHTML = 'playing';

Вы можете сцепить с #text узел на #player.innerHTML с помощью .innerHTML += "playing" или использовать .insertAdjacentHTML

<!doctype html> 
<html> 
<body> 
<div id="player">Play</div> 
<script> 
    audioEl = document.createElement("audio"); 
    audioEl.setAttribute('src','audioFile.mp3'); 
    document.getElementById('player').appendChild(audioEl); 

    document.getElementById('player').addEventListener('click',function() { 
    this.innerHTML += 'playing'; 
    audioEl.play(); 
    }); 
</script> 
</body> 
</html>

<!doctype html> 
<html> 
<body> 
<div id="player">Play</div> 
<script> 
    audioEl = document.createElement("audio"); 
    audioEl.setAttribute('src','audioFile.mp3'); 
    document.getElementById('player').appendChild(audioEl); 

    document.getElementById('player').addEventListener('click',function() { 
    this.insertAdjacentHTML("beforeend", "playing"); 
    audioEl.play(); 
    }); 
</script> 
</body> 
</html>

источник

2017-01-22 21:40:05 guest271314

click callback со звуком и innerHTML вместе не работает так, как ожидалось?

ответ

Смежные вопросы