Assign data-value to a href using javascript?

Question

I'm having a problem of assigning a value to an anchor tag's data-attribute. Here is my code:

<script>
window.onload = function(){
document.getElementById("setcolor").click();
}

var color = "red";
document.getElementById("mycolor").value = color;
</script>

<a id="setcolor" class="colors" href="#" role="button" data-value="mycolor">Choose color</a>

I would like to set the following string value to the href above (replace 'mycolor' with 'red'):

data-value="red"

but the above is not working. Any tips are appreciated.

Possible duplicate of [Set data attribute using JavaScript](http://stackoverflow.com/questions/11286661/set-data-attribute-using-javascript) — 4castle, Aug 18 '16 at 01:46
So since your `var color = "red";` is outside of the onload event, it is executed immediately, without the HTML being ready. You need to add an onclick listener to the setColor a ID, and add the color changing code there — Derek Pollard, Aug 18 '16 at 01:47
@DavidLee, small tip: Don't use `href="#"` if you are binding a click event to anchor tag, use `href="javascript:void(0)"` or in JavaScript level `event.preventDefault()`. — Jerad Rutnam, Aug 18 '16 at 02:27
And don't forget to approve the answer which solves your problem. And vote the answers which added value to the question. :) — Jerad Rutnam, Aug 18 '16 at 02:28

score 4 · Answer 1 · answered Aug 18 '16 at 01:49

4

You try:

document.getElementById("setcolor").setAttribute("data-value", color);

answered Aug 18 '16 at 01:49

Văn Tuấn Phạm

657
4
10

appreciate the tip. – David Lee Aug 18 '16 at 02:15

score 2 · Answer 2 · answered Aug 18 '16 at 06:20

If you need only to change the color on click for you <a> tag you can consider a much more straightforward solution using only CSS, in this case a CSS :active Selector.

#setcolor:active{
    color: red;
}

<a id="setcolor" class="colors">Choose color (Click me!)</a>

score 0 · Answer 3 · answered Aug 18 '16 at 01:56

0

Try rewriting your code:

<script>
window.onload = function(){
document.getElementById("setcolor").click();
}

var color = "red";
var setcolor = document.getElementById("setcolor");
setcolor.dataset.value = color; //sets data-value="red"
</script>

sample here https://jsfiddle.net/fjchy6av/1/

answered Aug 18 '16 at 01:56

Brian Luna

682
1
8
28

appreciate the help. – David Lee Aug 18 '16 at 02:14
@DavidLee, if this help you might consider upvoting or accepting this answer =) – Brian Luna Aug 18 '16 at 02:39

Jerad Rutnam · Answer 4 · 2016-08-18T09:32:30.473

Simply update your code to,

<script>
  window.onload = function(){
    var color = "red",
        setcolorLink = document.getElementById("setcolor");

    setcolorLink.setAttribute("data-value", color);
    setcolorLink.click();
  }
</script>

<a id="setcolor" class="colors" href="javascript:void(0)" role="button" data-value="mycolor">Choose color</a>

Example: https://jsfiddle.net/1usopvda/2/

Further Explaining

There are 2 ways of doing this. See the examples below, how to use data-attribute in JavaScript.

var colorLink = document.getElementById("setcolor");

Using DOM's getAttribute() property

 var getColor = colorLink.getAttribute("data-value") //returns "mycolor"

 colorLink.setAttribute("data-value", "red") //changes "data-value" to "red"
 colorLink.removeAttribute("data-value") //removes "data-value" attribute entirely

Using JavaScript's dataset property

var getColor = colorLink.dataset.value //returns "mycolor"

colorLink.dataset.value = 'red' //changes "data-value" to "red"
colorLink.dataset.value = null  //removes "data-value" attribute

And I'm not sure what you are trying to achieve by the `click()` in the question. So if you want to change the value onclick, see the example below

<script>
  window.onload = function(){
    var color = "red",
        setcolorLink = document.getElementById("setcolor");

    setcolorLink.onclick = function(){
        this.setAttribute("data-value", color);
    };
  }
</script>

<a id="setcolor" class="colors" href="javascript:void(0)" role="button" data-value="mycolor">Choose color</a>

Example: https://jsfiddle.net/1usopvda/4/

You are most welcome @DavidLee, I updated the answer with more examples. So you can learn more. :) — Jerad Rutnam, Aug 18 '16 at 02:29

score 0 · Answer 5 · answered Aug 18 '16 at 02:00

0

Your js usage is not correct. Try it out following ```

<script>
window.onload = function(){
document.getElementById("setcolor").click();
}

var color = "red";
document.getElementById("setcolor").setAttribute("mycolor", color);
</script>

<a id="setcolor" class="colors" href="#" role="button" data-value="mycolor">Choose color</a>

```

answered Aug 18 '16 at 02:00

Johnny

1,112
1
13
21

appreciate the help – David Lee Aug 18 '16 at 02:14

Assign data-value to a href using javascript?

5 Answers5

Further Explaining

And I'm not sure what you are trying to achieve by the click() in the question. So if you want to change the value onclick, see the example below

And I'm not sure what you are trying to achieve by the `click()` in the question. So if you want to change the value onclick, see the example below