页面上有多个javascript计数器

Question

我的代码如下。

我想显示几个计数器，如计数器#1，计数器#2等。

我想知道是否有比多次重复脚本更好的方法。换句话说，有一个脚本，每个不同的计数器可以调用，如果这是有意义的。

谢谢！我的代码如下。

const countBtn = document.querySelector('.countBtn button')
let countNum = document.querySelector('.countNum div')
let downBtn = document.querySelector('.downBtn button')
let resetBtn = document.querySelector('.resetBtn button')

countBtn.addEventListener('click', countUp);
downBtn.addEventListener('click', countDown);
resetBtn.addEventListener('click', reset);

function countUp(){
	countNum.innerHTML ++;
}

function countDown(){
	countNum.innerHTML --;
}


function reset(){
	countNum.innerHTML = 0;
}

div{
	margin: 0;
	padding: 0;
}
button{
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	border-radius: 5px;
}
.countNum{
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	background-color: white;
	color: black;
	border: solid gray;
	height: 40px;
	width: 40px;
	padding: 0;
	margin: 5px 0 0 0;
	border-radius: 5px;
}
.counter{
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	color: white;
	font-size: 2rem;
	background-color: rgb(221, 5, 5);
	padding: 5px;
	margin: 0;
	display: flex;
	justify-content: left;
	border-radius: 10px;
	width: 60%;
}
.counter button{
	height: 45px;
	width: 45px;
	margin: 5px;
}

<div class='counter'>
	<div class='downBtn'>
		<button>-</button>
	</div>
	<div class='resetBtn'>
		<button>R</button>
	</div>
	<div class='catagory'>
		<div>Counter #1</div>
	</div>
	<div class = 'countNum'>
		<div> 0 </div>
	</div>
	<div class='countBtn'>
		<button>+</button>
	</div>
</div>

Answer 1

你可以实现揭示模块模式，它看起来像。

function Counter(defaultValue) {
  var root = document.createElement('div');
  var inc = document.createElement('button');
  var dec = document.createElement('button');
  var display = document.createElement('span');
  
  inc.innerText = '+';
  dec.innerText = '-';
  
  root.appendChild(display);
  root.appendChild(inc);
  root.appendChild(dec);
  
  
  inc.addEventListener('click', add);
  dec.addEventListener('click', subtract);
  
  function getRoot() {
   return root;
  }
  
  function add() {
   defaultValue++;
   render();
  }
  
  function subtract() {
   defaultValue--;
   render();
  }
  
  function render() {
   display.innerText = defaultValue;
  }
  
  render();
  
  return {
    getRoot: getRoot,
    add: add,
    subtract: subtract
  }
  
}

var wrapper = document.querySelector('#wrapper');
document.querySelector('button').addEventListener('click', function () {
 wrapper.appendChild(Counter(0).getRoot());
})

<button>Add counter</button>

<div id="wrapper">

</div>

Answer 2

是的，有多种方法可以实现，这里是其中之一

function setupCounter(counter) {
  const countBtn = counter.querySelector('.countBtn button')
  let countNum = counter.querySelector('.countNum div')
  let downBtn = counter.querySelector('.downBtn button')
  let resetBtn = counter.querySelector('.resetBtn button')

  countBtn.addEventListener('click', countUp);
  downBtn.addEventListener('click', countDown);
  resetBtn.addEventListener('click', reset);

  function countUp() {
    countNum.innerHTML++;
  }

  function countDown() {
    countNum.innerHTML--;
  }


  function reset() {
    countNum.innerHTML = 0;
  }
}
const firstCounter = document.querySelector('div.counter')
setupCounter(firstCounter)

function addCounter(category, parent = document.body) {
  const clone = firstCounter.cloneNode(true)
  clone.querySelector('div.category').innerText = category
  parent.appendChild(clone)
  
  setupCounter(clone)
}

addCounter(`Custom Name`)
addCounter(`God bless 'Merica`)

for (let i=2; i <= 3; i++) {
  addCounter(`Counter ${i}`)
}

div {
  margin: 0;
  padding: 0;
}

button {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 5px;
}

.countNum {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  background-color: white;
  color: black;
  border: solid gray;
  height: 40px;
  width: 40px;
  padding: 0;
  margin: 5px 0 0 0;
  border-radius: 5px;
}

.counter {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  color: white;
  font-size: 2rem;
  background-color: rgb(221, 5, 5);
  padding: 5px;
  margin: 0;
  display: flex;
  justify-content: left;
  border-radius: 10px;
  width: 60%;
}

.counter button {
  height: 45px;
  width: 45px;
  margin: 5px;
}

<body>
  <div class='counter'>
    <div class='downBtn'>
      <button>-</button>
    </div>
    <div class='resetBtn'>
      <button>R</button>
    </div>
    <div class='category'>
      <div>Counter #1</div>
    </div>
    <div class='countNum'>
      <div> 0 </div>
    </div>
    <div class='countBtn'>
      <button>+</button>
    </div>
  </div>
<body>