如何在 HTML 计算器上计算对数？

Question

所以我得到了一个 calculator from GeeksForGeeks，我想通过其他功能进一步扩展它，例如 Math.log()。

所以我开始添加另一个table，它有对数、正弦、余弦和正切函数，但是为了这道题的目的，我们将坚持对数：

<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>

这显然在很多方面都行不通，最明显的是没有赋予它们任何功能，框中的输出几乎就是 log() 就在数字旁边, 不是 log(n).

我不知道具体怎么做，因为我在 web 开发方面仍然不是很好，我想测试计算。

所以为了这个问题，我怎样才能制作log()格式并使用JavaScript正确计算solve()？

Answer 1

例如，您可以交出一个充当 property accessor in bracket notation for Math.log 的字符串。

然后用一个值调用函数并得到一个结果。

const
    value = 100,
    key = 'log';

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

Answer 2

处理一般not a good idea to use inline event handlers. Here's an exemplary snippet that may answer your question. It uses event delegation

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>

Answer 3

假设单击“日志”按钮需要对显示的内容进行对数，并且您想坚持开始时的总体想法（来自 Geeks for Geeks），包括使用 eval，您可以丰富 dis 和 solve 函数，如下所示：

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 
}

然后在您的 HTML 中，只需将 $ 放在此处作为计算器显示屏中已存在的表达式的占位符：

<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>

应用于导致此片段的原始代码：

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>

注意这里的对数是自然对数。

如何在 HTML 计算器上计算对数？

How to perform logarithm on a HTML calculator?

html

javascript

logarithm

function

calculator