这是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() {
//...
}
}
输出结果:
首先,找到每个按钮的点,即
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>