Есть калькулятор. Как одной кнопкой менять открывающие скобочки на закрывающие?

Question

При нажатии на кнопку "()" появляется открывающаяся скобка "(", как заменить открывающуюся скобку на закрывающуюся ")" при повторном нажатии на туже самую кнопку "()"?

var textid = document.getElementById('textid')
let expreshion = '';

function input(num) { // отображает в строке ввода нажимаемые цифры
  expreshion += num;
  textid.value = expreshion;
}

function ac() { // обнуляет строку ввода
  expreshion = '';
  textid.value = expreshion;
}

function equal() { // выводит результат выражения
  if (textid.value !== '') {
    textid.value = eval(textid.value);
  }
}

function beckspace() { // удаляет последний символ
  let value = document.getElementById("textid").value;
  textid.value = value.substr(0, value.length - 1);
  expreshion = textid.value
}

.kalkulator {
  width: 300px;
  height: 480px;
  background: rgb(10, 10, 10);
  color: aliceblue;
  border-radius: 4%;
  margin: auto;
  box-shadow: 4px 4px 4px #afafaf;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

#textid {
  text-align: right;
  height: 100px;
  background-color: rgb(177, 177, 184);
  width: 91%;
  border-radius: 5%;
  margin: 10px;
  font-size: 4rem;
}

.battons {
  margin: 10px;
  display: grid;
  grid-template-areas: "AS skobki persent division" "seven aigh nine myltiply" "four five six minus" "one two fhree plus" "zero dot beckspace equal";
  grid-gap: 7px;
  justify-items: center;
}

.batton {
  width: 60px;
  height: 60px;
  background: #333;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  line-height: 58px;
  user-select: none;
}

.batton:hover {
  filter: brightness(120%);
}

.batton:active {
  filter: brightness(80%);
}

.batton.rg {
  background: rgb(130, 68, 212);
}

.batton.bl {
  background: rgba(93, 169, 240, 0.774);
}

.batton.bj {
  background: rgba(32, 182, 241, 0.589);
}

.img.beckspace {
  padding: 15px;
  width: 30px;
  height: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="kalkulator" >

        <input id = 'textid'  placeholder="0">
        <div class="battons">
            <div onclick="ac()" class="batton rg ac">AC</div>
            <div onclick="input('(')" class="batton skobki bl ">()</div>
            <div onclick="input('%')" class="batton persent bl ">%</div>
            <div onclick="input('/')" class="batton division bl ">/</div>
    
            <div onclick="input(7)" class="batton seven">7</div>
            <div onclick="input(8)" class="batton eight">8</div>
            <div onclick="input(9)" class="batton nine">9</div>
            <div onclick="input('*')" class="batton myltiply bl">*</div>
    
            <div onclick="input(4)" class="batton four">4</div>
            <div onclick="input(5)" class="batton five">5</div>
            <div onclick="input(6)" class="batton six">6</div>
            <div onclick="input('-')" class="batton minus bl">-</div>
    
            <div onclick="input(1)" class="batton one">1</div>
            <div onclick="input(2)" class="batton two">2</div>
            <div onclick="input(3)" class="batton fhree">3</div>
            <div onclick="input('+')" class="batton plus bl">+</div>
    
            <div onclick="input(0)" class="batton zero">0</div>
            <div onclick="input('.')" class="batton dot">.</div>
            <div onclick="beckspace()" class="batton beckspace"  >X</div>
            <div onclick="equal()" class="batton equal bj">=</div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Answer 1

Код работает. Не знаю на сколько он качественный. Метод brace();

var textid = document.getElementById('textid')
let expreshion = '';

function input(num) { // отображает в строке ввода нажимаемые цифры
  expreshion += num;
  textid.value = expreshion;
}

function brace() {
  const braces = textid.value.split("");
  const left_brace = braces.filter(el => el=== "(").length;
  const right_brace = braces.filter(el => el === ")").length;

  if (left_brace > right_brace) {
    input(")");
  } else {
    input("(");
  }
}

function ac() { // обнуляет строку ввода
  expreshion = '';
  textid.value = expreshion;
}

function equal() { // выводит результат выражения
  if (textid.value !== '') {
    textid.value = eval(textid.value);
  }
}

function beckspace() { // удаляет последний символ
  let value = document.getElementById("textid").value;
  textid.value = value.substr(0, value.length - 1);
  expreshion = textid.value
}

.kalkulator {
  width: 300px;
  height: 480px;
  background: rgb(10, 10, 10);
  color: aliceblue;
  border-radius: 4%;
  margin: auto;
  box-shadow: 4px 4px 4px #afafaf;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

#textid {
  text-align: right;
  height: 100px;
  background-color: rgb(177, 177, 184);
  width: 91%;
  border-radius: 5%;
  margin: 10px;
  font-size: 4rem;
}

.battons {
  margin: 10px;
  display: grid;
  grid-template-areas: "AS skobki persent division" "seven aigh nine myltiply" "four five six minus" "one two fhree plus" "zero dot beckspace equal";
  grid-gap: 7px;
  justify-items: center;
}

.batton {
  width: 60px;
  height: 60px;
  background: #333;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  line-height: 58px;
  user-select: none;
}

.batton:hover {
  filter: brightness(120%);
}

.batton:active {
  filter: brightness(80%);
}

.batton.rg {
  background: rgb(130, 68, 212);
}

.batton.bl {
  background: rgba(93, 169, 240, 0.774);
}

.batton.bj {
  background: rgba(32, 182, 241, 0.589);
}

.img.beckspace {
  padding: 15px;
  width: 30px;
  height: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="kalkulator" >

        <input id = 'textid'  placeholder="0">
        <div class="battons">
            <div onclick="ac()" class="batton rg ac">AC</div>
            <div onclick="brace()" class="batton skobki bl ">()</div>
            <div onclick="input('%')" class="batton persent bl ">%</div>
            <div onclick="input('/')" class="batton division bl ">/</div>
    
            <div onclick="input(7)" class="batton seven">7</div>
            <div onclick="input(8)" class="batton eight">8</div>
            <div onclick="input(9)" class="batton nine">9</div>
            <div onclick="input('*')" class="batton myltiply bl">*</div>
    
            <div onclick="input(4)" class="batton four">4</div>
            <div onclick="input(5)" class="batton five">5</div>
            <div onclick="input(6)" class="batton six">6</div>
            <div onclick="input('-')" class="batton minus bl">-</div>
    
            <div onclick="input(1)" class="batton one">1</div>
            <div onclick="input(2)" class="batton two">2</div>
            <div onclick="input(3)" class="batton fhree">3</div>
            <div onclick="input('+')" class="batton plus bl">+</div>
    
            <div onclick="input(0)" class="batton zero">0</div>
            <div onclick="input('.')" class="batton dot">.</div>
            <div onclick="beckspace()" class="batton beckspace"  >X</div>
            <div onclick="equal()" class="batton equal bj">=</div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Answer 2

Автор где-то ставил вопрос о валидации? Проверке выражений? Отрабатывании ситуаций, когда введенная скобка удаляется вручную?

Задача сформулирована максимально примитивная и решать ее надо так же. Тупо, например, задать переменную isClosingBracket = false и на нажатие кнопки выдавать что-то вроде: if (isClosingBracket) write "(" else write ")"; isClosingBracket = !isClosingBracket;.

П.С. автор:

"button"
"backspace"
"percent"
"brackets"
"calculator"
"multiply"
"three"
"expression"

учите английский, от ваших переменных и классов кровавые слезы на глазах...

БЛОГ НА HUSL

Есть калькулятор. Как одной кнопкой менять открывающие скобочки на закрывающие?

Ответы (2 шт):