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.

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.

• javascript

• Possible duplicate of Set data attribute using JavaScript – castletheperson Commented Aug 18, 2016 at 1: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 Commented Aug 18, 2016 at 1:47
• Move that color changing part inside onload function too. – Nikolay Ermakov Commented Aug 18, 2016 at 1:48
• The id mycolor does not exist. – Emile Bergeron Commented Aug 18, 2016 at 1:49
• appreciate the tips. – David Lee Commented Aug 18, 2016 at 2:15

5 Answers 5

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/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/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/1usopvda/4/