Как мне заставить этот скрипт умножать число, введенное в поле ввода?

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я пытаюсь вывести число, которое пользователь вводит в текстовое поле, и умножить его на число, которое уже установлено. (Есть и другие кнопки, которые добавляют 1 или вычитают -1 из общего числа, которые работают просто отлично. Единственная проблема, с которой я сталкиваюсь, заключается в том, что я получаю ввод пользователя, вводя значение в поле и извлекая его)

Вот мой код:

 <!-- HTML Field that I am trying to pull a number out of -->
<input type="text" id="multNumInput">

—

 // Creative my variables
var number = 0;

// Creative a variable that is equal to whatever is inputted into the text box
var multNum = $("#multNumInput").val();

// On Button Click, take the number variable and multiply it times whatever the value was inputted in the html
$('#multiply').click(function(){
  number = number * multNum;
  $('result1').text(number);
  console.log(number);
})

Надеюсь, это достаточно ясно для понимания. На данный момент, когда я нажимаю кнопку, она всегда изменяет число обратно на 0. Вот и все. Просто 0. Независимо от того, какое значение я установил для параметра num, при нажатии кнопки mult оно всегда возвращается к 0.

1. Вам не удается преобразовать multNum строку в число — но, что более серьезно, 0 раз все равно равно 0.

2. Да, конечно, 0 * 0 равно 0 ага! Как указано выше, независимо от того, на какое число оно умножалось, оно всегда было равно 0. Я попробую преобразовать его в число, это кажется простым решением. Спасибо.

3. Вам также необходимо прочитать входное значение внутри обработчика кликов, а не снаружи, чтобы оно всегда имело актуальное значение.

Ответ №1:

Сначала вы должны преобразовать в число.

 multNum = parseInt(multNum);
number = number * multNum;
//...

1. При умножении нет разницы…. console.log("2"*"2")

2. Да, но чтобы избежать каких-либо предостережений, всегда рекомендуется сначала преобразовать в правильный тип. То, что вы можете, не означает, что вы должны 🙂

Ответ №2:

Прежде всего, очевидное: умножение любого числа на вашу number переменную, имеющую 0 значение, всегда приведет к 0 — я полагаю, вы это знаете, но были сбиты с толку или пропустили эту часть, вероятно, перепутав ее с инициализацией 0 перед процессом добавления. Установите для него значение 1 или другое неотрицательное число, и вы, вероятно, получите лучшие результаты на этом пути. 🙂

Кроме того, чтобы оно правильно умножалось в JS, вы должны умножать между двумя числами. Ваше значение имеет тип String , вставленный в ваше input поле. Как уже предлагал @Si8, вам нужно проанализировать его Number , выполнив:

 multNum = parseInt(multNum);

Кроме того, вы, похоже, используете текстовый тип для ввода.
Я предлагаю вам установить для него значение number типа, чтобы ограничить вводимые значения:

 <input type="number" id="multNumInput">

Подробнее об этом читайте в веб-документах Mozilla MDN.

Ответ №3:

Ответ, предоставленный @Robin Zigmond в комментарии, таков:

«Вам не удается преобразовать multNum из строки в число».