javascript - Issue with this.style.borderTop JS -


i trying make border randomly change colour when mouse hovers on changing if top or bottom border changes. if run obj.style.bordertop = "3px solid #dddddd" works. whereas when try concatenate same same line add in randomly generated colours , border doesn't work. js

<script type="text/javascript">     "use strict";     var tb = ["borderbottom", "bordertop"];     var colour = ["#16a085", "#8e44ad", "#ee006b", "#27ae60", "#c0392b", "#e67e22", "#2980b9"];       function randcolours(obj) {         var randtb = tb[math.floor(math.random() * tb.length)];         var randcolour = colour[math.floor(math.random() * colour.length)];         var final = "obj.style.";         var final = final.concat(randtb);         var final = final.concat("= '3px solid ");         var final = final.concat(randcolour);         var final = final.concat("';");         var execuatable = new function(final);         return(execuatable());     }     function rcrm(x){         x.style.border = "3px solid #2c3e50";     } </script>  

this html mouse on applied <li onmouseover="randcolours(this)" onmouseout="rcrm(this)"><a href="">photos</a></li>

i know concatenation in efficient helps break down code. have tried replacing obj. document.getelementbyid('photo') , works then, needs able work things throw @ it. not sure fix issue. cheers

you can build string , assign object's style instead of creating string execute js. idea here use bracket notation @ either borderbottom or bordertop of object's style.

here fixed live demo:

var tb = ["borderbottom", "bordertop"];  var colour = ["#16a085", "#8e44ad", "#ee006b", "#27ae60", "#c0392b", "#e67e22", "#2980b9"];    function randcolours(obj) {      var randtb = tb[math.floor(math.random() * tb.length)];      var randcolour = colour[math.floor(math.random() * colour.length)];      obj.style[randtb] = "3px solid " + randcolour;  }    function rcrm(x) {      x.style.border = "3px solid #2c3e50";  }
<li onmouseover="randcolours(this)" onmouseout="rcrm(this)"><a href="">photos</a>  </li>

jsfiddle version: https://jsfiddle.net/1nbyh6gh/


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -