When to wrap JS variable in quotes

Question

I have the following JS which is working but I'm confused by why I need to wrap the variable func in quotes. Could someone explain?

function CustomPrompt(){
	this.render = function(dialog,func){
	  var winW = window.innerWidth;
	  var winH = window.innerHeight;
	  var dialogoverlay = document.getElementById('dialogoverlay');
	  var dialogbox = document.getElementById('dialogbox');

	  dialogoverlay.style.display = "block";
	  dialogoverlay.style.height = winH+"px";
	  dialogbox.style.left = (winW/2) - (550 * .5)+"px";
	  dialogbox.style.top = "100px";
	  dialogbox.style.display = "block";

	  document.getElementById('dialogboxhead').innerHTML = '&nbsp';
	  document.getElementById('dialogboxbody').innerHTML = dialog;
	  document.getElementById('dialogboxbody').innerHTML += '<br><input id="prompt_value1"  >';
		
	  document.getElementById('prompt_value1').focus();

//HERE'S THE LINE I'M CONFUSED BY
//*******************************
	  document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Prompt.ok(\''+func+'\')">OK</button> <button onclick="Prompt.cancel()">Cancel</button>';
    
	}

	this.cancel = function(){
	  document.getElementById('dialogbox').style.display = "none";
	  document.getElementById('dialogoverlay').style.display = "none";
	}
	this.ok = function(func){
	  var prompt_value1 = document.getElementById('prompt_value1').value;
	  window[func](prompt_value1);
	  document.getElementById('dialogbox').style.display = "none";
	  document.getElementById('dialogoverlay').style.display = "none";
	}
}

Answer 1

The func variable seems to be a string which identifies a function attaches to the global window object which you call with window[func](prompt_value1); in your ok function.

func needs to be sent as a string, since it's a key on the window object.

If you were to remove the qoutes in your example the onclick method of the button would try to send the value of your func variable in the current scope. Since func is declared in your function scope you would not be able to access it. Instead the variable value is inlined.

This example inlines the variable place

function hello(place) {
  console.log(place);
}
function iHaveMyOwnScope() {
  var place = "world"; // this is in my scope
  var container = document.getElementById('container1');
  container.innerHTML = '<button onclick="hello(\''+place+'\')">Hello1</button>';
}
iHaveMyOwnScope();

<div id="container1"></div>

This example tries to access the variable place via global scope

Since place isn't defined in a global scope it is not accessible.

function hello(place) {
  console.log(place);
}
function iHaveMyOwnScope() {
  var place = "world"; // this is in my scope
  var container = document.getElementById('container1');
  container.innerHTML = '<button onclick="hello(place)">Hello2</button>';
}
iHaveMyOwnScope();

<div id="container1"></div>

This example programatically creates the button and attaches the event handler inside the function scope

function hello(place) {
  console.log(place);
}
function iHaveMyOwnScope() {
  var place = "world"; // this is in my scope
  var container = document.getElementById('container1');
  
  var button = document.createElement('button')
  button.innerHTML = 'Hello3'
  button.addEventListener('click', function() {
    // Here we can access the place variable
    // since this handler is defined in the functions scope
    hello(place)
  }, false)
  
  // Add button to container
  container.appendChild(button);
}
iHaveMyOwnScope();

<div id="container1"></div>