javascript - 如何在 onclick 事件中使用单引号，以便在单击按钮时在计算器中显示某个单词？

Question

我正在查看 geekforgeeks 的科学计算器示例我遇到了这行我无法完全理解的代码:

<td><input id="btn" type="button" value="cos"
                OnClick="calc.display.value='Math.cos('"> 
</td> 

'Math.cos(' 之间的单引号似乎在计算器输入/显示中显示“Math.cos(”。如果我移动单引号，使得该行显示为 OnClick="calc.display.value=Math.'cos('"> 以便计算器输入/显示仅显示“cos(”。这种情况不会发生，按钮将停止工作。

为什么会发生这种情况，在按钮中使用函数时单引号的重要性是什么？我找不到任何专门讨论在 onlcick 中使用单引号的内容，因此任何澄清都会非常有帮助。

另外，在等待用户单击按钮时输入某个值时，如何在计算器输入显示屏上打印诸如“cos(”而不是“Math.cos(”)之类的特定单词？

Answer 1

在给定的 geeksforgeeks 代码中，我们将 calc.display.value 变量设置为字符串 Math.cos(。这将设置名为 的输入的值在名为 calc 的表单内显示 到 Math.cos(.

如果您想将其更改为 cos( 而不是 Math.cos()，只需从字符串中删除 math 即可。

<td><input id="btn" type="button" value="cos"
                OnClick="calc.display.value='cos('"> 
</td> 

进行此更改后，javascript 将给出以下错误:

Uncaught ReferenceError: cos is not defined

您可以通过在 Math.cos 之上编写一个名为 cos 的包装函数来解决这个问题。

function cos(exp) {
    return Math.cos(exp);
}

这是完整的工作代码。

function cos(exp) {
    return Math.cos(exp);
}

/* Creating function in HTML for backspace operation */ 
function backspace(calc) {											 
    size = calc.display.value.length; 
    calc.display.value = calc.display.value.substring(0, size-1); 
}

/* Creating function to calculate factorial of element */ 
function calculate(calc) { 
    
    /* Check if function include ! character then 
    calculate factorial of number */ 
    if(calc.display.value.includes("!")) { 
        
        size = calc.display.value.length; 
        n = Number(calc.display.value.substring(0, size-1)); 
        f = 1; 
        
        for(i = 2; i <= n; i++) 
            f = f*i; 
        calc.display.value = f; 
    }
    
    /* If function include % character then calculate 
    the % of number */ 
    else if(calc.display.value.includes("%")) { 
        
        size = calc.display.value.length; 
        n = Number(calc.display.value.substring(0, size-1)); 
        calc.display.value = n/100; 
    }

    else	 
        /* Otherwise evalute and execute output */ 
        calc.display.value = eval(calc.display.value); 
}

/* Style to set the title of calculator */ 
.title { 
    margin-bottom: 10px; 
    padding: 5px 0; 
    font-size: 20px; 
    font-weight:bold; 
    text-align:center; 
    width: 447px; 
    color:green; 
    border: solid black 2px; 
}

/* Set the button style */ 
#btn { 
    width: 100%; 
    height: 40px; 
    font-size: 30px; 
}

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

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

<div class = title > 
   GeeksforGeeks Scientific Calculator 
</div>
<form name = "calc">
   <table id = "calc" border = 2>
      <tr>
         <td colspan=5><input id="btn" name="display"
            onkeypress="return event.charCode >= 48 
            && event.charCode <= 57" type="text"> 
         </td>
      </tr>
      <tr>
         <td><input id="btn" type="button" value="1"
            OnClick="calc.display.value+='1'"> 
         </td>
         <td><input id="btn" type="button" value="2"
            OnClick="calc.display.value+='2'"> 
         </td>
         <td><input id="btn" type="button" value="3"
            OnClick="calc.display.value+='3'"> 
         </td>
         <td><input id="btn" type="button" value="C"
            OnClick="calc.display.value=''"> 
         </td>
         <td><input id="btn" type="button" value="<-"
            OnClick="backspace(this.form)"> 
         </td>
         <td><input id="btn" type="button" value="="
            OnClick="calculate(this.form)"> 
         </td>
      </tr>
      <tr>
         <td><input id="btn" type="button" value="4"
            OnClick="calc.display.value+='4'"> 
         </td>
         <td><input id="btn" type="button" value="5"
            OnClick="calc.display.value+='5'"> 
         </td>
         <td><input id="btn" type="button" value="6"
            OnClick="calc.display.value+='6'"> 
         </td>
         <td><input id="btn" type="button" value="-"
            OnClick="calc.display.value='-'"> 
         </td>
         <td><input id="btn" type="button" value="%"
            OnClick="calc.display.value+='%'"> 
         </td>
         <td><input id="btn" type="button" value="cos"
            OnClick="calc.display.value='cos('"> 
         </td>
      </tr>
      <tr>
         <td><input id="btn" type="button" value="7"
            OnClick="calc.display.value+='7'"> 
         </td>
         <td><input id="btn" type="button" value="8"
            OnClick="calc.display.value+='8'"> 
         </td>
         <td><input id="btn" type="button" value="9"
            OnClick="calc.display.value+='9'"> 
         </td>
         <td><input id="btn" type="button" value="*"
            OnClick="calc.display.value+='*'"> 
         </td>
         <td><input id="btn" type="button" value="n!"
            OnClick="calc.display.value+='!'"> 
         </td>
         <td><input id="btn" type="button" value="sin"
            OnClick="calc.display.value='Math.sin('"> 
         </td>
      </tr>
      <tr>
         <td><input id="btn" type="button" value="."
            OnClick="calc.display.value+='.'"> 
         </td>
         <td><input id="btn" type="button" value="0"
            OnClick="calc.display.value+='0'"> 
         </td>
         <td><input id="btn" type="button" value=","
            OnClick="calc.display.value+=','"> 
         </td>
         <td><input id="btn" type="button" value="+"
            OnClick="calc.display.value+='+'"> 
         </td>
         <td><input id="btn" type="button" value="/"
            OnClick="calc.display.value+='/'"> 
         </td>
         <td><input id="btn" type="button" value="tan"
            OnClick="calc.display.value='Math.tan('"> 
         </td>
      </tr>
      <tr>
         <td><input id="btn" type="button" value="E"
            OnClick="calc.display.value+='Math.E'"> 
         </td>
         <td><input id="btn" type="button" value="pi"
            OnClick="calc.display.value+='Math.PI'"> 
         </td>
         <td><input id="btn" type="button" value="^"
            OnClick="calc.display.value+='Math.pow('"> 
         </td>
         <td><input id="btn" type="button" value="("
            OnClick="calc.display.value+='('"> 
         </td>
         <td><input id="btn" type="button" value=")"
            OnClick="calc.display.value+=')'"> 
         </td>
         <td><input id="btn" type="button" value="log"
            OnClick="calc.display.value='Math.log('"> 
         </td>
      </tr>
      <tr>
         <td><input id="btn" type="button" value="sqrt"
            OnClick="calc.display.value+='Math.sqrt('"> 
         </td>
         <td><input id="btn" type="button" value="ln2"
            OnClick="calc.display.value+='Math.LN2'"> 
         </td>
         <td><input id="btn" type="button" value="ln10"
            OnClick="calc.display.value+='Math.Log10'"> 
         </td>
         <td><input id="btn" type="button" value="l2e"
            OnClick="calc.display.value+='Math.LOG2E'"> 
         </td>
         <td><input id="btn" type="button" value="l10e"
            OnClick="calc.display.value+='Math.log10'"> 
         </td>
         <td><input id="btn" type="button" value="exp"
            OnClick="calc.display.value='Math.exp('"> 
         </td>
      </tr>
   </table>
</form>