代码在 jsfiddle 中工作，但不在 html 文件中答案

【问题标题】：Code is working in jsfiddle but not in html file代码在 jsfiddle 中工作，但不在 html 文件中
【发布时间】：2016-08-03 08:10:07
【问题描述】：

此代码在小提琴中有效，但在 html 文件中无效：

    <!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>

小提琴：https://jsfiddle.net/4uwvcrdc/ 我已经在 chrome 中检查了控制台；没有错误。我也把脚本移到了身体下面，还是不行。

【问题讨论】：

将 editElem = document.getElementById("editor1") 移动到文档就绪处理程序或将整个代码移动到 html 的末尾 ........脚本的大部分 sn-p 将在代码之后或在文档准备处理程序.......在你的代码中你不能在加载元素之前得到editor1
javascript-on-the-bottom-of-the-page

标签： javascript jquery html

【解决方案1】：

链接外部 js 文件的小修正。改变

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

到

<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>

【讨论】：

【解决方案2】：

是因为document.ready之前的这行代码：

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

当运行带有"editor1" 的id 的项目时，由于JS 在<head> 中的HTML 文件的顶部运行，因此尚未加载。在 jsFiddle 中，默认情况下它将在 window.load 事件上运行 JavaScript。把它放在你的document.ready：

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

【讨论】：

eiditItem 应该在全局范围内，否则您无法在 showData 内访问它
@PranavCBalan 没有注意到他们在功能中使用了它，已修复。或者他们可以在document.ready 中定义函数showData。
@SpencerWieczorek ：我认为使用on() 方法而不是内联onclick....事件委托....在您的答案中添加它会更好...... ..
@PranavCBalan 这只是一个静态 input 元素，我不明白为什么在这种情况下它是完全必要的。没有任何后代元素可以利用事件委托。
@SpencerWieczorek 他们不是静态的$("#Contentable").append(htmlData);

【解决方案3】：

它无法读取 Jquery 库。所以你需要改变你的代码

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

到

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

然后，您可以使用 Jquery 库并且您的点击事件有效！

【讨论】：