如何在点击时增加和减少数字并将其存储在本地存储中？

Question

这是 Reddit 应用的示例。我想在单击“upvote”或“downvote”按钮时增加或减少一个数字，并且它的值应该存储在本地存储中......谢谢；

HTML 标记：

<div class="submit-box">
    <form id="myForm">
        <h2>Add a Link</h2>
        <h3>Title:</h3>
        <input type="text" placeholder="Enter title" id="siteName">
        <h3>Link:</h3>
        <input type="text" id="siteUrl" placeholder="Enter URL Link">
        <button class="btn" >Submit Link</button>
    </form>
</div>

<div class="container">
    <div class="content-box" id="content">
        // Code dynamically generated from javascript...  
    </div>
</div>

Javascript 代码：

let form = document.getElementById('myForm');
let content = document.querySelector('#content');


function addIt(e) {
    e.preventDefault();
    let siteName = document.getElementById('siteName').value;
    let siteUrl = document.getElementById('siteUrl').value;

    content.innerHTML += `
    <div class="row">
      <div class="points col-md-4">
          <p class="num">0</p>
          <p class="point">Points</p>
       </div>
       <div class="matter col-md-6">
         <h2>${siteName}</h2>
         <p class="lead">${siteUrl}</p>
         <button class="upvote">upvote</button>
         <button class="downvote">downvote</button>
       </div>
     </div>
      `

    votes();
}


function votes() {
    let upvotes = Array.from(document.querySelectorAll('.upvote'));
    let downvotes = Array.from(document.querySelectorAll('.downvote'));

   upvotes.forEach(upvote => upvote.addEventListener('click', up));
   downvotes.forEach(downvote => downvote.addEventListener('click', down));

   function up() {
     //...
   }

   function down() {
     //...
   }

}

结果输出：

Answer 1

首先，找到每个按钮的点，即

let point = this.parentNode.parentNode.querySelector(".num");

因为它在按钮的父 div 的父 div 中，并且在那里它是适合 .num 的第一个元素。

之后，增加或减少innerHTML

point.innerHTML = parseInt(point.innerHTML)+1

let form = document.getElementById('myForm');
let content = document.querySelector('#content');

form.addEventListener("submit", addIt);

function addIt(e) {
  e.preventDefault();
  let siteName = document.getElementById('siteName').value;
  let siteUrl = document.getElementById('siteUrl').value;

  content.innerHTML += `
    <div class="row rating">
      <div class="points col-md-4">
          <p class="num">0</p>
          <p class="point">Points</p>
       </div>
       <div class="matter col-md-6">
         <h2>${siteName}</h2>
         <p class="lead">${siteUrl}</p>
         <button class="upvote">upvote</button>
         <button class="downvote">downvote</button>
       </div>
     </div>
      `

  votes();
}


function votes() {
  let upvotes = Array.from(document.querySelectorAll('.upvote'));
  let downvotes = Array.from(document.querySelectorAll('.downvote'));

  upvotes.forEach(upvote => upvote.addEventListener('click', up));
  downvotes.forEach(downvote => downvote.addEventListener('click', down));

  function up() {
    let point = this.parentNode.parentNode.querySelector(".num");
    point.innerHTML = parseInt(point.innerHTML)+1
  }

  function down() {
    let point = this.parentNode.parentNode.querySelector(".num");
    point.innerHTML = parseInt(point.innerHTML)-1
  }

}

.rating {
  border: 1px solid red;
}

<div class="submit-box">
  <form id="myForm">
    <h2>Add a Link</h2>
    <h3>Title:</h3>
    <input type="text" placeholder="Enter title" id="siteName">
    <h3>Link:</h3>
    <input type="text" id="siteUrl" placeholder="Enter URL Link">
    <button class="btn" type="submit">Submit Link</button>
  </form>
</div>

<div class="container">
  <div class="content-box" id="content">
    // Code dynamically generated from javascript...
  </div>
</div>

我添加了红色边框，以便您可以查看哪些元素属于哪个网站。

要将其保存到 localStorage，您可以从网站制作一个 JSON 数组并保存。添加新网站时，从 localStorage 获取该数组并将新网站添加到其中。加载时获取相同的内容并为它们中的每一个运行 addIt。

let form = document.getElementById('myForm');
let content = document.querySelector('#content');
form.addEventListener("submit", addIt);


let websiteArr = [];

try {
  websiteArr = JSON.parse(localStorage.getItem("websites"));
} catch {
  // no websites in localStorage
}

if (websiteArr.length != 0) {
  websiteArr.forEach(web => {
    addIt(!0, {name:web.name, url:web.url, points:web.points});
  });
}


function addIt(e, options) {
  e && e.preventDefault(); // only run preventDefault when addIt is called in the submit handler of the form
  let siteName = document.getElementById('siteName').value;
  let siteUrl = document.getElementById('siteUrl').value;
  let points = 0;
  
  if(options) {
    siteName = options.name;
    siteUrl = options.url;
    points = options.points;
  }

  content.innerHTML += `
    <div class="row rating">
      <div class="points col-md-4">
          <p class="num">${points}</p>
          <p class="point">Points</p>
       </div>
       <div class="matter col-md-6">
         <h2>${siteName}</h2>
         <p class="lead">${siteUrl}</p>
         <button class="upvote">upvote</button>
         <button class="downvote">downvote</button>
       </div>
     </div>
      `

  votes();
}

function saveArray() {
  localStorage.setItem("websites", JSON.stringify(websiteArr));
}


function votes() {
  let upvotes = Array.from(document.querySelectorAll('.upvote'));
  let downvotes = Array.from(document.querySelectorAll('.downvote'));

  upvotes.forEach(upvote => upvote.addEventListener('click', up));
  downvotes.forEach(downvote => downvote.addEventListener('click', down));

  function up() {
    let point = this.parentNode.parentNode.querySelector(".num");
    point.innerHTML = parseInt(point.innerHTML)+1
    let url = this.parentNode.querySelector("p").innerHTML;
    websiteArr.forEach(web => (web.url === url) && web.points++);
    saveArray();
  }

  function down() {
    let point = this.parentNode.parentNode.querySelector(".num");
    point.innerHTML = parseInt(point.innerHTML)-1
    let url = this.parentNode.querySelector("p").innerHTML;
    websiteArr.forEach(web => (web.url === url) && web.points--);
    saveArray();
  }

}

.rating {
  border: 1px solid red;
}

<div class="submit-box">
  <form id="myForm">
    <h2>Add a Link</h2>
    <h3>Title:</h3>
    <input type="text" placeholder="Enter title" id="siteName">
    <h3>Link:</h3>
    <input type="text" id="siteUrl" placeholder="Enter URL Link">
    <button class="btn" type="submit">Submit Link</button>
  </form>
</div>

<div class="container">
  <div class="content-box" id="content">
    // Code dynamically generated from javascript...
  </div>
</div>