Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Простой калькулятор на js (https://javascript.ru/forum/misc/75831-prostojj-kalkulyator-na-js.html)

zava75 10.11.2018 11:17

Простой калькулятор на js
 
Добрый день. Я только начал изучать js - скажите почему не работает , сбрасываются значения и как решить задачу. Спасибо
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/name.css">
</head>
<body>
<div class="contener">
    <h1>Изучаем JS</h1>
    <form name="formCl">
        <input type="number" id="numX">
        <br>
        <input type="number" id="numY">
        <br>
        <select id="ope">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <br>
        <input type="submit" value="=" onclick="btnClick()">
    </form>
    <br>
    <p id="das" class="das">Результат: </p>
</div>
<script>
var x, y, oper, resul, form = document.formCl;

function btnClick() {
    form = document.formCl;
    x = form.numX.value;
    y = form.numY.value;
    oper = form.ope.value;
    console.log(x);
    console.log(y);
    console.log(oper);
    console.log(resul);
    switch (oper) {
        case "+": {
            resul = +x + +y;
            document.getElementById("das").innerText = resul;
            // break;
        }
        case "-": {
           return resul = x - y;
            // break;
        }
        case "*": {
            resul = x * y;
            // break;
        }
        case "/": {
            resul = x / y;
            // break;
        }
    };
    console.log(x);
    console.log(y);
    console.log(oper);
    console.log(resul);
    if(resul != undefined && resul != null) {
        document.getElementById("das").innerText = resul;
    };
};

</script>
</body>
</html>

Malleys 10.11.2018 11:23

Форму не надо отправлять
<form name="formCl" onsubmit="return false;">


UPD
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/name.css">
</head>
<body>
<div class="contener">
    <h1>Изучаем JS</h1>
    <form name="formCl" onsubmit="btnClick(); return false;">
        <input type="number" id="numX">
        <br>
        <input type="number" id="numY">
        <br>
        <select id="ope">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <br>
        <input type="submit" value="=">
    </form>
    <br>
    <p id="das" class="das">Результат: </p>
</div>
<script>


function btnClick() {
	var x, y, operator, result, form = document.formCl;

	x = Number(form.numX.value);
	y = Number(form.numY.value);
	operator = form.ope.value;

	var operations = {
		"+": (a, b) => a + b,
		"-": (a, b) => a - b,
		"*": (a, b) => a * b,
		"/": (a, b) => a / b,
	};

	if(operator in operations) {
		result = operations[operator](x, y);
	} else {
		result = "Неверный оператор";
	}

	console.log(x, operator, y, result);

	document.getElementById("das").textContent = `${x} ${operator} ${y} = ${result}`;
};

</script>
</body>
</html>

zava75 10.11.2018 11:54

У вас решение лучше ! но я поменял кнопку на ссылку и заработало!
<!--<input type="submit" value="=" onclick="bnClick()">-->
<a onclick="bnClick()"> = </a>

Malleys 10.11.2018 12:13

Цитата:

Сообщение от zava75 (Сообщение 498231)
У вас решение лучше ! но я поменял кнопку на ссылку и заработало!
<!--<input type="submit" value="=" onclick="bnClick()">-->
<a onclick="bnClick()"> = </a>

Но это не отменяет того, что форма может быть отправлена, например, когда вы редактируете поле и нажимаете Enter

GayCoder 11.11.2018 20:51

vanished

рони 11.11.2018 22:22

:write:
const input = "1 +2 *3";
const tokens = input.match(/[-+*/()]|\d+/g)||[];
alert(tokens);

GayCoder 12.11.2018 03:41

vanished

рони 12.11.2018 07:57

Цитата:

Сообщение от GayCoder
полноценный лексер

а результат чем-то отличается?

GayCoder 12.11.2018 21:50

vanished

рони 12.11.2018 21:54

Цитата:

Сообщение от GayCoder
Наглядно чем плох твой код:

что не так?


Часовой пояс GMT +3, время: 02:20.