-1

This is the functionality I am trying on my webpage.

I want the second button to change the background colour (black) when the mouse pointer is on it and back to original(red) when it leaves it. I said a button as an example but if you notice well, the button is made from svg code and it will have other uses.

I am able to achieve the first step(inhover function) but my code(outhover function) does not work.

Where am I having it wrong?

Code:

function showbut(btndiv, fillcolormask, fillcolortext, btntxt) {
  document.getElementById(btndiv).innerHTML = btntxt;
  var btndivv = document.getElementById(btndiv).innerHTML;
  var btndivvcpy = btndivv;
  var idx = btndivv.replace(/\<br\>/g, "*");
  var idxArr = idx.split("*");
  var idxArrlen = idxArr.length;
  var offset = document.getElementById(btndiv).offsetWidth;
  var wdth = parseInt(offset + 36);
  var hght = 30;

  for (var i = 0; i < idx.length; i++) {
    var chrt = idx.substring(i, i + 1);
    //alert(chrt);
    if (chrt === "*") {
      hght = hght + 20;
    }
  }

  var bouton = "<svg width='" + wdth + "px' height='" + hght + "px' viewBox='0 0 " + wdth + " " + hght + "' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>";
  bouton = bouton + "<title>un bouton</title>";
  //alert(bouton);
  bouton = bouton + "<desc>Created with Sketch.</desc>";
  bouton = bouton + "<defs>";
  bouton = bouton + "   <rect id='path-1" + btndivv + "' x='0' y='0' width='" + wdth + "' height='" + hght + "' rx='15'></rect>";
  bouton = bouton + "</defs>";
  bouton = bouton + "<g id='Page-1" + btndivv + "' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>";
  bouton = bouton + "    <g id='" + btndivv + "'>";
  bouton = bouton + "        <mask id='mask-2" + btndivv + "' fill='white'>";
  bouton = bouton + "           <use xlink:href='#path-1" + btndivv + "'></use>";
  bouton = bouton + "       </mask>";
  bouton = bouton + "      <use id='Mask" + btndivv + "' fill='" + fillcolormask + "' xlink:href='#path-1" + btndivv + "'></use>";
  bouton = bouton + "      <text mask='url(#mask-2" + btndivv + ")' font-family='Helvetica-Bold, Helvetica' font-size='13' font-weight='bold' fill='" + fillcolortext + "'>";

  bouton = bouton + "          <tspan x='18' y='18'>" + idxArr[0] + "</tspan>";
  var y = 18;
  for (var i = 1; i < idxArrlen; i++) {
    var y = y + 18;
    bouton = bouton + "          <tspan x='18' y='" + y + "' >" + idxArr[i] + "</tspan>";
    offset = idxArr[i].length;
  }
  bouton = bouton + "     </text>";
  bouton = bouton + "   </g>";
  bouton = bouton + " </g>";
  bouton = bouton + "</svg>";
  document.getElementById(btndiv).innerHTML = bouton;
  return false;
}

var btdiv1txt = "un bouton";
var btdiv2txt = "un bouton de la rue";
var btdiv3txt = "un bouton de la rue un peu <br> lourdement siture <br> au niveau de la taille. <br>poincarre a vu son prix se delabrer jusqu'a devenir poussiere";
document.getElementById("btdiv2").addEventListener("mouseout", outhover, false);
document.getElementById("btdiv2").addEventListener("mouseover", inhover, false);

var a = showbut("btdiv1", "#D8D8D8", "#D0011B", btdiv1txt);
var b = showbut("btdiv2", "#D7073F", "#FFFFFF", btdiv2txt);
var c = showbut("btdiv3", "#D8D8D8", "#D0011B", btdiv3txt);

function inhover() {
  var btdiv22txt = btdiv2txt;
  var k = showbut("btdiv2", "#000000", "#FFFFFF", btdiv22txt);
  return false;
}

function outhover() {
  var y = showbut("btdiv2", "#D7073F", "#FFFFFF", btdiv2txt);
  return false;
}
<table>
  <tr>
    <td><span id="btdiv1"></span></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table>
  <tr>
    <td><span id="btdiv2"></span></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table>
  <tr>
    <td><span id="btdiv3"></span></td>
  </tr>
</table>
Paul Ngom
  • 319
  • 1
  • 2
  • 16

1 Answers1

3

Can you set your styling in css rather than in javascript? If so, it should be as easy as doing something like this: 

#btn2{
  background-color:black;
  color:white
}

#btn2:hover{
  background-color: red;
}
<button id="btn2">
Button 2
</button>
Davend
  • 31
  • 2