單擊按鈕時，如何使用帶有 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的表單中將名為display的輸入的值設置為Math.cos( 。

如果要將其更改為cos(而不是Math.cos( ，只需從字符串中刪除 math 。

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

進行此更改后，javascript 將給出此錯誤：

未捕獲的 ReferenceError：未定義 cos

您可以通過在 Math.cos 之上編寫名為cos的包裝器Math.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>