[英]How do you use single quotes with an onclick event to display a certain word in a calculator when the button is clicked?
I was looking at a scientific calculator example by geekforgeeks and I came across this line of code which I'm unable to fully understand:我正在查看geekforgeeks的一个科学计算器示例,我遇到了这行代码,我无法完全理解:
<td><input id="btn" type="button" value="cos"
OnClick="calc.display.value='Math.cos('">
</td>
The single quotes between 'Math.cos('
seems to display "Math.cos(" in the calculator input/display. If I move the single quotes such that the line reads OnClick="calc.display.value=Math.'cos('">
so that the calculator input/display displays only "cos(". This doesn't happen and the button stops working. 'Math.cos('
之间的单引号似乎在计算器输入/显示中显示 "Math.cos("。如果我移动单引号,使得行读取OnClick="calc.display.value=Math.'cos('">
以便计算器输入/显示仅显示“cos(”。这不会发生并且按钮停止工作。
Why does this happen, what is the significance of single quotes when using functions in a button?为什么会出现这种情况,在按钮中使用函数时单引号的意义是什么? I couldn't find anything that specifically talks about using single quotes with onlcick so any clarification would be really helpful.
我找不到任何专门讨论在 onlcick 中使用单引号的内容,因此任何澄清都会非常有帮助。
Also, how would I get a particular word such as "cos(" instead of "Math.cos(" to be printed on the calculator input display while waiting for the user to punch in some value when the button is clicked?另外,在等待用户在单击按钮时输入某个值时,如何在计算器输入显示屏上打印特定的单词,例如“cos(”而不是“Math.cos(”)?
In the given geeksforgeeks code, we set calc.display.value
variable to a string Math.cos(
. Which will set value of the input named display
inside a form named calc
to Math.cos(
.在给定的 geeksforgeeks 代码中,我们将
calc.display.value
变量设置为字符串Math.cos(
。它将在名为calc
的表单中将名为display
的输入的值设置为Math.cos(
。
If you want to change it to cos(
instead of Math.cos(
, simply remove math from the string.如果要将其更改为
cos(
而不是Math.cos(
,只需从字符串中删除 math 。
<td><input id="btn" type="button" value="cos"
OnClick="calc.display.value='cos('">
</td>
After making this change, javascript will give this error:进行此更改后,javascript 将给出此错误:
Uncaught ReferenceError: cos is not defined
未捕获的 ReferenceError:未定义 cos
You can fix that by writing a wrapper function named cos
on top of Math.cos
.您可以通过在 Math.cos 之上编写名为
cos
的包装器Math.cos
来解决此问题。
function cos(exp) {
return Math.cos(exp);
}
This is the full working code.这是完整的工作代码。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.