Code is working in jsfiddle but not in html file

Question

This code works in fiddle but not in the html file:

 <!doctype html> <html> <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"> var editElem = document.getElementById("editor1"); $(document).ready(function() { $("#savebtn").click(function() { var title = prompt("What would you like your title to be?"); localStorage.setItem(title, editElem.value); titles = localStorage.getItem("titles"); if (titles == null) { titles = []; } else { titles = JSON.parse(titles); } titles.push(title); localStorage.setItem("titles", JSON.stringify(titles)); document.getElementById("update").innerHTML = "Edits saved!"; var htmlData = "<a onclick=showData('" + title + "')>" + title + "</a><br>"; $("#Contentable").append(htmlData); var userVersion = editElem.value; localStorage.setItem("userEdits", userVersion); editElem.value = ""; }); }); function showData(txt) { editElem.value = localStorage.getItem(txt); } </script> </head> <body> <input type='text' id="editor1" /> <input type='button' id="savebtn" value="save" /> <div id="Contentable"></div> <br> <br> <br> <br> <br> <div id="update"></div> </body> </html>

Fiddle: https://jsfiddle.net/4uwvcrdc/ I've checked the console in chrome; there are no errors. I also moved the script to below my body, it still doesn't work.

move editElem = document.getElementById("editor1") to document ready handler or move the entire code at the end of html ........ most of the snippet the script would be after the code or in a document ready handler....... in your code you can't get editor1 before loading the element — Pranav C Balan
– Pranav C Balan, Commented Aug 3, 2016 at 8:11

Pugazh · Accepted Answer · 2016-08-03 08:14:52Z

Small correction with linking external js file. Change

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">

to

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"> </script> <script>

<!doctype html> <html> <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> <script> var editElem = document.getElementById("editor1"); $(document).ready(function() { $("#savebtn").click(function() { var title = prompt("What would you like your title to be?"); localStorage.setItem(title, editElem.value); titles = localStorage.getItem("titles"); if (titles == null) { titles = []; } else { titles = JSON.parse(titles); } titles.push(title); localStorage.setItem("titles", JSON.stringify(titles)); document.getElementById("update").innerHTML = "Edits saved!"; var htmlData = "<a onclick=showData('" + title + "')>" + title + "</a><br>"; $("#Contentable").append(htmlData); var userVersion = editElem.value; localStorage.setItem("userEdits", userVersion); editElem.value = ""; }); }); function showData(txt) { editElem.value = localStorage.getItem(txt); } </script> </head> <body> <input type='text' id="editor1" /> <input type='button' id="savebtn" value="save" /> <div id="Contentable"></div> <br> <br> <br> <br> <br> <div id="update"></div> </body> </html>

Spencer Wieczorek · Accepted Answer · 2016-08-03 08:14:50Z

1

It's because of this line of code before document.ready:

var editElem = document.getElementById("editor1");

When that runs the item with the id of "editor1" has not loaded yet since the JS is ran at the top of the HTML file in the <head>. In jsFiddle it will run the JavaScript on a window.load event by default. Place that inside your document.ready:

$(document).ready(function() { editElem = document.getElementById("editor1"); ...

edited Aug 3, 2016 at 8:14

answered Aug 3, 2016 at 8:12

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

6 Comments

Pranav C Balan Over a year ago

eiditItem should be in global scope other wise you can't access it inside showData

Spencer Wieczorek Over a year ago

@PranavCBalan Didn't notice they used it in their function, fixed. Or they could define the function showData inside document.ready.

Pranav C Balan Over a year ago

@SpencerWieczorek : I think it would be much better to use on() method instead of inline onclick.... event delegation.... add it in your answer.......

Spencer Wieczorek Over a year ago

@PranavCBalan It's just a single static input element, I don't see why it's entirely necessary in this case. There aren't any descendant elements to take advantage of event delegation.

Pranav C Balan Over a year ago

@SpencerWieczorek they are not static $("#Contentable").append(htmlData);

|

Sooyoung Park · Accepted Answer · 2016-08-03 08:31:09Z

It can not read Jquery library. so you need to change your code

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">

to

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"> </script> <script>your javascript code </script>

Then, you can use Jquery library and your click event works!

Collectives™ on Stack Overflow

Code is working in jsfiddle but not in html file

3 Answers 3

Comments

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Linked

Related