Can't change color from javascript

Question

I can't get to change the color of the stroke when mouseovering the button. I've tried solving it by myself bu i can't.

var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");

ctx.beginPath();

  ctx.moveTo(17, 7);
  ctx.bezierCurveTo(13, -8, 26, 21, 12, 26);
  ctx.bezierCurveTo(-2, 31, 59, 64, 33, 18);

ctx.lineWidth = 8;
ctx.strokeStyle =  "#3d7eb8";
if (document.getElementById("one").style.backgroundColor == "#3d7eb8"){
    ctx.strokeStyle = "#fffced";
}
ctx.stroke();
function button1hover (){
    document.getElementById("one").style = "background-color: #3d7eb8";
}
function button1unhover (){
    document.getElementById("one").style = "background-color: #fffced";
 }

<button onmouseout="button1unhover()" onmouseover="button1hover()" id="one" class="button column center">
                   <canvas height="50px" width="50px" id="canvas1"></canvas> 
                   <p>Inici</p> 
                </button>

Should be like this document.getElementById("one").style.backgroundColor = " #3d7eb8"; — doğukan
– doğukan, Commented Jul 27, 2019 at 21:47

Thomas · Accepted Answer · 2019-07-27 22:29:17Z

This really is no job vor JS, this can all be accomplished with CSS and a tiny inline SVG for the curve.

#one {
  background-color: #fffced;
}

#one svg {
  width: 50px;
  height: 50px;
}

#one:hover {
  background-color: #3d7eb8;
}

#one path {
  fill: none;
  stroke-width: 8px;
  stroke: #3d7eb8;
}

#one:hover path {
  stroke: #fffced;
}

<button id="one" class="button column center">
  <svg><path d="M 17 7 C 13 -8 26 21 12 26 -2 31 59 64 33 18" /></svg>
  <p>Inici</p> 
</button>

and even the CSS can be nicer if you use less or sass/scss

#one {
  background-color: #fffced;

  svg {
    width: 50px;
    height: 50px;
  }

  path {
    fill: none;
    stroke-width: 8px;
    stroke: #3d7eb8;
  }

  &:hover {
    background-color: #3d7eb8;

    path {
      stroke: #fffced;
    }
  }
}

To answer the question why your code does not work: You render the canvas exactly once, at the beginning. To change it, you'd have to re-render it inside of button1hover() and button1unhover() with the resperctive color.

And even then, document.getElementById("one").style.backgroundColor == "#3d7eb8" ain't guaranteed to work. Because, depending on the Browser, .style.backgroundColor may return the color as rgb(...) value.

So better define a variable that stores the state and toggle/check that.

Alex · Accepted Answer · 2019-07-27 22:45:28Z

As said before, this is better done in css.

However, if you wish to do it in JS, you could try something like that :

var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.beginPath();

ctx.moveTo(17, 7);
ctx.bezierCurveTo(13, -8, 26, 21, 12, 26);
ctx.bezierCurveTo(-2, 31, 59, 64, 33, 18);

ctx.lineWidth = 8;
ctx.strokeStyle =  "#3d7eb8";

ctx.stroke();

function button1hover() {
    this.style.background = "#3d7eb8";
    ctx.strokeStyle = "#fffced";
    ctx.stroke();
}

function button1unhover() {
    this.style.background = "#fffced";
    ctx.strokeStyle = "#3d7eb8";
    ctx.stroke();
}

document.getElementById('one').addEventListener("mouseover",button1hover);
document.getElementById('one').addEventListener("mouseout",button1unhover);

<button id="one" class="button column center">
  <canvas height="50px" width="50px" id="canvas1"></canvas> 
  <p>Inici</p> 
</button>

eventListeners are your friends for this kind of things, as for the canvas, I'm not sure there is a better option than redrawing it every time.

Collectives™ on Stack Overflow

Can't change color from javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related