将随机输入值转换为数字以进行计数器计算

如何解决将随机输入值转换为数字以进行计数器计算

我遇到了一个小问题。

我正在尝试构建一个计数器，到目前为止一切正常。我想添加最后一件事：一个输入字段，因此无论用户输入哪个数字，它都会被处理并添加到计数器中并显示在屏幕上。

唯一的问题是我没有得到一个整数，而是一个 NaN，我一直在努力将它转换成一个常规整数，但它似乎不起作用。

let numValue = document.getElementById('number-search').value;
let num = parseInt(numValue);

let add = document.getElementById('add');
let subtract = document.getElementById('subtract');

let int = document.getElementById('counter');
let counter = 0;

add.addEventListener('click',function() {
  counter += num;
  int.innerHTML = counter;
})

<p id="counter">0</p>
<input type="number" id="number-search" class="number-search" placeholder="Type your number here" autocomplete="off" />
<span>
  <button id="add" placeholder="">ADD</button>
</span>
<span>
  <button id="subtract" placeholder="">SUBTRACT</button>
</span>

我使用的是 Vanilla Javascript。如何将一个整数与计数器相加并显示在屏幕上？

谢谢大家

解决方法

let numValue = document.getElementById('number-search').value;
let num = parseInt(numValue);

let add = document.getElementById('add');
let subtract = document.getElementById('subtract');

let int = document.getElementById('counter');
let counter = 0;

add.addEventListener('click',function() {
let numValue = parseInt(document.getElementById('number-search').value);
let counterValue = parseInt(document.getElementById('counter').innerHTML);
  counterValue += numValue;
  document.getElementById('counter').innerHTML=counterValue;
})

<p id="counter">0</p>
<input type="number" id="number-search" class="number-search" placeholder="Type your number here" autocomplete="off" />
<span>
  <button id="add" placeholder="">ADD</button>
</span>
<span>
  <button id="subtract" placeholder="">SUBTRACT</button>
</span>

您不应在事件侦听器中使用全局变量。不知道什么时候可以修改它们。

,

您需要通过从搜索字段中提取值然后执行 click 来转换 parseInt 函数内的值：

let add = document.getElementById('add');
let subtract = document.getElementById('subtract');

let int = document.getElementById('counter');
let counter = 0;

add.addEventListener('click',function(evt) {
  const { value = '0' } = document.getElementById('number-search');
  const numericValue = parseInt(value);
  counter += numericValue;
  int.textContent = counter;
})

<p id="counter">0</p>
<input type="number" id="number-search" class="number-search" placeholder="Type your number here" autocomplete="off" />
<span>
  <button id="add" placeholder="">ADD</button>
</span>
<span>
  <button id="subtract" placeholder="">SUBTRACT</button>
</span>

,

问题是您在初始加载时获取输入字段的值，而不是在单击添加按钮时获取。

因此，当单击按钮时，num 中的值为空，这将为您提供 NaN。

另外，最好检查输入字段是否有值。

let numEl = document.getElementById('number-search');

let add = document.getElementById('add');
let subtract = document.getElementById('subtract');

let int = document.getElementById('counter');
let counter = 0;

add.addEventListener('click',function() {
  const num = numEl.value ? parseInt(numEl.value,10): 0;
  counter += num;
  int.innerHTML = counter;
})

<p id="counter">0</p>
<input type="number" id="number-search" class="number-search" placeholder="Type your number here" autocomplete="off" />
<span>
  <button id="add" placeholder="">ADD</button>
</span>
<span>
  <button id="subtract" placeholder="">SUBTRACT</button>
</span>

,

您需要在 add 函数中调用 num.value，否则它将具有常量值。然后，您需要将该 num.value 转换为数字：

let num = document.getElementById('number-search');

let add = document.getElementById('add');
let subtract = document.getElementById('subtract');

let int = document.getElementById('counter');
let counter = 0;

add.addEventListener('click',function() {
  console.log(num.value);
  counter += Number(num.value);
  int.innerHTML = counter;
})

<p id="counter">0</p>
<input type="number" id="number-search" class="number-search" placeholder="Type your number here" autocomplete="off" />
<span>
  <button id="add" placeholder="">ADD</button>
</span>
<span>
  <button id="subtract" placeholder="">SUBTRACT</button>
</span>

,

let num=()=>parseInt(document.getElementById('number-search').value) //you had a static value of "" that you tried to change to number.. that's y NaN occurs

let add = document.getElementById('add');
let subtract = document.getElementById('subtract');

let int = document.getElementById('counter');
let counter = 0;

add.addEventListener('click',function() {
  counter += num();
  int.innerHTML = counter;
})

subtract.addEventListener('click',function(){
  counter -= num();
  int.innerHTML = counter;
})

<p id="counter">0</p>
<input type="number" id="number-search" class="number-search" placeholder="Type your number here" autocomplete="off" />
<span>
  <button id="add" placeholder="">ADD</button>
</span>
<span>
  <button id="subtract" placeholder="">SUBTRACT</button>
</span>

,

试试这个:-)

let counter = 0
 actionPerform =(value)=> {

let numValue = document.getElementById('number-search').value
let num = parseInt(numValue)

let add = document.getElementById('add')
let subtract = document.getElementById('subtract')

let int = document.getElementById('counter')
if(value === 'ADD'){
  counter = counter + num 
}else{
 counter = counter - num 
}

  int.innerHTML = counter
  
}

<p id="counter">0</p>
<input type="number" id="number-search" class="number-search" placeholder="Type your number here" autocomplete="off" />
<span>
  <button id="add" placeholder="" onclick="actionPerform('ADD')">ADD</button>
</span>
<span>
  <button id="subtract"onclick="actionPerform('SUBTRACT')" placeholder="">SUBTRACT</button>
</span>