当单击按钮时，如何使用带有 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(。这将设置display名为calcto的表单中命名的输入的值Math.cos(。如果要将其更改为cos(而不是Math.cos(，只需从字符串中删除数学即可。<td><input id="btn" type="button" value="cos"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value='cos('">&nbsp;</td>&nbsp;进行此更改后，javascript 将给出此错误：未捕获的 ReferenceError：cos 未定义您可以通过编写一个名为包装函数解决这个问题cos之上Math.cos。function cos(exp) {&nbsp; &nbsp; return Math.cos(exp);}这是完整的工作代码。function cos(exp) {&nbsp; &nbsp; return Math.cos(exp);}/* Creating function in HTML for backspace operation */&nbsp;function backspace(calc) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; size = calc.display.value.length;&nbsp;&nbsp; &nbsp; calc.display.value = calc.display.value.substring(0, size-1);&nbsp;}/* Creating function to calculate factorial of element */&nbsp;function calculate(calc) {&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /* Check if function include ! character then&nbsp;&nbsp; &nbsp; calculate factorial of number */&nbsp;&nbsp; &nbsp; if(calc.display.value.includes("!")) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; size = calc.display.value.length;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; n = Number(calc.display.value.substring(0, size-1));&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; f = 1;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; for(i = 2; i <= n; i++)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f = f*i;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; calc.display.value = f;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /* If function include % character then calculate&nbsp;&nbsp; &nbsp; the % of number */&nbsp;&nbsp; &nbsp; else if(calc.display.value.includes("%")) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; size = calc.display.value.length;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; n = Number(calc.display.value.substring(0, size-1));&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; calc.display.value = n/100;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; else&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; /* Otherwise evalute and execute output */&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; calc.display.value = eval(calc.display.value);&nbsp;}/* Style to set the title of calculator */&nbsp;.title {&nbsp;&nbsp; &nbsp; margin-bottom: 10px;&nbsp;&nbsp; &nbsp; padding: 5px 0;&nbsp;&nbsp; &nbsp; font-size: 20px;&nbsp;&nbsp; &nbsp; font-weight:bold;&nbsp;&nbsp; &nbsp; text-align:center;&nbsp;&nbsp; &nbsp; width: 447px;&nbsp;&nbsp; &nbsp; color:green;&nbsp;&nbsp; &nbsp; border: solid black 2px;&nbsp;}/* Set the button style */&nbsp;#btn {&nbsp;&nbsp; &nbsp; width: 100%;&nbsp;&nbsp; &nbsp; height: 40px;&nbsp;&nbsp; &nbsp; font-size: 30px;&nbsp;}input[type="button"] {&nbsp;&nbsp; &nbsp; background-color:green;&nbsp;&nbsp; &nbsp; color: black;&nbsp;&nbsp; &nbsp; border: solid black 2px;&nbsp;&nbsp; &nbsp; width:100%&nbsp;}/* Set input textarea */&nbsp;input[type="text"] {&nbsp;&nbsp; &nbsp; background-color:white;&nbsp;&nbsp; &nbsp; border: solid black 2px;&nbsp;&nbsp; &nbsp; width:100%&nbsp;}<div class = title >&nbsp;&nbsp; &nbsp;GeeksforGeeks Scientific Calculator&nbsp;</div><form name = "calc">&nbsp; &nbsp;<table id = "calc" border = 2>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td colspan=5><input id="btn" name="display"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onkeypress="return event.charCode >= 48&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; && event.charCode <= 57" type="text">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='1'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='2'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="3"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='3'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="C"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value=''">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="<-"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="backspace(this.form)">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="="&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calculate(this.form)">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="4"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='4'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="5"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='5'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="6"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='6'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="-"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value='-'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="%"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='%'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="cos"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value='cos('">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="7"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='7'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="8"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='8'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="9"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='9'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="*"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='*'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="n!"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='!'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="sin"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value='Math.sin('">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="."&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='.'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="0"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='0'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value=","&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+=','">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="+"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='+'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="/"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='/'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="tan"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value='Math.tan('">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="E"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='Math.E'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="pi"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='Math.PI'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="^"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='Math.pow('">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="("&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='('">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value=")"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+=')'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="log"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value='Math.log('">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="sqrt"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='Math.sqrt('">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="ln2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='Math.LN2'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="ln10"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='Math.Log10'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="l2e"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='Math.LOG2E'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="l10e"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value+='Math.log10'">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td><input id="btn" type="button" value="exp"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnClick="calc.display.value='Math.exp('">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp;</table></form>