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
Post a Comment