test:62 Uncaught ReferenceError: is not defined at HTMLButtonElement.onclick (test:62)

Question

I would like to be able to transmit in my function values that are not integers but strings.

I do not have any problem with the integers but for the chains, I have a problem of declaration but I do not understand where it comes from ...

<div id="test"></div>
<script>
  var b = "hello";

  var test = document.getElementById('test');
  test.innerHTML += "<button onclick='myFunction("+b+")'>Click me</button> ";

  function myFunction(MyVar) {
    console.log(MyVar);
  }
</script>

Create the button using `document.createElement`, assign a function object to its `onclick` property so you don’t have to worry about putting together valid JavaScript inside HTML, and add it to the test element using `test.appendChild`. (Search terms: `document.createElement`, `appendChild`, DOM.) — Ry-, Jun 12 '19 at 18:51
Or use `attachEventListener` instead of the older `onclick` property. — Heretic Monkey, Jun 12 '19 at 18:53
Possible duplicate of https://stackoverflow.com/questions/31960980/passing-string-parameter-in-javascript-function — TheUnKnown, Jun 12 '19 at 20:19

score 1 · Accepted Answer · answered Jun 12 '19 at 20:09

1

Fix variants:

test.innerHTML += "<button onclick=myFunction('"+b+"')>Click me</button> ";
test.innerHTML += "<button onclick='myFunction(\""+b+"\")'>Click me</button> ";
test.innerHTML += "<button onclick=\"myFunction('"+b+"')\">Click me</button> ";

etc.

answered Jun 12 '19 at 20:09

Jan

2,178
3
14
26

Problematic are missing quotes - you are sending hello not "hello" or 'hello' - in case you put window.hello = b; it will work ;-) But not sure about context - if global variable will be visible. – Jan Jun 12 '19 at 20:10
Btw your way is a bit slow - it would take some time for the button to start working DOM method works immediately, but for big generated page may be slower than your generated mark up. – Jan Jun 12 '19 at 20:14
Warning - 1st variant is very simple, but not completely valid nor recommend - if script is in quotes, you may have ex. spaces between commands too, but this way next (space delimited) command will probably work as another element's attribute. And thanx 4 accept. – Jan Jun 12 '19 at 20:46

score 0 · Answer 2 · answered Jun 12 '19 at 20:22

0

You're already passing a string inside the function, so you don't need to wrap your var inside double quotes:

var b = "hello";

  var test = document.getElementById('test');
  test.innerHTML += "<button onclick='myFunction(b)'>Click me</button>";
  function myFunction(MyVar) {
    console.log(MyVar);
  }

<div id="test"></div>

answered Jun 12 '19 at 20:22

TheUnKnown

681
5
29

Would tell, it will not work - suppose b will be undefined when clicking, but not 100% sure and do not want to start PC or play with on mobile to check. – Jan Jun 12 '19 at 20:41
Ok, but to be sure would try all major browsers too - every platform including snippets work a bit different sometimes - even listeners mentioned 1st are different in some. – Jan Jun 12 '19 at 20:50
1

You are right - works also in FF, Chrome & IE. As I am using IIFE often, forgot vars are global too. – Jan Jun 13 '19 at 05:50

test:62 Uncaught ReferenceError: is not defined at HTMLButtonElement.onclick (test:62)

2 Answers2