时间戳

首页 > 解决方案 > 如何从innerHTML调用方法。？

javascript - 如何从innerHTML调用方法。？

问题描述

我的问题与这两种方法有关。DisplayBookmark() 和 deleteBookmark()。显示书签有一个 url。当我按下按钮删除时，我需要获取该 url，并放入 deleteBookmark() 方法。我需要修改这一行： <a class="button button__delete">Delete</a> Codepen 示例

[类似示例] 第 88 行 ( https://github.com/bradtraversy/bookmarker/blob/master/js/main.js ) 但使用 ES5 语法

我的想法：

提前致谢

HTML

  <div class="wrapper">
        <form id="bookmarkFormID" class="bookmarkForm">
            <h3 class="bookmarkForm__title">Bookmark your Favourite Sites</h3>
            <p class="bookmarkForm__p">Website Name</p>
            <input id="siteName" type="text" placeholder="Website Name">
            <p class="bookmarkForm__p">Website URL</p>
            <input id="siteURL" type="text"  placeholder="Website URL">
            <input class="submitButton" type="submit" value="Submit">
        </form>
    </div>
    <div class="wrapper">
        <div class="bookmarkResults">  
        </div>
    </div>

Javascript

class Bookmark {
    constructor(){
        // Properties
        this.siteName               = document.getElementById('siteName');
        this.siteURL                = document.getElementById('siteURL');
        this.bookmarkForm           = document.getElementById('bookmarkFormID');
        this.bookmarksResults       = document.querySelector('.bookmarkResults');

        // Methods
        this.bookmarkForm.addEventListener('submit', event => this.saveBookmarks(event))

        this.validateForm;
        this.displayBookmark;

        this.events();

    }
    events(){
    this.displayBookmark();
    }
    // Save bookmark data and implements local storage
    saveBookmarks(event){

       //  Implements Local Storage
        let bookmarkObject = {
            siteName: siteName.value,
            siteUrl:  siteURL.value
        }

        if(localStorage.getItem("bookmarks") === null){
            let bookmarks = [];
            bookmarks.push(bookmarkObject)
            localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
        }else{
            let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
            bookmarks.push(bookmarkObject);
            localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
        }
        // Resets form
        this.bookmarkForm.reset();

        this.displayBookmark();
        event.preventDefault();
    }
    // Display bookmark on DOM
    displayBookmark(){
       let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
        // If local storage is empty.
        if(bookmarks == null){
            return false;
        }else{
            this.bookmarksResults.innerHTML = ``;
            for (let index = 0; index < bookmarks.length; index++) {
            let name = (bookmarks[index].siteName).charAt(0).toUpperCase() + bookmarks[index].siteName.slice(1);
            let url = bookmarks[index].siteUrl;
            console.log("url is " + url);
            this.bookmarksResults.innerHTML += 
            `
            <ul>
                <li><h2 ><a class="bookmarkResults__title" href="${url}" target="_blank">${name}</a></h2>
                <a class="button button__delete">Delete</a>
                <a class="button button__edit">Edit</a>
                <a class="button button__visit" href="${url}" target="_blank">Visit</a>
                </li>
            </ul>   
            `
            }  
        }
    }
    deleteBookmark(url){    
        let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
        for (let index = 0; index < bookmarks.length; index++) {
            if(bookmarks[index].siteUrl == url){
                console.log("is it working?");
                bookmarks.splice(index, 1); 
            } 
        }
        localStorage.setItem(bookmarks, JSON.stringify(bookmarks));
    }
}
const bookmark = new Bookmark;

标签： javascripthtml

解决方案

我建议您为您的 DOM 动态创建 DOM ul，而不仅仅是使用 innerHTML。当您使用 js 创建按钮时，通过创建所有元素var list = document.createElement('ul');并在之后附加：您可以简单地向其添加事件侦听器。另外我建议您使用而不是：this.bookmarksResults.appendChild(list)var deleteButton = document.createElement('a');buttona

var ul = document.createElement('ul');
var deleteButton = document.createElement('button');
deleteButton.addEventListener('click', function(bookmark) {
  // do something with bookmark here
}.bind(bookmarks[index]));
ul.appendChild(deleteButton);

推荐阅读