How to call function inside the inner.html

Question

This is my normal function in JS file. I need to closeHomeScreenPopup function which is defined inside the document.getElementById("addToHomeScreenPrompt").innerHTML. I have passed onclick as string as you can see.

export default function register() {
  // Checks if should display install popup notification:
  if (isIos() && !isInStandaloneMode()) {
    function closeHomeScreenPopup() {
      console.log("jkjilkjlkjlkjlkjlkjlk");
    }
    document.getElementById("addToHomeScreenPrompt").innerHTML =
      '<div onclick="closeHomeScreenPopup()"><span class="plush--sign">+</span><p>Install the webapp on your iPhone:tap <img style="width: 20px; margin: 0 4px;" alt="" src="img/share_icon.png"/> and then Add to homescreen.</p></div>';
  }
}

But I get error when do onclick on the div

Uncaught ReferenceError: closeHomeScreenPopup is not defined
    at HTMLDivElement.onclick (temperature-schedule?roomId=2:51)

How can I call the closeHomeScreenPopup from inside inner.html

The function is not defined in your innerHTML. It's just attached to the onclick event handler. You must define the function itself globally. — Mark Baijens, Dec 13 '18 at 12:46
Functions called from inline event listeners `onxxxx` must be in global window scope. Time to stop using inline listeners — charlietfl, Dec 13 '18 at 12:47
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Jared Smith, Dec 13 '18 at 12:47
@JaredSmith What is wrong with his binding? I agree it's not the cleanest but it works. — Mark Baijens, Dec 13 '18 at 12:50
@MarkBaijens The main problem is his usage of inline javascript. The dupe proposed by Jared shows the correct way of doing things — baao, Dec 13 '18 at 12:52
@bambam Weather this is wrong or right is a matter of opinion and design. It's a good comment but no reason to mark his question as a duplicate of the linked question and not the cause of his direct problem. — Mark Baijens, Dec 13 '18 at 12:54
Ooops!! I didn't get what you all are talking. But anyway thanks for the debate. I will surely try to understand that comments. And I think it is not a duplicate @JaredSmith **;-)** — Profer, Dec 13 '18 at 12:57
@MarkBaijens Agreed (partially) :-) I would argue that his problem exists exclusively because of usage of technics used in 1998. I didn't mark as a dupe because of what you said though — baao, Dec 13 '18 at 12:58
@MarkBaijens I'm not trying to take a moral stance here. The OP is trying to add a click handler to a dynamically created DOM element. So it's a dupe IMO. — Jared Smith, Dec 13 '18 at 13:01
@JaredSmith I disagree, the function is successfully bound to the onclick event. The function that is bound couldn't be found because it's in the wrong scope. There is probably a duplicate for that too, but it's not the question you linked. The accepted answer of your linked question is even a jQuery solution which the OP doesn't even use. — Mark Baijens, Dec 13 '18 at 13:08
@MarkBaijens plenty of pure JS solutions on that question further down. You can use your votes however you wish, you don't have to agree with me. — Jared Smith, Dec 13 '18 at 13:19

score 2 · Accepted Answer · edited Dec 13 '18 at 12:52

2

Everything in JS is bound to containing scope. Therefore, if you define a function directly in the register functions, it will not be bound to window object.

closeHomeScreenPopup function should be defined globally

 window[closeHomeScreenPopup] = function() {
      console.log("jkjilkjlkjlkjlkjlkjlk");
    }

function closeHomeScreenPopup() {
  console.log("jkjilkjlkjlkjlkjlkjlk");
}
document.getElementById("addToHomeScreenPrompt").innerHTML =
  '<div onclick="closeHomeScreenPopup()"><span class="plush--sign">+</span><p>Install the webapp on your iPhone:tap <img style="width: 20px; margin: 0 4px;" alt="" src="img/share_icon.png"/> and then Add to homescreen.</p></div>';

<div id="addToHomeScreenPrompt"></div>

edited Dec 13 '18 at 12:52

Mark Baijens

11,932
10
39
66

answered Dec 13 '18 at 12:48

Vladu Ionut

7,407
1
15
28

While this "works" (or will once you fix the ReferenceError), it would be better to attach the handler in the relevant file rather than define a global. – Jared Smith Dec 13 '18 at 12:52
Yes, I agree with you is not a good practice to pollute global object with functions :) – Vladu Ionut Dec 13 '18 at 12:53

How to call function inside the inner.html

1 Answers1