JavaScript возвращает NaN при добавлении двух значений

У меня небольшая проблема с моим JS-кодом. Я хочу рассчитать на основе значений, которые я введу в форму. У меня есть две формы: одна для победителя и одна для проигравшей. На основании этого я рассчитываю время в секундах для победителя и проигравшего. После того, как я получу оба значения в секундах, мне нужно вычислить третье значение. И вот моя проблема. Мой JS возвращает NaN: / Я застрял и мне нужно другое мнение. Спасибо за помощь

function calcWinner() {
  // vars
  const h = parseInt(document.querySelector('#h-winner').value);
  const m = parseInt(document.querySelector('#m-winner').value);
  const s = parseInt(document.querySelector('#s-winner').value);

  const hMin = h * 60;
  const mMin = (m + hMin) *60;
  const sSec = mMin + s;
  winner = sSec;

  console.info(winner +' winner score');
  return winner;
};

function calcLooser() {
  // vars
  const h = parseInt(document.querySelector('#h-looser').value);
  const m = parseInt(document.querySelector('#m-looser').value);
  const s = parseInt(document.querySelector('#s-looser').value);

  const hMin = h * 60;
  const mMin = (m + hMin) *60;
  const sSec = mMin + s;
  looser = sSec;

  console.info(looser + ' looser score');
  return looser;
};

function radioCheck(winner, looser){
  // vars
  const radioMega = document.querySelector('#mega').checked;
  const radioMini = document.querySelector('#mini').checked;
  // let sector;
  // check distance
  if (radioMega === true){
      sector = winner / looser;
  }else if (radioMini === true){
      sector = (winner / looser) * 0.920;
  }else{
      alert('error')
  }
  console.info(sector);
};

<form class = "time">
    <input type = "number" class = "input-time" id = "h-winner"placeholder = "h"> 
    <input type = "number" class = "input-time" id = "m-winner"placeholder = "min">
    <input type = "number" class = "input-time" id = "s-winner"placeholder = "s">
</form>
<form class = "time">
    <input type = "number" class = "input-time" id = "h-looser" placeholder = "h">
    <input type = "number" class = "input-time" id = "m-looser" placeholder = "min">
    <input type = "number" class = "input-time" id = "s-looser" placeholder = "s">
</form>
<div class = "btn-radio">
    <input type = "radio" name = "distance" id = "mega" class = "btn-radio__input mg">
    <span class = "radio-text">Mega/Giga</span>
    <input type = "radio" name = "distance" id = "mini" class = "btn-radio__input mi">
    <span class = "radio-text">Mini</span>
</div>

введите описание изображения здесь

document.querySelector('.btn-oblicz').addEventListener('click', calcSektor);
function calcSektor(){
calcWinner();
calcLooser();
radioCheck();}

Как и когда вызываются функции?

— 29.11.2018 20:59

Прогоните свой код в скрипке, отлично работает. Единственный раз, когда он будет читать NaN, - это если значение было оставлено пустым. Для этого вам нужно по умолчанию присвоить числовое значение, чтобы избежать. jsfiddle.net/v43mLeba/3

— 29.11.2018 20:59

Я использую addEventListener ("щелчок") с функцией

— 29.11.2018 21:07

пожалуйста, добавьте свой код прослушивателя кликов

— 29.11.2018 21:11

работает для меня с тем же кодом - codepen.io/nagasai/pen/vQQMrQ, пожалуйста, дайте мне значения, которые вы пытаетесь проверить

— 29.11.2018 21:15

javascript

29.11.2018 20:54

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 1

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

Для достижения ожидаемого результата передайте значения победителя и проигравшего в функцию radioCheck, поскольку они являются ожидаемыми аргументами.

    document.querySelector('.btn-oblicz').addEventListener('click', calcSektor);

   function calcSektor(){
      let winner = calcWinner();
      let looser = calcLooser();
      radioCheck(winner, looser);
    }

кодовое слово - https://codepen.io/nagasai/pen/aQQxaE

function calcWinner() {
  // vars
  const h = parseInt(document.querySelector("#h-winner").value);
  const m = parseInt(document.querySelector("#m-winner").value);
  const s = parseInt(document.querySelector("#s-winner").value);

  const hMin = h * 60;
  const mMin = (m + hMin) * 60;
  const sSec = mMin + s;
  winner = sSec;

  console.info(winner + " winner score");
  return winner;
}

function calcLooser() {
  // vars
  const h = parseInt(document.querySelector("#h-looser").value);
  const m = parseInt(document.querySelector("#m-looser").value);
  const s = parseInt(document.querySelector("#s-looser").value);

  const hMin = h * 60;
  const mMin = (m + hMin) * 60;
  const sSec = mMin + s;
  looser = sSec;

  console.info(looser + " looser score");
  return looser;
}

function radioCheck(winner, looser) {
  // vars
  const radioMega = document.querySelector("#mega").checked;
  const radioMini = document.querySelector("#mini").checked;
  // let sector;
  // check distance
  if (radioMega === true) {
    sector = winner / looser;
  } else if (radioMini === true) {
    sector = winner / looser * 0.92;
  } else {
    alert("error");
  }
  console.info(sector);
}

document.querySelector(".btn-oblicz").addEventListener("click", calcSektor);
function calcSektor() {
  let winner = calcWinner();
  let looser = calcLooser();
  radioCheck(winner, looser);
}

<form class = "time">
    <input type = "number" class = "input-time" id = "h-winner"placeholder = "h"> 
    <input type = "number" class = "input-time" id = "m-winner"placeholder = "min">
    <input type = "number" class = "input-time" id = "s-winner"placeholder = "s">
</form>
<form class = "time">
    <input type = "number" class = "input-time" id = "h-looser" placeholder = "h">
    <input type = "number" class = "input-time" id = "m-looser" placeholder = "min">
    <input type = "number" class = "input-time" id = "s-looser" placeholder = "s">
</form>
<div class = "btn-radio">
    <input type = "radio" name = "distance" id = "mega" class = "btn-radio__input mg">
    <span class = "radio-text">Mega/Giga</span>
    <input type = "radio" name = "distance" id = "mini" class = "btn-radio__input mi">
    <span class = "radio-text">Mini</span>
</div>

<button class = "btn-oblicz" >Check Winner</button>

29.11.2018 21:19

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

Невозможно использовать async и ждать в Firefox

Как в массиве, в javascript, убедиться, что элементы не повторяются?

Предотвращение закрытия md-меню при нажатии в открытом меню в приложении Angular

Использование touchmove для запуска события наведения

Извлеките ByteArrays из базы данных и превратите их обратно в файлы, чтобы перейти к частичному просмотру

Получить отметку в сумме двух на чеке

Цикл по JS-объекту и подтверждение одного из его свойств

VueJS Force Update

Вход в Firebase с использованием JavaScript - неверный формат адреса электронной почты

Повторение текстуры THREEJS Sprite

JavaScript возвращает NaN при добавлении двух значений

Ответы 1

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

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