3

I'm rather new to this and don't know exactly how to report a bug, but I first want to confirm it's a bug and then go on from there. But here's what I'm finding:

1) When creating an audio object controls attribute, the controls attribute will respond to a string as if it's a boolean. For Instance:

<button onclick="example()">Try this</button>
<script>

function example() {
    var aud = document.createElement("AUDIO");
        aud.setAttribute("src","example.mp3");
    aud.setAttribute("controls", "controls");
}

Okay, we've put controls in there because it makes controls equal controls: Thing is, you can put any old string in there and it works just fine -- apple, banana, pear, anything.

2) Isn't the value suppose to be a boolean? Well when you try a boolean, false for example, you still get true. (False == True) It works just as if you typed in true.

...and if you put anything else other than true or false (just type anything other than an integer, string, or true or false value), you get false (or it just doesn't work). Everything equals true and a non-string, non-integer equals false (or just doesn't work).

Finally, you can even try setting the controls attribute on an accessed audio element:

var aud = document.getElementById("idhere");
function accessAudioElement() { 
    aud.controls = false;
}

At least here the true and false actually work as true and false, but once again, any string or integer will also get you true and any non-string/non-integer will break the code.

Can somebody help me out here because I don't think this is suppose to work this way... and if does, what's the point of using a boolean value when most anything else will work?

Of course I'm still learning, so maybe this is not a bug, maybe for some reason this is suppose to work this way, but if that's the case would someone please share the logic behind this with me.

I'm just not understanding. Thanks Magic

Magic
  • 67
  • 5
  • 2
    I don't have time to write a proper answer, but `aud.controls = false;` doesn't set the `controls` attribute, it sets the `controls` property, which expects a boolean (or truthy/falsy value, anyway). Whereas with the attribute, the attribute's presence (with any value) is what matters. See also [this question](http://stackoverflow.com/questions/3919291/when-to-use-setattribute-vs-attribute-in-javascript), or [this one](http://stackoverflow.com/questions/19246714/html-attributes-vs-properties). – nnnnnn Apr 24 '17 at 04:42

2 Answers2

2

This is an extended answer of what @nnnnnn suggested in the comments.

aud.controls = false; doesn't set the attribute, it sets the property.

You need to use setAttribute() method to add the specified attribute to an element.

aud.setAttribute("controls", "controls");

And use removeAttribute() method removes the specified attribute from an element.

aud.removeAttribute("controls");

For more reading on these methods, have a look at the hyperlinks attached.

Community
  • 1
  • 1
Basil
  • 41
  • 5
1

You might want to read/search more about Javascript Truthy $ Falsey. It is very important.

https://j11y.io/javascript/truthy-falsey/

enter image description here

Dalin Huang
  • 10,318
  • 5
  • 23
  • 43
  • Hey guys, thanks a mil for the input. I had been trying to make sense of this one for a good while. Must have missed some of the truthy falsey along the way (or just hadn't got to it yet). Anyways, I've got it now, and will continue to research it even further. – Magic Apr 24 '17 at 05:16