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, Aug 03 '16 at 08:11
[javascript-on-the-bottom-of-the-page](http://stackoverflow.com/questions/11786915/javascript-on-the-bottom-of-the-page) — Mi-Creativity, Aug 03 '16 at 08:15

score 2 · Accepted Answer · answered Aug 03 '16 at 08:14

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 · Answer 2 · 2016-08-03T08:14:50.910

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 03 '16 at 08:14

answered Aug 03 '16 at 08:12

Spencer Wieczorek

21,229
7
44
54

1

eiditItem should be in global scope other wise you can't access it inside `showData` – Pranav C Balan Aug 03 '16 at 08:14
@PranavCBalan Didn't notice they used it in their function, fixed. Or they could define the function `showData` inside `document.ready`. – Spencer Wieczorek Aug 03 '16 at 08:15
@SpencerWieczorek : I think it would be much better to use `on()` method instead of inline `onclick`.... event delegation.... add it in your answer....... – Pranav C Balan Aug 03 '16 at 08:17
@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. – Spencer Wieczorek Aug 03 '16 at 08:24
@SpencerWieczorek they are not static `$("#Contentable").append(htmlData);` – Pranav C Balan Aug 03 '16 at 08:28
@PranavCBalan Sure, thought you meant the `#savebtn`. – Spencer Wieczorek Aug 03 '16 at 08:32

score 0 · Answer 3 · answered Aug 03 '16 at 08:31

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!

Code is working in jsfiddle but not in html file

3 Answers3