Question

此代码适用于小提琴，但不适用于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检查了控制台;没有错误。我也把脚本移到了我的身体下面，它仍然不起作用。

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

Answer 2

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

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

当运行时id "editor1" <head>尚未加载的项目，因为JS在window.load的HTML文件顶部运行。在jsFiddle中，它默认会在document.ready事件上运行JavaScript。将其放在$(document).ready(function() { editElem = document.getElementById("editor1"); ...：

中

set /p var=

Answer 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库并使您的点击事件有效！

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

3 个答案: