有没有办法定义最大值和最小值（数字）？

Question

有没有办法定义最大金额，例如3 和最小量，例如0 到变量？

所以我们有let n = 0;，我想要它，当我单击一个按钮时，它会加 1，我的意思是 n++;，当我单击另一个按钮 (n--;) 时会减 1。

我试过这个n = Math.max(0 , min(3, n + 1)); 但没用。

我正在制作照片滑块，所以 n 将是值：Object.values(foo)[n]。

如果你给我另一种回答方式，我会很高兴，但不要忘记按我想要的方式回答：D

这是我的代码：

let n = 0;

const result = document.querySelector('h2');

document.querySelector('.add').addEventListener('click', () => {
  n++;
  result.textContent = `n is ${n}`;
});

document.querySelector('.substract').addEventListener('click', () => {
  n--;
  result.textContent = `n is ${n}`;
});

<button type="button" class="substract">substract</button>
<button type="button" class="add">add</button>

<h2></h2>

<p>The min amount should be : 0<br>The max amount should be : 3</p>

Answer 1

你可以从你的听众那里提早回来。

let n = 0;

const result = document.querySelector('h2');

document.querySelector('.add').addEventListener('click', () => {
  if (n === 3) return;
  n++;
  result.textContent = `n is ${n}`;
});

document.querySelector('.substract').addEventListener('click', () => {
  if (n === 0) return;
  n--;
  result.textContent = `n is ${n}`;
});

<button type="button" class="substract">substract</button>
<button type="button" class="add">add</button>

<h2></h2>

<p>The min amount should be : 0<br>The max amount should be : 3</p>

Answer 2

您可以在分配值之前使用条件来完成

let n = 0;

const result = document.querySelector('h2');

document.querySelector('.add').addEventListener('click', () => {
  n = n<3 ? n+1 : n;   // -------- Conditional
  result.textContent = `n is ${n}`;
});

document.querySelector('.substract').addEventListener('click', () => {
  n = n>0 ? n-1 : n;   // -------- Conditional
  result.textContent = `n is ${n}`;
});

<button type="button" class="substract">substract</button>
<button type="button" class="add">add</button>

<h2></h2>

<p>The min amount should be : 0<br>The max amount should be : 3</p>

Answer 3

如果您不需要它是单行的，您可以创建一个简单的函数，其中包含if 语句来检查范围。我使用changeN 函数修改了您的代码来执行此操作。

let n = 0;

function changeN(x) {
  n += x;
  if (n > 3) n = 3;
  if (n < 0) n = 0;
}
const result = document.querySelector('h2');

document.querySelector('.add').addEventListener('click', () => {
  changeN(1);
  result.textContent = `n is ${n}`;
});

document.querySelector('.substract').addEventListener('click', () => {
  changeN(-1);
  result.textContent = `n is ${n}`;
});

<button type="button" class="substract">substract</button>
<button type="button" class="add">add</button>

<h2></h2>

<p>The min amount should be : 0<br>The max amount should be : 3</p>

Answer 4

您可以使用getter 和setter 试试这个：

let yourNObj = {
 value : 0,
 get val(){
   return this.value;
 },
 set val(newVal){
 if(newVal >= 0 && newVal<=3){
   this.value = newVal;
 }
 }
}

const result = document.querySelector('h2');

document.querySelector('.add').addEventListener('click', () => {
  yourNObj.val++;
  result.textContent = `n is ${yourNObj.val}`;
});

document.querySelector('.substract').addEventListener('click', () => {
  yourNObj.val--;
  result.textContent = `n is ${yourNObj.val}`;
});

<button type="button" class="substract">substract</button>
<button type="button" class="add">add</button>

<h2></h2>

<p>The min amount should be : 0<br>The max amount should be : 3</p>

Answer 5

您可以使用Math.max 和Math.min 来限制数量 - 您还可以对两个按钮使用same 事件侦听器，而不必重复代码。只需给两个按钮一个相似的类，然后在侦听器中“嗅探”哪个按钮。

let n = 0, max = 3, min = 0;

const result = document.querySelector('h2');

document.querySelectorAll('.calc').forEach(el => el.addEventListener('click', e => {
  let inc = e.target.classList.contains('add') ? 1 : -1;
  n += inc;
  n = Math.min(n, max);
  n = Math.max(n, min);
  result.textContent = `n is ${n}`;
}));

<button type="button" class="calc subtract">substract</button>
<button type="button" class="calc add">add</button>

<h2></h2>

<p>The min amount should be : 0<br>The max amount should be : 3</p>