Why can't I put more then one dot in my JS calc

Question

I am making a calculator but ... I can put two dots on my first number, but I can not put a dot on my second number. I am missing something but don't know what.

I have tried different things but nothing worked...

Maybe I have to try another way to do it or I am missing some condition for the dots. And the other thing is that I couldnt use the 'backspace' for deleting one number and I have used 'del'.

function insert(num) {
  const lastChar = document.form.textview.value;

  if ((!document.form.textview.value || isNaN(lastChar)) && isNaN(num)) {
    return '';
  }

  document.form.textview.value += num;
};

function equal() {
  let exp = document.form.textview.value;
  if (exp) {
    document.form.textview.value = eval(exp);
    return '';
  }
};

function clean() {
  document.form.textview.value = "";
}

function back() {
  let exp = document.form.textview.value;
  document.form.textview.value = exp.substring(0, exp.length - 1);
  return '';
}

document.addEventListener('keydown', function(n) {
  let stringChar = n.key;
  let numChar = Number(n);

  switch (stringChar) {
    case '0':
    case '1':
    case '2':
    case '3':
    case '4':
    case '5':
    case '6':
    case '7':
    case '8':
    case '9':
    case '-':
    case '+':
    case '/':
    case '*':
      insert(stringChar);
      break;
    case '.':
      let text = document.form.textview.value;
      if (!text.includes('.') && text.length) {
        document.form.textview.value += '.';
      } else if (text.includes('.') && (text.indexOf('.') <= text.length - 1)) {
        document.form.textview.value += '.';
      }
      break;
    case 'Enter':
      equal(numChar);
      break;
    case 'Delete':
      back(numChar);
      break;
  }

});

body {
  padding: 0;
  margin: 0;
  background: #c0c0c0;
}

.button {
  width: 50px;
  height: 50px;
  font-size: 22px;
  margin: 3px;
  cursor: pointer;
  border-radius: 5px;
  background: #e6e6e6;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
}

.button:hover {
  background: #cecece;
}

.button:focus {
  outline: 0;
}

.btn {
  width: 110px;
}

.textview {
  width: 218px;
  margin: 5px;
  font-size: 26px;
  padding: 10px 5px;
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .5);
  border-radius: 6px;
  background: #e6e6e6;
  color: rgb(0, 0, 0);
}

.main {
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: #858585;
}

<body>
  <div class="main">
    <form name="form">
      <input class="textview" name="textview" disabled>
    </form>

    <table>
      <tr>
        <td><input class="button" type="button" value="CE" onclick="insert(clean())"></td>
        <td><input class="button" type="button" value="C" onclick="insert(clean())"></td>
        <td><input class="button" type="button" value="<" onclick="insert(back())"></td>
        <td><input class="button" type="button" value="/" onclick="insert('/')"></td>
      </tr>
      <tr>
        <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
        <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
        <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
        <td><input class="button" type="button" value="*" onclick="insert('*')"></td>
      </tr>
      <tr>
        <td><input class="button" type="button" value="4" onclick="insert(4)"></td>
        <td><input class="button" type="button" value="5" onclick="insert(5)"></td>
        <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
        <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
      </tr>
      <tr>
        <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
        <td><input class="button" type="button" value="2" onclick="insert(2)"></td>
        <td><input class="button" type="button" value="3" onclick="insert(3)"></td>
        <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
      </tr>
      <tr>
        <td colspan="2"><input class="button btn" type="button" value="0" onclick="insert(0)"></td>
        <td><input class="button" type="button" value="." onclick="insert('.')"></td>
        <td><input class="button" type="button" value="=" onclick="insert(equal())"></td>
      </tr>
    </table>
  </div>

</body>

Minh Nguyen · Accepted Answer

Becase when you put two dots isNaN(lastChar) and isNaN(num) is true, insert(num) return and not print. You can check syntax eval with try catch . If catch don't print "not number char" and if not catch you don't print . . If last index of . bigger than last index of char not number and not . , example 1.2 or 1.2+1. you don't import .. Sorry my english not good. Try it:

function insert(num) {
  const lastChar = document.form.textview.value;
  if(lastChar){
    try {
        eval(lastChar);
        if(lastIndexNotNumberCharInString(lastChar) < lastChar.lastIndexOf('.') && num == '.'){
            return '';
        }
    } catch (e) {
        if (isNaN(num)) {
           return '';
        }
    }
  }else{
     if(isNaN(num)){
         return '';
     }
  }

  document.form.textview.value += num;
};

function lastIndexNotNumberCharInString(char){
    var j = -1;
    for (var i = 0; i < char.length; i++) {
      if(isNaN(char.charAt(i)) && char.charAt(i) != '.'){
         j = i;
      }
    }
    return j;
}

function equal() {
  let exp = document.form.textview.value;
  if (exp) {
    document.form.textview.value = eval(exp);
    return '';
  }
};

function clean() {
  document.form.textview.value = "";
}

function back() {
  let exp = document.form.textview.value;
  document.form.textview.value = exp.substring(0, exp.length - 1);
  return '';
}

document.addEventListener('keydown', function(n) {
  let stringChar = n.key;
  let numChar = Number(n);

  switch (stringChar) {
    case '0':
    case '1':
    case '2':
    case '3':
    case '4':
    case '5':
    case '6':
    case '7':
    case '8':
    case '9':
    case '-':
    case '+':
    case '/':
    case '*':
      insert(stringChar);
      break;
    case '.':
      let text = document.form.textview.value;
      if (!text.includes('.') && text.length) {
        document.form.textview.value += '.';
      } else if (text.includes('.') && (text.indexOf('.') <= text.length - 1)) {
        document.form.textview.value += '.';
      }
      break;
    case 'Enter':
      equal(numChar);
      break;
    case 'Delete':
      back(numChar);
      break;
  }

});

body {
  padding: 0;
  margin: 0;
  background: #c0c0c0;
}

.button {
  width: 50px;
  height: 50px;
  font-size: 22px;
  margin: 3px;
  cursor: pointer;
  border-radius: 5px;
  background: #e6e6e6;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
}

.button:hover {
  background: #cecece;
}

.button:focus {
  outline: 0;
}

.btn {
  width: 110px;
}

.textview {
  width: 218px;
  margin: 5px;
  font-size: 26px;
  padding: 10px 5px;
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .5);
  border-radius: 6px;
  background: #e6e6e6;
  color: rgb(0, 0, 0);
}

.main {
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: #858585;
}

<body>
  <div class="main">
    <form name="form">
      <input class="textview" name="textview" disabled>
    </form>

    <table>
      <tr>
        <td><input class="button" type="button" value="CE" onclick="clean()"></td>
        <td><input class="button" type="button" value="C" onclick="clean()"></td>
        <td><input class="button" type="button" value="<" onclick="insert(back())"></td>
        <td><input class="button" type="button" value="/" onclick="insert('/')"></td>
      </tr>
      <tr>
        <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
        <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
        <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
        <td><input class="button" type="button" value="*" onclick="insert('*')"></td>
      </tr>
      <tr>
        <td><input class="button" type="button" value="4" onclick="insert(4)"></td>
        <td><input class="button" type="button" value="5" onclick="insert(5)"></td>
        <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
        <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
      </tr>
      <tr>
        <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
        <td><input class="button" type="button" value="2" onclick="insert(2)"></td>
        <td><input class="button" type="button" value="3" onclick="insert(3)"></td>
        <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
      </tr>
      <tr>
        <td colspan="2"><input class="button btn" type="button" value="0" onclick="insert(0)"></td>
        <td><input class="button" type="button" value="." onclick="insert('.')"></td>
        <td><input class="button" type="button" value="=" onclick="insert(equal())"></td>
      </tr>
    </table>
  </div>

</body>

Why can't I put more then one dot in my JS calc

Tags:

javascript

Hristo Kirilov

1 Answers

Minh Nguyen

Recent Activity

Donate For Us

Why can't I put more then one dot in my JS calc

Tags:

javascript

Hristo Kirilov

1 Answers

Minh Nguyen

Related questions

Recent Activity

Donate For Us