0

I am working on a school project where people can change the css stylings of a page, and the javascript function parameters i am using to define what style selector to change on what element is not working.

Here is the Javascript and HTML i thats not working.

function changeInput(element, styleId, styleSelector) {
 document.getElementById(styleId).style.styleSelector = element.value + "px";
}
<!--Input width of wrapper-->
<input type="number" onchange="changeInput(this, 'demo', 'width')" value="500" min="0">

<!--The div example to change width of-->
<div id="demo" style="width:500px;height:500px;background:black;"></div>
Daniel MB
  • 3
  • 1

1 Answers1

0

The problem is in the syntax you are using. styleSelector is a variable and you are calling it as style property. It means that JS will try to find style.styleSelector property which doesn't exist (when you need style.width). Try to use this notation:

document.getElementById(styleId).style[styleSelector] = element.value + "px";

Take a look into [] brackets.

WhiteAngel
  • 2,594
  • 2
  • 21
  • 35