function parameters from variables fail as string javascript

Question

This Works:

setTheme('#222','#000','wheat','red','wheat','none','none');

This does not work:=

var theme01 = "'#222','#000','wheat','red','wheat','none','none'"; <br>
setTheme(theme01);

console.log(theme01) = '#222','#000','wheat','red','wheat','none','none'

So the conversion to string messes it up somehow?

I will be toggling through various themes before capturing the canvas? I had it all working with CSS, but canvas does not capture css changes or css injection. So I now have it all ready to go using Vanilla Javascript, but need help after hours of testing searching just to pass a variable to my function. Grrr. Help!

I have only been at this for a couple of weeks, so it's a learning curve after working only in Wordpress.

function setTheme(topp,bott,txt,hlin,vlin,fOrb,sOrb) {  
  var xx = document.querySelectorAll(".hlin");
  for (var i = 0; i < xx.length; i++) {
    xx[i].style.stroke = hlin;
  }

  var xx = document.querySelectorAll(".vlin");
  for (var i = 0; i < xx.length; i++) {
    xx[i].style.stroke = vlin;
  }
  var xx = document.querySelectorAll(".txt");
  for (var i = 0; i < xx.length; i++) {
    xx[i].style.fill = txt;
  } 
  document.getElementById("svg_20").style.fill = topp; 
  document.getElementById("svg_1").style.fill = bott;
  document.getElementById("svg_2").style.fill = bott;
  document.getElementById("svg_3").style.stroke = txt;
  document.getElementById("svg_5").style.stroke = txt;
  document.getElementById("svg_21").style.fill = fOrb;
  document.getElementById("svg_21").style.stroke = sOrb;

};

So the conversion to string messes it up somehow? No, but all of your setTheme's parameters (but the first) are undefined if you pass only a single one... Whatever you are trying to do there is far from sensible — baao
– baao, Commented Jun 3, 2018 at 16:30
You may want to do function setTheme(obj) {... document.getElementById("svg_20").style.fill = obj.topp; ....} and call it as setTheme({ topp:'#222',bott:'#000',txt:'wheat',hlin:'red',vlin:'wheat',fOrb'none',sOrb:'none'}) and also you likely want var xx = document.querySelectorAll("."+hlin); — mplungjan
– mplungjan, Commented Jun 3, 2018 at 16:35

Ben West · Accepted Answer · 2018-06-03 16:36:40Z

1

Yep, you can’t exchange a list of parameters for a comma-separated string. You should use a data structure to store them, like an array or object. Here’s an example of how it would work with an object.

var theme01 = { topp: '#222', bott: '#000', txt: 'wheat' };
function setTheme ( options ) {
    document.getElementById("svg_20").style.fill = options.topp;
    document.getElementById("svg_1").style.fill = options.bott;
    document.getElementById("svg_3").style.fill = options.txt;
}
setTheme( theme01 )

answered Jun 3, 2018 at 16:36

Ben West

4,5861 gold badge19 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Over a year ago

Thank you for Quick response, this is great :)

KooiInc · Accepted Answer · 2018-06-03 16:48:08Z

0

The string will be one parameter for your function. You can use Function.apply )1 with a splitted string as second parameter, or even simpler, use the spread operator 2). Demo:

1) Function.apply

2) spread operator

( () => {
  const log = str => document.querySelector("#result").textContent += `${str} \n`;
  const parameterString = "#222,#000,wheat";
  // no dice
  log("someFn(parameterString) => no dice"); 
  someFn(parameterString);
  
  // use apply
  log("\nsomeFn.apply(null, parameterString.split(\",\")) => ah yes, that works");
  someFn.apply(null, parameterString.split(","));
  
  // or use spread operator
  log("\nsomeFn(...parameterString.split(\",\")) => ah yes, that works too");
  someFn(...parameterString.split(","));
  
  function someFn(p1, p2, p3) {
    log(p1);
    log(p2);
    log(p3);
  }
  
})();

<pre id="result"></pre>

edited Jun 3, 2018 at 16:48

answered Jun 3, 2018 at 16:41

KooiInc

124k32 gold badges145 silver badges181 bronze badges

2 Comments

Ryan Over a year ago

Thank you, for such a quick response, I will decipher this and learn about Apply, now. At least I know there is a solution. I'm sticking with Javascript to get a foundation, before using jQuery etc.

KooiInc Over a year ago

@Ryan There is nothing else but javascript in my answer ;)

Get Off My Lawn · Accepted Answer · 2018-06-03 16:42:08Z

0

You can pass it as an array using spread syntax, you cannot however pass a string of items and have them be multiple parameters.

function setTheme(topp, bott, txt, hlin, vlin, fOrb, sOrb) {
  console.log(topp)
  console.log(bott)
  console.log(txt)
  console.log(hlin)
  console.log(vlin)
  console.log(fOrb)
  console.log(sOrb)
}

let items = ['#222', '#000', 'wheat', 'red', 'wheat', 'none', 'none']


setTheme(...items)

answered Jun 3, 2018 at 16:42

Get Off My Lawn

36.6k47 gold badges201 silver badges380 bronze badges

Collectives™ on Stack Overflow

function parameters from variables fail as string javascript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related