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?

Answer 1

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.