@Denzzzy

Из-за чего в консоль выводится NaN, а не значение переменной?

Я решил написать мини рулетку на html и javascript и столкнулся с проблемой, что при выводе в консоль переменной balance оно выводит не значение переменной, а "NaN" я могу предположить что это из за неправильного получения значения <input type="number">, но как правильно его подключить я не знаю.

<!DOCTYPE html>
<html>
	<head>
		<script src="script.js"></script>
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.googleapis.com/css2?family=Teko&display=swap" rel="stylesheet">
		<meta charset="utf-8">
		<title>Title name</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	</head>
	<body>
		<article>
			<div class="container1">
				<input type="number" min="5" class="inputer">
				<button type="button" class="btn btn-outline-danger" onclick="red()">2x</button>
				<button type="button" class="btn btn-outline-success" onclick="green()">75x</button>
				<button type="button" class="btn btn-outline-dark" onclick="black()">2x</button>
			</div>
		</article>
	</body>
</html>


var input = document.getElementsByClassName('inputer').value;
var balance = 1000;
var stavka = 0;
var chislo;

function red(){
    balance = balance-input;
    stavka = stavka+input;
    chislo = Math.floor(Math.random() * 101);
    if (chislo>0 && chislo<49){
        stavka = stavka*2
        balance = balance+stavka;
        chislo = 0;
        stavka =0;
        alert("Ты выиграл!");
        console.log(balance);
    }
    else{
        chislo = 0;
        stavka =0;
        alert("Ты проиграл!");
        console.log(balance);
    }
}

function green(){
    balance = balance-input;
    stavka = stavka+input;
    chislo = Math.floor(Math.random() * 101);
    if (chislo == 50){
        stavka = stavka*75
        balance = balance+stavka;
        chislo = 0;
        stavka =0;
        alert("Ты выиграл!");
        console.log(balance);
    }
    else{
        chislo = 0;
        stavka =0;
        alert("Ты проиграл!");
        console.log(balance);
    }
}

function black(){
    balance = balance-input;
    stavka = stavka+input;
    chislo = Math.floor(Math.random() * 101);
    if (chislo>51 && chislo<100){
        stavka = stavka*2
        balance = balance+stavka;
        chislo = 0;
        stavka =0;
        alert("Ты выиграл!");
        console.log(balance);
    }
    else{
        chislo = 0;
        stavka =0;
        alert("Ты проиграл!");
        console.log(balance);
    }
}
  • Вопрос задан
  • 449 просмотров
Пригласить эксперта
Ответы на вопрос 3
@smigles
В переменной input находится строка. Нужно перед выполнением арифметических операций преобразовать её в число:
var input = Number(document.getElementsByClassName('inputer').value);

А ещё нужно получение значения из элемента input перенести ниже самого элемента в коде. Сейчас у вас скрипт подключается раньше, чем в DOM-дереве появится элемент input.
Ответ написан
@salnet
var input = document.getElementsByClassName('inputer').value; - забирает строковое значение.
При операции сложения происходит конкатенация строк. То есть, к примеру, 1 + '1' = '11'.

Нужно поменять stavka = stavka+input; на stavka = stavka + +input
Таким образом мы превращаем строку в число и можем совершать все математические операции
Ответ написан
@ferrousage
Вы получаете псевдомассив путем вызова getElementsByClassName, нужно поменять этот метод на querySelector(.inputer). Про точку не забудьте.
Итак получаем следующее => const input = +document.querySelector('.inputer').value;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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