Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2018
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help with buttons and playing audio

    Hello,
    I just started learning Javascript and created this code to dynamically create a button. When the button is click it is suppose to play a specific sound. However All clicks only play the fourth sound. I am not sure what I am doing wrong . Please advise me.

    Thanks

    Code:
    function playsound(x, y) {
    var source ='audio/words/' + x + '.mp3';
    var audio = new Audio(source);
    audio.id = y;
    audio.play();
    }
    
    var names_list = ["one", "two", "three", "fourth"];
    
    for (i = 0; i < names_list.length; i++) {
    var string_value=names_list[i];
    var auto_btn_id = 'id_' + names_list[i];
    
    var auto_btn_sound = document.createElement('BUTTON');
    auto_btn_sound.innerHTML = string_value;
    auto_btn_sound.className = "button_test";
    auto_btn_sound.setAttribute("id", auto_btn_id);
    auto_btn_sound.onclick = function(){playsound(string_value, auto_btn_id); return false;} ;
    document.getElementById("autosound2").appendChild(auto_btn_sound);
    }

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,608
    Thanks
    34
    Thanked 1,028 Times in 1,025 Posts
    JavaScript without the HTML/CSS to go with it is worthless.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,759
    Thanks
    58
    Thanked 678 Times in 673 Posts
    You need to look at javascript closures, specifically assigning event listeners in loops.
    It's a common problem and there are plenty of examples out there on how to fix it.

    Your HTML has nothing to do with it.

  4. Users who have thanked xelawho for this post:

    chadcan (02-15-2018)

  5. #4
    New to the CF scene
    Join Date
    Feb 2018
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes I know, I only posted the JS because it what I'm having problems with.

  6. #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,759
    Thanks
    58
    Thanked 678 Times in 673 Posts
    Rightly so. Have a look at closures and let us know if there's anything that doesn't click

  7. #6
    New to the CF scene
    Join Date
    Feb 2018
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hi xelawho, thanks for your suggestions. It was very helpful. I looked at closures and now have a better understanding of them. I changed my javascript to use the "foreach" instead of the "for" loop and it resolved my issue. Since the foreach takes care of the closure issues.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •