How to create overall function which changes styling

Asked Mar 08 '18 at 17:11

Active Mar 08 '18 at 17:53

Viewed 40 times

What I try to do is creating an overal(global) function which changes styling of different elements.

I will give you an example to clear out my question, I have multiple functions which changes elements indivually like this below for exmaple:

function changeBgColor(background) {
 exitIntentWrapper.style.background = background.value;
}

Which looks in the html like this:

onchange="changeStyling(this)"

What I tried is this:

function changeStyling(input, changeSelector, elementsCssChange) {
  console.log(input.value, changeSelector, elementsCssChange);

  changeSelector.style.elementCssChange= input.value;
}

onchange="changeStyling(this, exitIntentWrapper, backgroundColor)"

But how do I pass the elementsCssChange in this html onchange function.

What it logs now is that the following:

Uncaught ReferenceError: backgroundColor is not defined

Could someone help me out on this?

edited Mar 08 '18 at 17:18

asked Mar 08 '18 at 17:11

Sireini

4,142
12
52
91

I think the problem is that the dot notation gets all funky with a variable name vs. an expected element. Could you use an alternative approach? (use JS to set a class? create a BG specific function?) – Doug Mar 08 '18 at 17:38
2

`changeStyling(this, exitIntentWrapper, 'backgroundColor')` and `changeSelector.style[elementCssChange]` – Patrick Roberts Mar 08 '18 at 17:42
Patrick has the solution. – Christian Benseler Mar 08 '18 at 17:59
@PatrickRoberts set it as answer I will accept and upvote it thanks – Sireini Mar 08 '18 at 18:01

How to create overall function which changes styling

0 Answers0