locked
Use JavaScript to change app bar command icon and text RRS feed

  • Question

  • Greetings!

    I am trying to create an app bar command that will control the playback of an audio file. Whenever the button is pushed, it will change the icon and text to the opposite of the current play state. What I cannot figure out, is how to achieve this through JavaScript.

    I've tried the following:

    [...]
    var media = document.getElementById("audioPlayer");
    var button = document.getElementById("cmdPlayPause");
    media.pause();
    button.icon = ("play");
    button.label = ("Play");

    But it doesn't do anything. I've been searching high and low for an answer to this problem, but with no positive result. Any help would be greatly appreciated!

    Thanks!

    Sunday, January 12, 2014 12:34 AM

Answers

  • If cmdPlayPause is an AppBarCommand element in the app bar, then you need to reference its control properties like icon and label through its winControl property. Otherwise you're trying to set properties on a div, which won't accomplish much.

    Try doing:

    var button = document.getElementById("cmdPlayPause").winControl;

    This makes the button variable the AppBarCommand object rather than a div DOM element. It's a common oversight, and something that's consistent in the WinJS control model.

    Kraig

    Author, Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition, a free ebook from Microsoft Press. First edition (for Windows 8)


    • Marked as answer by Jitterbugz Sunday, January 12, 2014 11:10 PM
    Sunday, January 12, 2014 4:04 AM

All replies

  • If cmdPlayPause is an AppBarCommand element in the app bar, then you need to reference its control properties like icon and label through its winControl property. Otherwise you're trying to set properties on a div, which won't accomplish much.

    Try doing:

    var button = document.getElementById("cmdPlayPause").winControl;

    This makes the button variable the AppBarCommand object rather than a div DOM element. It's a common oversight, and something that's consistent in the WinJS control model.

    Kraig

    Author, Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition, a free ebook from Microsoft Press. First edition (for Windows 8)


    • Marked as answer by Jitterbugz Sunday, January 12, 2014 11:10 PM
    Sunday, January 12, 2014 4:04 AM
  • That's what I was looking for! I knew it was probably something like that.

    Thank you so much!

    Sunday, January 12, 2014 11:11 PM
  • My pleasure...remembering the .winControl part is one of the key things to learn for WinJS controls. I think we all forget at some time or another.
    Monday, January 13, 2014 12:01 AM