Почему глобальная переменная, которой я присвоил значение числового тега ввода, анализируется как строка, когда я обращаюсь к ней внутри функции?

Question

Я новичок в javascript и создаю небольшой веб-калькулятор с двумя тегами ввода для чисел.Я установил для свойства «type» ввода значение «= number», и теперь я хочу, чтобы, когда пользователь нажимает кнопку добавления, он / она получает вывод.Но проблема в том, что когда я объявляю любую переменную, содержащую значение (надежно заключенное в "parseInt") ввода GLOBALLY, и получаю доступ к этому var внутри моей функции, она анализируется как строка (даже после использования parseInt)

Я попытался объявить переменную внутри функции, и она отлично работает, я имею в виду, что она анализируется только NUMBER.Но проблема в том, что я не могу повторно назначать переменные в функции evry для add, sub ,div..etc, так как ода будет длинной и здоровенной.

Пожалуйста, помогите мне и скажите мне, как я могу объявить переменнуюГЛОБАЛЬНО, но НОМЕР ...

var value1, value2;
value1 = parseInt(document.getElementById("value1").value);
value2 = parseInt(document.getElementById("value2").value);

function add() {
  added = value1 + value2;
  document.getElementById("output").innerHTML = added;
}

First no:<input type="number" id="value1"><br> Second no:<input type="nunmber" id="value2"><br>

<button onclick="add()">add</button><br> output: <span id="output"></span>

Answer 1

Здесь вы можете увидеть, что решили вашу проблему с глобальной переменной.

var value1, value2;


function add() {
  value1 = parseInt(document.getElementById("value1").value);
  value2 = parseInt(document.getElementById("value2").value);
  if(value1 && value2){
    added = value1 + value2;
    document.getElementById("output").innerHTML = added;
    checkGlobalVal();
  }else{
    console.log('Please give the input value.');
  }
  
}

function checkGlobalVal(){
  console.log('value1:',value1,' value2:',value2);
}

First no:<input type="number" id="value1"><br> Second no:<input type="nunmber" id="value2"><br>

<button onclick="add()">add</button><br> output: <span id="output"></span>

Answer 2

Вы можете переместить присваивания переменных внутрь функции, чтобы они устанавливались каждый раз при установке функции, и вам не нужно передавать их со стороны HTML:

function add() {
  var value1 = parseInt(document.getElementById("value1").value);
  var value2 = parseInt(document.getElementById("value2").value);
  var added = value1 + value2;
  document.getElementById("output").innerHTML = added;
}

First no:<input type="number" id="value1"><br> Second no:<input type="nunmber" id="value2"><br>

<button onclick="add()">add</button><br> output: <span id="output"></span>

РЕДАКТИРОВАТЬ: Если вы хотите, чтобы переменные были глобальными, вы можете использовать прослушиватель событий:

var value1, value2;

document.getElementById("value1").addEventListener('input', function (evt) {
    value1 = +evt.target.value
});

document.getElementById("value2").addEventListener('input', function (evt) {
    value2 = +evt.target.value
});


function add() {
  var added = value1 + value2;
  document.getElementById("output").innerHTML = added;
}

First no:<input type="number" id="value1"><br> Second no:<input type="nunmber" id="value2"><br>

<button onclick="add()">add</button><br> output: <span id="output"></span>