-Code wird in jsfiddle arbeiten, aber nicht in HTML-Datei

Dieser Code in Geige funktioniert, aber nicht in der HTML-Datei:-Code wird in jsfiddle arbeiten, aber nicht in HTML-Datei

<!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/ ich die Konsole in Chrom eingecheckt haben; Es gibt keine Fehler. Ich habe das Skript auch unter meinen Körper verschoben, es funktioniert immer noch nicht.

Quelle

2016-08-03 cosmo

move 'editElem = document.getElementById (" editor1 ")' um den fertigen Handler zu dokumentieren oder den gesamten Code am Ende von html zu verschieben ......... der Großteil des Snippets wäre das Skript nach dem Code oder in einem Dokument bereit Handler ....... in Ihrem Code können Sie nicht 'Editor1' vor dem Laden des Elements –

[Javascript-auf-der-Unterseite der Seite] (http: // stackoverflow. com/questions/11786915/javascript-on-the-bottom-of-the-page) –

Kleine Korrektur mit Anbindung externer js Datei. Ändern

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

Quelle

2016-08-03 08:14:52 Pugazh

Es ist wegen dieser Codezeile vor document.ready:

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

Wenn das das Element mit läuft die id von "editor1" nicht geladen ist noch seit dem JS ist an der Spitze der HTML-Datei läuft im <head> . In jsFiddle wird JavaScript standardmäßig auf einem window.load-Ereignis ausgeführt. Legen Sie, dass in Ihrem document.ready:

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

Quelle

2016-08-03 08:12:31

eiditItem sollte im globalen Bereich sein, andere weise können Sie nicht darauf zugreifen in 'showData' –

Ich habe es geändert, aber es ist immer noch nicht ' t funktioniert – cosmo

@PranavCBalan bemerkte nicht, dass sie es in ihrer Funktion verwendet, behoben. Oder sie könnten die Funktion 'showData' in' document.ready' definieren. –

Es ist nicht JQuery Bibliothek lesen kann. so müssen Sie den Code

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

dann ändern, können Sie jQuery-Bibliothek und Ihre Click-Ereignis Werke nutzen!

Quelle

2016-08-03 08:31:09

-Code wird in jsfiddle arbeiten, aber nicht in HTML-Datei

Antwort

Verwandte Themen