код работает в jsfiddle, но не в HTML файл

Этот код работает в скрипке, но не в HTML файл:код работает в jsfiddle, но не в 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>

Fiddle: https://jsfiddle.net/4uwvcrdc/ Я проверил консоль в хроме; ошибок нет. Я также переместил сценарий под своим телом, он все еще не работает.

источник

2016-08-03 cosmo

move 'editElem = document.getElementById (" editor1 ")' для документирования готового обработчика или перемещения всего кода в конце html ........ большая часть фрагмента скрипта будет после кода или в документе готовый обработчик ....... в коде вы не можете получить 'editor1' перед загрузкой элемента –

[javascript-on-the-the-the-page] (http: // stackoverflow. com/questions/11786915/javascript-on-the-the-the-the-page) –

небольшой коррекции с связывая внешних 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>

источник

2016-08-03 08:14:52 Pugazh

Это из-за этой строки кода перед document.ready:

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

Когда это работает элемент с помощью id из "editor1" не загружен еще со времен JS побежал в верхней части HTML-файла в <head> , В jsFiddle он будет запускать JavaScript по событию window.load по умолчанию. Поместите что внутри document.ready:

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

источник

2016-08-03 08:12:31

eiditItem должен быть в глобальном масштабе, иначе вы не сможете получить доступ к нему внутри 'showData' –

Я изменил его, но он по-прежнему не является" t working – cosmo

@PranavCBalan Не заметил, что они использовали его в своей функции, исправлено. Или они могут определить функцию 'showData' внутри' document.ready'. –

Он не может читать библиотеку 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 и ваши работы события клик!

источник

2016-08-03 08:31:09

код работает в jsfiddle, но не в HTML файл

ответ

Смежные вопросы