CODEWITHSUNDEEP
javascriptjqueryhtml
cosmo
cosmo

Reputation: 761

Code is working in jsfiddle but not in html file

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.

Upvotes: 2

Views: 191

Answers (3)

Sooyoung Park
Sooyoung Park

Reputation: 405

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!

Upvotes: 0

Pugazh
Pugazh

Reputation: 9561

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>

Upvotes: 2

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21565

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");
    ...

Upvotes: 1

Related Questions