CODEWITHSUNDEEP
javascript
Ryan
Ryan

Reputation: 13

function parameters from variables fail as string javascript

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;

};

Upvotes: 1

Views: 59

Answers (3)

KooiInc
KooiInc

Reputation: 122906

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>

Upvotes: 0

Get Off My Lawn
Get Off My Lawn

Reputation: 36311

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)

Upvotes: 0

Ben West
Ben West

Reputation: 4596

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 )

Upvotes: 1

Related Questions