在html按钮中引用外部js文件的位置
[英]where to reference external js file in html button
问题描述
I'm doing an exercise from a course in Udacity and they give us an html with its functions in javascript. 
我正在从Udacity的一门课程中进行练习，他们给了我们html及其javascript功能。 The webpage consists of a form in which you write something and when you submit it then that is added to the page in a blue square. 该网页包含一个表单，您可以在其中编写一些内容，然后提交该内容，然后将其添加到页面上的蓝色方框中。 The point of this is to show us how the mvo design pattern works, so the js file is divided in the model, the view and the octopus which connects the two previous. 这样做的目的是向我们展示mvo设计模式是如何工作的，因此将js文件划分为模型，视图和连接前两者的章鱼。 Just to play around, I wanted to add a "remove" button that removed the last block in the page. 只是为了玩转，我想添加一个“删除”按钮，以删除页面中的最后一个块。 I kind of coppied the function that added a new block, but used .pop() instead of .push() in order to manipulate the localstorage of the page. 我有点想添加一个新块的函数，但是使用.pop（）而不是.push（）来操纵页面的本地存储。 I think the function is correct, but I can't figure out how to "call" the function. 我认为该功能是正确的，但是我不知道如何“调用”该功能。 I've tried to add an event listener to the button. 我试图将事件监听器添加到按钮。 I also tried to use .submit() from jquery with event.preventDefault(); 我也尝试将jquery中的.submit（）与event.preventDefault（）;一起使用。 to put the remove function as a parameter of .submit(). 将remove函数作为.submit（）的参数。 I think the closest option would be to reference the .js with tags and then call the function inside the buttons onclick attribute, but it's not working (the function is a method of an object that is inside the .js, so I tried calling it like this <button onclick = "javascript:octopus.remove()">remove!</button> ). 我认为最接近的选择是使用标签引用.js，然后在按钮的onclick属性中调用该函数，但是它不起作用（该函数是.js内部对象的方法，因此我尝试调用它像这样<button onclick = "javascript:octopus.remove()">remove!</button> ）。 Also tried using onclick but on javascript document.getElementById("button").onclick = function(){}; 还尝试使用onclick但在javascript document.getElementById("button").onclick = function(){};上进行尝试document.getElementById("button").onclick = function(){}; but nothing. 但是什么都没有。 Any help? 有什么帮助吗？ this is the js 这是js
$(function(){ var model = { init: function() { if (!localStorage.notes) { localStorage.notes = JSON.stringify([]); } }, add: function(obj) { var data = JSON.parse(localStorage.notes); data.push(obj); localStorage.notes = JSON.stringify(data); }, getAllNotes: function() { return JSON.parse(localStorage.notes); }, //here I tried everything but nothing seems to work remove: function() { document.getElementById("button").onclick = function(){ var data = JSON.parse(localStorage.notes); data.push(obj); localStorage.notes = JSON.stringify(data); }; } }; var octopus = { addNewNote: function(noteStr) { model.add({ content: noteStr }); view.render(); }, getNotes: function() { return model.getAllNotes().reverse(); }, init: function() { model.init(); view.init(); }, removeNote: function(){ model.remove(); view.render(); } }; var view = { init: function() { this.noteList = $('#notes'); var newNoteForm = $('#new-note-form'); var newNoteContent = $('#new-note-content'); newNoteForm.submit(function(e){ octopus.addNewNote(newNoteContent.val()); newNoteContent.val(''); e.preventDefault(); }); view.render(); }, render: function(){ var htmlStr = ''; octopus.getNotes().forEach(function(note){ htmlStr += '<li class="note">'+ note.content + '</li>'; }); this.noteList.html( htmlStr ); }, }; octopus.init(); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Udacity Retain</title> <link rel="stylesheet" href="css/retain.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/retain.js"></script> <form id="new-note-form" class="new-note-form"> <input id="new-note-content" class="new-note-content"> </form> <button id = "button">remove!</button> <ul id="notes" class="notes"></ul> </body> </html>
1 个解决方案
解决方案1
0 2018-12-04 01:46:45
You are nearly there.. I've updated your code to work, see below. 您快到了。.我已经更新了您的代码，可以正常工作，请参阅下文。
Firstly, you need to make model.remove() actually delete an item by using pop() and then saving the updated data. 首先，您需要使model.remove()实际上使用pop()删除项目，然后保存更新的数据。
Secondly, you need to hook up a click event to the remove button. 其次，您需要将click事件关联到remove按钮。 I've added this in view.init() after where you hook up the form submit. 我在连接表单提交之后在view.init()添加了它。
$(function(){ var model = { init: function() { if (!localStorage.notes) { localStorage.notes = JSON.stringify([]); } }, add: function(obj) { var data = JSON.parse(localStorage.notes); data.push(obj); localStorage.notes = JSON.stringify(data); }, getAllNotes: function() { return JSON.parse(localStorage.notes); }, // Updated method below remove: function() { var data = JSON.parse(localStorage.notes); data.pop(); localStorage.notes = JSON.stringify(data); } }; var octopus = { addNewNote: function(noteStr) { model.add({ content: noteStr }); view.render(); }, getNotes: function() { return model.getAllNotes().reverse(); }, init: function() { model.init(); view.init(); }, removeNote: function(){ model.remove(); view.render(); } }; var view = { init: function() { this.noteList = $('#notes'); var newNoteForm = $('#new-note-form'); var newNoteContent = $('#new-note-content'); var removeBtn = $('#button'); newNoteForm.submit(function(e){ octopus.addNewNote(newNoteContent.val()); newNoteContent.val(''); e.preventDefault(); }); // Added click event on the remove button removeBtn.on('click', function() { octopus.removeNote(); }); view.render(); }, render: function(){ var htmlStr = ''; octopus.getNotes().forEach(function(note){ htmlStr += '<li class="note">'+ note.content + '</li>'; }); this.noteList.html( htmlStr ); }, }; octopus.init(); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Udacity Retain</title> <link rel="stylesheet" href="css/retain.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/retain.js"></script> <form id="new-note-form" class="new-note-form"> <input id="new-note-content" class="new-note-content"> </form> <button id = "button">remove!</button> <ul id="notes" class="notes"></ul> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.