How to change path data with JS?

I want to change path data to none on mouseover. On mouse out, I want to change the value to something else.

What's wrong with my code?

This is what I tried:

HTML:

<button id="buttonjs">
    <svg width="10" height="10">
        <g fill-rule="evenodd">
            <path id="pathjs"  d="M0 5h7"></path>
        </g>
    </svg>
    </button>

JS:

document.getElementById("buttonjs").onmouseover = function() {mouseOver()};
document.getElementById("buttonjs").onmouseout = function() {mouseOut()};
        
        function mouseOver() {
          document.getElementById("pathjs").getAttribute('d, 0');
        }
        
        function mouseOut() {
          document.getElementById("pathjs").getAttribute('d, M0 5h7');
        }


Read more here: https://stackoverflow.com/questions/64958382/how-to-change-path-data-with-js

Content Attribution

This content was originally published by Németh Szilveszter at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: