How to change a two word attribute separated by dash?

Question

How do I change the two word attribute in html with JavaScript? Example: There is an example HTML page:

<!DOCTYPE html>
<html>
    <head>
        <script src="randomscript.js"></script>
    </head>
    <body>
        <h1 id="mywords" aria-label="Yellow">Words</h1>
    </body>
</html>

Note: aria-label can be changed to any two word attribute (separated by dash) that fits in that context.

Now, moving on to the JS

document.querySelector("#mywords h1").aria-label = "Blue";

But that doesn't seem to work, as the aria-label is still Yellow!

How might I do this? Thanks.

EDIT: According to my text editor, the aria turns blue, the - turns red, but the label stays white. This suggests that the dash or what's after the dash is causing the problem.

Next time, please do a search before asking. Googling for _"JavaScript set attribute"_ would have given you plenty of answers. — Cerbrus, Nov 10 '15 at 11:09

score 3 · Answer 1 · answered Nov 10 '15 at 11:05

3

Use this instead...

document.querySelector("#mywords h1").setAttribute("aria-label", "Blue");

Javascript setAttribute

answered Nov 10 '15 at 11:05

Reinstate Monica Cellio

25,975
6
51
67

score -2 · Answer 2 · answered Nov 10 '15 at 11:06

-2

Or with jquery:

$("#mywords h1").attr("aria-label", "Blue");

Edit: My bad, didn't notice you wanted only javascript.

answered Nov 10 '15 at 11:06

KCarnaille

1,027
9
18

How to change a two word attribute separated by dash?

2 Answers2