Javascript using innerHTML does not work to add script tag in HEAD

Question

I am trying to create a function dynamically everytime a user supplies a JSON file. The following function is called at onSubmit event of the form.

I dont see this code working. While debugging, I saw that the extra element appears in the HEAD section but as soon as the function call gets over, it disappears.

However, if I call the function createType() explicitly in JS file, it works. But my requirement is that the function createType should be called only on the button click and should create a function dynamically.

function createType() {
  var jsonString = document.getElementById("json").value;
  var obj = JSON.parse(jsonString)
  var script = document.createElement("script");
  script.innerHTML = "function Friend(){ ";
  for (var i = 0; i < obj.fields.length; i++) {
    if (obj.fields[i].name != "") {
      alert(obj.fields[i].name);
      script.innerHTML += "var " + obj.fields[i].name + ";" +
        "this.get=function(){ alert('test');}";


    }
  }
  script.innerHTML += "}";

  document.head.appendChild(script);
}
var firstFriend = new Friend();
firstFriend.get(); // should trigger an alert box.

The last two lines throw an error because the new script tag which contains the function 'Friend' is not found anywhere.

I want the appended script to stay in HEAD/BODY even if the createType() was called from a button click event.

The same issue goes with the body tag. If i try to add the script element in the body tag instead of the HEAD tag as described in the code above, I face the same issue. — Tirth Pandya
– Tirth Pandya, Commented Apr 24, 2015 at 6:51

Quentin · Accepted Answer · 2015-04-24 06:48:43Z

2

The following function is called at onSubmit event of the form.

I dont see this code working. While debugging, I saw that the extra element appears in the HEAD section but as soon as the function call gets over, it disappears.

You are running the script, then the form is submitting which causes the page to be reloaded. The script hasn't run on the new page so the changes no longer exist.

You need to call .preventDefault() on the event object to stop the form submission completing.

If you need the form to submit then you also need to replace the regular submission with Ajax or change your approach and trigger the JS based on the data submitted when the page is loaded.

answered Apr 24, 2015 at 6:48

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tirth Pandya Over a year ago

Many thanks for the answer. I am trying to understand your point of view. The problem is that the event doesnt necessarily has to be a submit. Even if I call this on a click event of a button. I face the same issue.There is no server action involved here. Its all local

Tirth Pandya Over a year ago

Works. Like you said, calling the routine on Submit was the issue. I goofed up something when I tried calling it from the 'onClick' event of a button. Works well now. Got to learn about preventDetault() though. Thanks for the answer.

Collectives™ on Stack Overflow

Javascript using innerHTML does not work to add script tag in HEAD

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related