Pass a string parameter in an onclick function

Implementing string parameters: best practices

Harness DOM manipulation methods

JavaScript-driven element creation builds scalability and a strong divide of responsibilities. Use document.createElement() and element.addEventListener() to set event handlers:

const button = document.createElement('button');
button.textContent = 'Click';
button.addEventListener('click', () => myFunction('Basketball'));
document.body.appendChild(button);

function myFunction(str) {
  console.log(str); // Robot says: "Throw me the Basketball!"
}


This method eliminates inline onclick attributes, and suits well to complex applications requiring centralized event handling.

Careful with variable scope in loops

Pay heed to potential traps when making handlers within loops. Each loop iteration must have its own scope to reference its data:

for (let i = 0; i < items.length; i++) {
  const button = document.createElement('button');
  button.textContent = `Item ${i + 1}`;
  button.addEventListener('click', (function(item) {
    return function() { console.log(item); }; // "Item" jokes don't get old as long as you have "items"!
  })(items[i]));
  document.body.appendChild(button);
}


This Immediately Invoked Function Expression (IIFE) allows every handler to reference the correct item instance, thereby solving the typical closure problem in loops.

Inline handlers: an avoidable sin

Although inline onclick attributes are tempting, they lead to tight coupling leading to messy code maintenance. Opt for addEventListener and separate HTML structure from JavaScript:

<!-- Avoid this pattern -->
<button onclick="myFunction('Parameter')">Candy</button>

<!-- This is how it's done -->
<button id="chocolateCake">Gourmet</button>
<script>
document.getElementById('chocolateCake')
  .addEventListener('click', () => myFunction('Parameter')); // The cake is not a lie!
</script>


Special characters in strings: proper escaping

To avoid clashes with quotation marks and HTML syntax errors, strings passed as parameters need to be well-escaped. Using HTML entities can fend off unexpected behavior:

<button onclick="myFunction('String with &quot;quotes&quot; and &amp;')">
  Click
</button>


Data attributes for dynamic string parameters

Instead of directly injecting data into your JavaScript function calls, data attributes provide an elegant and accessible solution for attaching data to elements. By storing your string parameters in data-* attributes, you get cleaner markup and the flexibility to reuse functions:

<button data-item="🏀" onclick="fetchItem(this)">Get the Basketball</button>
<button data-item="🎨" onclick="fetchItem(this)">Get the Paint Set</button>
<button data-item="📚" onclick="fetchItem(this)">Get the Book</button>

<script>
function fetchItem(element) {
  const item = element.getAttribute('data-item');
  console.log('Fetched item:', item); // Look Ma, no hands!
}
</script>


This practice keeps HTML declarative and simplifies your JavaScript functions, allowing them to operate on the interacted element without relying on hardcoded parameters.

Functions: dynamic call capability

At times, you may want to call different functions based on a condition or within a loop. Storing the function name as a string helps you access it through window[functionName]:

<button data-function="fetchBasketball" onclick="dynamicCall(this)">Get the Basketball</button>
<button data-function="fetchPaintSet" onclick="dynamicCall(this)">Get the Paint Set</button>

<script>
function dynamicCall(button){
  const functionName = button.getAttribute('data-function');
  window[functionName](); // Function names, roll out!
}

function fetchBasketball() { console.log('🏀'); }
function fetchPaintSet() { console.log('🎨'); }
</script>


This approach facilitates flexible function execution, dictated by the dynamically determined context.