@PantiesInTea

Как можно запретить ставить два знака (например: + и -) подряд?

Сделал простой калькулятор в котором все расчеты происходят через html. Через js хочу запретить ставить больше одного знака и что бы каждый последующий введеный знак сменялся новым.
62c4040aa5647354554219.png
<body>
    <div class="btn">
        <strong><img src="./images/sun.png" width="30"></strong>
        <strong><img src="./images/moon.png" width="30"></strong>
    </div>
    <div class="container">
        <form class="calculator" name="calc">
            <input type="text" id="value" name="txt" autocomplete="off">
            <span class="num clear" onclick="calc.txt.value=''"><i>C</i></span>
            <span id="test" class="num" onclick="calc.txt.value+='/'"><i>/</i></span>
            <span class="num" onclick="calc.txt.value+='*'"><i>*</i></span>
            <span class="num" onclick="calc.txt.value+='7'"><i>7</i></span>
            <span class="num" onclick="calc.txt.value+='8'"><i>8</i></span>
            <span class="num" onclick="calc.txt.value+='9'"><i>9</i></span>
            <span class="num" onclick="calc.txt.value+='-'"><i>-</i></span>
            <span class="num" onclick="calc.txt.value+='4'"><i>4</i></span>
            <span class="num" onclick="calc.txt.value+='5'"><i>5</i></span>
            <span class="num" onclick="calc.txt.value+='6'"><i>6</i></span>
            <span class="num plus" onclick="calc.txt.value+='+'"><i>+</i></span>
            <span class="num" onclick="calc.txt.value+='1'"><i>1</i></span>
            <span class="num" onclick="calc.txt.value+='2'"><i>2</i></span>
            <span class="num" onclick="calc.txt.value+='3'"><i>3</i></span>
            <span class="num" onclick="calc.txt.value+='0'"><i>0</i></span>
            <span class="num" onclick="calc.txt.value+='00'"><i>00</i></span>
            <span class="num" onclick="calc.txt.value+='.'"><i>.</i></span>

            <span id="equal" onclick="document.calc.txt.value=eval(calc.txt.value)"><i>=</i></span>
        </form>
    </div>
    <script src="js/script.js"></script>
</body>


let body = document.querySelector("body");
let btn = document.querySelector(".btn");
let num = document.querySelectorAll(".num");
let test = document.getElementById("test");
var decimalAdded = false;

var operators = ["+", "-", "*", "÷"];

//Light/Dark mode
btn.onclick = function () {
  body.classList.toggle("light");
};

//Можно вводить только цифры

document.getElementById("value").onkeydown = function (e) {
  if (
    (e.which >= 48 && e.which <= 57) || // цифры
    (e.which >= 96 && e.which <= 105) || // num lock
    e.which == 8 || // backspace
    (e.which >= 37 && e.which <= 40) || // стрелки
    e.which == 109 || // минус
    e.which == 110 || // точка
    e.which == 107 || // плюс
    e.which == 106 || // умножить
    e.which == 111 || // делить
    e.which == 13 || // enter
    e.which == 46
  ) {
    // delete

    return true;
  } else {
    return false;
  }
};
// некие запреты
const inputBlock = document.querySelector("input");

inputBlock.addEventListener("keydown", (e) => {
  if (e.key === "." && input.value.indexOf(".") >= 0) e.preventDefault();
  if (e.key === "+" && input.value.indexOf("+") >= 0) e.preventDefault();
  if (e.key === "-" && input.value.indexOf("-") >= 0) e.preventDefault();
  if (e.key === "*" && input.value.indexOf("*") >= 0) e.preventDefault();
  if (e.key === "/" && input.value.indexOf("/") >= 0) e.preventDefault();
});

// enter
var input = document.getElementById("value");
input.addEventListener("keypress", function (event) {
  if (event.key === "Enter") {
    event.preventDefault();
    document.getElementById("equal").click();
  }
});
  • Вопрос задан
  • 184 просмотра
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
мне не нравится, как тут сделано – что в самих элементах прописано действие onclick="calc.txt.value+=
Лучше бы разделить три части:
  1. действия пользователя (нажатые кнопки)
  2. обработку очередной поступившей команды
  3. отображение на дисплее


Переделайте, чтобы вместо этой добавки прямо в значение txt.value, кнопки вызывали общую функцию: onclick="clicked('*')". И напшите эту функцию, которая на вход получает символ, и дальше решает, что с ним делать. Например, сначала берёт существующее значение txt.value, смотрит на его последний символ, и либо добавляет, либо заменяет его.

Иллюстрация идеи:
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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