How to perform logarithm on a HTML calculator?

Question

So I got a calculator from GeeksForGeeks and I want to expand it further via other functions such as Math.log().

So I started by adding another table, which has the logarithmic, sine, cosine and tangent functions, but for the purpose of this question, we will stick to logarithm:

<tr>
    <td><input type="button" value="log" onclick"dis('log()')"/></td>
    <td><input type="button" value="sin" onclick"dis('sin()')"/></td>
    <td><input type="button" value="cos" onclick"dis('cos()')"/></td>
    <td><input type="button" value="tan" onclick"dis('tan()')"/></td>
</tr>

This won't obviously work in many ways, the obvious one is that there is no functions given to them, and the output in the box will pretty much put for example log() right next to the number, not log(n).

I don't know exactly how to do this as I'm still not excellent at web development, and I wanted to test calculating.

So for the sake of this question, how can I make the log() format and calculate it properly with solve() using JavaScript?

score 1 · Answer 1 · answered Dec 24 '20 at 10:08

It is generally not a good idea to use inline event handlers. Here's an exemplary snippet that may answer your question. It uses event delegation for the handling.

document.addEventListener("click", calc);

function calc(evt) {
  console.clear();
  if (evt.target.dataset.method) {
    const theMethod = evt.target.dataset.method;
    const value = +document.querySelector("#num").value;
    switch(theMethod) {
      case "log": {
        return console.log(Math[theMethod](value));
      }
      case "sqrt": {
        return console.log(Math[theMethod](value));
      }
      default: return true;
    }
  }
}

give us a number <input id="num" type="number" value="100"> 
<button data-method="log">log</button>
<button data-method="sqrt">square root</button>

Actually, I deaccepted this question as the code snippet does actually give a good way of getting what I want, the now-accepted answer has given a proper form of the calculator for me. Nontheless, thanks for helping as well. — , Dec 24 '20 at 15:10

Nina Scholz · Answer 2 · 2020-12-24T09:57:43.983

0

You could hand over a string which acts as property accessor in bracket notation for Math.log, for example.

Then call the function with a value and get a result.

const
    value = 100,
    key = 'log';

console.log(Math[key](value));

edited Dec 24 '20 at 09:57

answered Dec 24 '20 at 09:52

Nina Scholz

376,160
25
347
392

Very simple, but now and not what I needed. – Dec 24 '20 at 15:10
i dont get you. – Nina Scholz Dec 24 '20 at 15:21
Me neither. The code is helpful, but I think I won't use it for now. Completely different from what I said from earlier. – Dec 24 '20 at 15:22

score 0 · Accepted Answer · answered Dec 24 '20 at 10:11

Assuming that a click on the "log" button would need to take the logarithm of what is already in the display, and you want to stick with the overall idea that you started with (from Geeks for Geeks), including the use of eval, you could enrich the dis and solve functions as follows:

function dis(val) {
    // Treat a dollar sign as a place holder for where the already
    //    displayed expression should be put. Default is: in front 
    //    of the new value:
    if (!val.includes("$")) val = "$" + val;
    document.getElementById("result").value =
        val.replace("$", document.getElementById("result").value); 
}

function solve() { 
    // Prefix any name with `Math.`, assuming that this name is a property function
    //   of the `Math` object:
    let x = document.getElementById("result").value.replace(/[a-z]+/g, "Math.$&");
    let y = eval(x) 
    document.getElementById("result").value = y 
}

Then in your HTML, just put that $ which we treat here as a place holder for the expression that is already in the calculator's display:

<tr>
    <td><input type="button" value="log" onclick="dis('log($)')"/></td>
    <td><input type="button" value="sin" onclick="dis('sin($)')"/></td>
    <td><input type="button" value="cos" onclick="dis('cos($)')"/></td>
    <td><input type="button" value="tan" onclick="dis('tan($)')"/></td>
</tr>

Applied to the original code, that leads to this snippet:

function dis(val) {
    // Treat a dollar sign as a place holder for where the already
    //    displayed expression should be put. Default is: in front 
    //    of the new value:
    if (!val.includes("$")) val = "$" + val;
    document.getElementById("result").value =
        val.replace("$", document.getElementById("result").value); 
}

function solve() { 
    // Prefix any name with `Math.`, assuming that this name is a property function
    //   of the `Math` object:
    let x = document.getElementById("result").value.replace(/[a-z]+/g, "Math.$&");
    let y = eval(x) 
    document.getElementById("result").value = y 
} 

function clr() {
    document.getElementById("result").value = ""
}

.title {
  margin-bottom: 10px;
  text-align: center;
  width: 210px;
  color: green;
  border: solid black 2px;
}

input[type="button"] {
  background-color: green;
  color: black;
  border: solid black 2px;
  width: 100%
}

input[type="text"] {
  background-color: white;
  border: solid black 2px;
  width: 100%
}

<div class="title">GeeksforGeeks Calculator</div>
<table border="1">
  <tr>
    <td colspan="3"><input type="text" id="result" /></td>
    <!-- clr() function will call clr to clear all value -->
    <td><input type="button" value="c" onclick="clr()" /> </td>
  </tr>
  <tr>
    <!-- create button and assign value to each button -->
    <!-- dis("1") will call function dis to display value -->
    <td><input type="button" value="1" onclick="dis('1')" /> </td>
    <td><input type="button" value="2" onclick="dis('2')" /> </td>
    <td><input type="button" value="3" onclick="dis('3')" /> </td>
    <td><input type="button" value="/" onclick="dis('/')" /> </td>
  </tr>
  <tr>
    <td><input type="button" value="4" onclick="dis('4')" /> </td>
    <td><input type="button" value="5" onclick="dis('5')" /> </td>
    <td><input type="button" value="6" onclick="dis('6')" /> </td>
    <td><input type="button" value="-" onclick="dis('-')" /> </td>
  </tr>
  <tr>
    <td><input type="button" value="7" onclick="dis('7')" /> </td>
    <td><input type="button" value="8" onclick="dis('8')" /> </td>
    <td><input type="button" value="9" onclick="dis('9')" /> </td>
    <td><input type="button" value="+" onclick="dis('+')" /> </td>
  </tr>
  <tr>
    <td><input type="button" value="." onclick="dis('.')" /> </td>
    <td><input type="button" value="0" onclick="dis('0')" /> </td>
    <!-- solve function call function solve to evaluate value -->
    <td><input type="button" value="=" onclick="solve()" /> </td>
    <td><input type="button" value="*" onclick="dis('*')" /> </td>
  </tr>
  <tr>
    <td><input type="button" value="log" onclick="dis('log($)')" /></td>
    <td><input type="button" value="sin" onclick="dis('sin($)')" /></td>
    <td><input type="button" value="cos" onclick="dis('cos($)')" /></td>
    <td><input type="button" value="tan" onclick="dis('tan($)')" /></td>
  </tr>
</table>

Note that the logarithm here is the natural logarithm.

How to perform logarithm on a HTML calculator?

3 Answers3