Assign data-value to a href using javascript?

You try:

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

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>

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/

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>

```

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/