Как заставить JavaScript отображать числа вместо строк

Итак, я новичок в javascript, и я пытаюсь сделать эту вещь, в которой я ввожу 2 значения, и они будут либо увеличивать, либо умножать, либо делить и т. д. От того, что я ввожу в код. Но почему-то, когда я пытаюсь умножить 5 * 2, будет отображаться 10, но когда я попробую 5 + 2, будет показано 52, как мне это исправить? Я пробовал parseInt (), но это не сработало

[Вывод] [1]

Код:

function myfunction() {
var x = document.getElementById("fname").value;
var y = document.getElementById("lname").value;
var z = x + y;

document.getElementById("output").innerHTML = z;

<form>
<input type = "Number" id = "fname" value = "" ><br><br>
<input type = "number" id = "lname" value = "" ><br><br>


</form>

<button type = "button" onclick = "myfunction()">submit</button>

<p id = "output"></p>

Я нашел эту статью действительно полезной medium.freecodecamp.org/js-type-coercion-explained-27ba3d9a2‌ 839

— 03.04.2018 09:36

javascript html

03.04.2018 09:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Сначала преобразуйте значения в Number. .value из элемента всегда будет строкой.

function myfunction() {
var x = Number(document.getElementById("fname").value);
var y = Number(document.getElementById("lname").value);
var z = x + y;

document.getElementById("output").innerHTML = z;
}

<form>
<input type = "Number" id = "fname" value = "" ><br><br>
<input type = "number" id = "lname" value = "" ><br><br>


</form>

<button type = "button" onclick = "myfunction()">submit</button>

<p id = "output"></p>

Стоит ли отвечать на этот вопрос? ...

— 03.04.2018 09:35

Math.round тоже работают :)

— 03.04.2018 09:35

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

— 03.04.2018 09:35

@Zenoo, если ты здесь, чтобы просто означать, что можешь уйти, не все профессионалы

— 03.04.2018 09:36

Но в любом случае это сработало! большое тебе спасибо

— 03.04.2018 09:37

@ Филипп Я не имею в виду. Я связал вам ответ на ваш вопрос. Этот вопрос задавали уже много раз.

— 03.04.2018 09:37

03.04.2018 09:34

Это связано с тем, что и x, и y являются строкой. Используйте parseInt для преобразования строки в число перед выполнением математической операции.

function myfunction() {
  var x = document.getElementById("fname").value;
  var y = document.getElementById("lname").value;
  console.info(typeof x) // string
  var z = parseInt(x, 10) + parseInt(y, 10);

  document.getElementById("output").innerHTML = z;

}

<form>
  <input type = "Number" id = "fname" value = ""><br><br>
  <input type = "number" id = "lname" value = ""><br><br>


</form>

<button type = "button" onclick = "myfunction()">submit</button>

<p id = "output"></p>

03.04.2018 09:36

Другие вопросы по теме

Vue.js 2 тег h3 в теге не работает

ОШИБКА TypeError: невозможно прочитать свойство undefined

Используйте несколько блоков и представлений в шаблонах django

Добавление числа потомков в скобках к каждому элементу списка (LI). Пропустить те LI, внутри которых нет других элементов списка

Отображать значок fa, если загрузка изображения не удалась

Css overflow-y на странице загрузки html

Преобразование div не работает при наведении курсора мыши с помощью javascript

HTML / CSS Практическое руководство. Адаптивная форма, состоящая из прямоугольника + треугольника

Нижнее поле изображения мешает высоте строки

Как сделать так, чтобы высота внутреннего изгиба занимала все пространство

Как заставить JavaScript отображать числа вместо строк

Ответы 2

Другие вопросы по теме

Похожие вопросы