My button has a sound and I want it to be able to link to a new page

Question

I'm not sure where to put the link to the next page. I have a total of four buttons, and I want the user to be able to go the next page if he/she clicks the correct answer. I tried this code but it only goes to the next page when you click the number, not the entire button.

<button class="abtn"><a href="play.html" onmousedown="button.play()">2</button>

<button class="btn" onclick="button.play()" type="button">5</button>

do you want to navigate to the next page and still see the button? — David, Feb 06 '19 at 09:37
Possible duplicate of [Playing audio with Javascript?](https://stackoverflow.com/questions/9419263/playing-audio-with-javascript), [Play audio when clicking on button and redirect after sound is done playing](https://stackoverflow.com/questions/35638360/play-audio-when-clicking-on-button-and-redirect-after-sound-is-done-playing) — Mukyuu, Feb 06 '19 at 09:49

score 0 · Answer 1 · answered Feb 06 '19 at 09:49

I guess <button class="abtn"><a href="play.html" onmousedown="button.play()">2</a></button> is the correct button, on click of which you want to navigate to next page.

Most probably your problem is because of <a> tag in inline-block. Add a class to your a tag

<a class="full-width" href="play.html" onmousedown="button.play()">2</a>

now add style-rule for the full-width class

.full-width {
   display: block;
   width: 100%;
}

This again is something I am guessing as no code snippet is provided.

score 0 · Answer 2 · answered Feb 06 '19 at 10:10

This is what basically you need, when you want to play a sound using button. The source file will definitely not have .html extension, but somethin as is .wav. But, honestly, I do not understand what is actually going on your attempt.

<button onclick="playSound()">Play it</button>
<audio id="sound" src="your_sound.wav"></audio>

<script>
  function playSound () {
    const audio = document.getElementById('sound'); //this is, where you target audio tag containing your sound
    if (!audio) return;
    audio.currentTime = 0;
    audio.play();
  }
</script>

The code was taken from https://javascript30.com/, from it's first lesson, but the code was simplifyed enough for you. However I recommend you taking his lesson.

My button has a sound and I want it to be able to link to a new page

2 Answers2