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.

Answer 1

你试试：

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

Answer 2

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/

Answer 3

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/

Answer 4

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>

```

Answer 5

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>