简体   繁体   English

做了一个计算器,当值为负时需要文本变成红色

[英]Made a calculator, need text to turn red when the value is negative

I have to make a themed calculator for class, so I randomly chose Xmas. 我必须为上课做一个主题计算器,所以我随机选择了圣诞节。 Ignore that part haha. 忽略那部分哈哈。 One requirement is that my text has to turn red when the output value of the calc. 一个要求是,当calc的输出值时,我的文本必须变为红色。 is negative, so I made an if loop in the JavaScript section. 为负数,因此我在JavaScript部分进行了if循环。 It won't work and I've been at it forever. 它行不通,我一直都在努力。 Is there something wrong with the loop?? 循环有问题吗? Thanks 谢谢

 <html> <head> <script> { function sum(){ var Box1 = Number(document.getElementById("Box1").value); var Box2 = Number(document.getElementById("Box2").value); var Box3 = Box1 + Box2 document.getElementById("Box3").value = Box3 {if (Box3>0){ Box3.style.color = rgb(60, 179, 113)} else {Box3.style.color = rgb(255, 0, 0)}} } function minus(){ var Box1 = Number(document.getElementById("Box1").value); var Box2 = Number(document.getElementById("Box2").value); var Box3 = Box1 - Box2 document.getElementById("Box3").value = Box3 } function divide(){ var Box1 = Number(document.getElementById("Box1").value); var Box2 = Number(document.getElementById("Box2").value); var Box3 = Box1/Box2 document.getElementById("Box3").value = Box3 } function mult(){ var Box1 = Number(document.getElementById("Box1").value); var Box2 = Number(document.getElementById("Box2").value); var Box3 = Box1 * Box2 document.getElementById("Box3").value = Box3 } function powers(){ var result= 1 var Box1 = Number(document.getElementById("Box1").value); var Box2 = Number(document.getElementById("Box2").value); for (i = 0; i < Box2; i++) { result = result * Box1 } document.getElementById("Box3").value = result } function erase(){ document.getElementById('Box1').value = ""; document.getElementById('Box2').value = ""; document.getElementById('Box3').value = ""; } {if (Box3>0){ Box3.style.color = rgb(60, 179, 113)} else {Box3.style.color = rgb(255, 0, 0)} } } </script> </head> <body> <font face="KR Cane Letters" size="50" color="red">Welcome</font> <div> </div> <font face="KR Cane Letters" size="50" color="green">to the CHRISTMAS Calculator!!!</font> <div> </div> <input type="text" id="Box1"> <input type="text" id="Box2"> <p>=</p> <input type="text" id="Box3"> <button onclick="sum()">+</button> <button onclick="minus()">-</button> <button onclick="divide()">/</button> <button onclick="mult()">*</button> <button onclick="powers()">^</button> <button onclick="erase()">Erase</button> <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-5/hol441.ani), url(http://cur.cursors-4u.net/holidays/hol-5/hol441.gif), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/12/17/decorated-green-christmas-tree.html" target="_blank" title="Decorated Green Christmas Tree"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Decorated Green Christmas Tree" style="position:absolute; top: 0px; right: 0px;" /></a> </body> </html> 

I've fixed your code, but you should really listen to the comments - even if you don't want to format your code by hand dropping it into, for example, http://jsbeautifier.org/ is not that hard. 我已经修复了您的代码,但是您应该真正听这些注释-即使您不想通过手动将其格式化为例如http://jsbeautifier.org/来格式化代码也不难。

Also, do note that curly brackets ("{" and "}") have a specific purpose, and you should end your lines with a semicolon (";"). 另外,请注意,花括号(“ {”和“}”)具有特定的用途,并且应以分号(“;”)结尾。

 function sum() { var Box1 = Number(document.getElementById("Box1").value); var Box2 = Number(document.getElementById("Box2").value); var Box3 = Box1 + Box2; document.getElementById("Box3").value = Box3; colourBox3(Box3); } function minus() { var Box1 = Number(document.getElementById("Box1").value); var Box2 = Number(document.getElementById("Box2").value); var Box3 = Box1 - Box2; document.getElementById("Box3").value = Box3; colourBox3(Box3); } function divide() { var Box1 = Number(document.getElementById("Box1").value); var Box2 = Number(document.getElementById("Box2").value); var Box3 = Box1 / Box2; document.getElementById("Box3").value = Box3; colourBox3(Box3); } function mult() { var Box1 = Number(document.getElementById("Box1").value); var Box2 = Number(document.getElementById("Box2").value); var Box3 = Box1 * Box2; document.getElementById("Box3").value = Box3; colourBox3(Box3); } function powers() { var result = 1 var Box1 = Number(document.getElementById("Box1").value); var Box2 = Number(document.getElementById("Box2").value); for (i = 0; i < Box2; i++) { result = result * Box1; } document.getElementById("Box3").value = result; colourBox3(result); } function erase() { document.getElementById('Box1').value = ""; document.getElementById('Box2').value = ""; document.getElementById('Box3').value = ""; } function colourBox3(val) { if (val > 0) { document.getElementById("Box3").style.color = "rgb(60, 179, 113)"; } else { document.getElementById("Box3").style.color = "rgb(255, 0, 0)"; } } 
 <html> <head> </head> <body> <font face="KR Cane Letters" size="50" color="red">Welcome</font> <div> </div> <font face="KR Cane Letters" size="50" color="green">to the CHRISTMAS Calculator!!!</font> <div> </div> <input type="text" id="Box1"> <input type="text" id="Box2"> <p>=</p> <input type="text" id="Box3"> <button onclick="sum()">+</button> <button onclick="minus()">-</button> <button onclick="divide()">/</button> <button onclick="mult()">*</button> <button onclick="powers()">^</button> <button onclick="erase()">Erase</button> <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-5/hol441.ani), url(http://cur.cursors-4u.net/holidays/hol-5/hol441.gif), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/12/17/decorated-green-christmas-tree.html" target="_blank" title="Decorated Green Christmas Tree"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Decorated Green Christmas Tree" style="position:absolute; top: 0px; right: 0px;" /></a> </body> </html> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 尝试制作一个计算器,当结果为负数时显示红色文本 - Trying to make a calculator that shows red text when the result is a negative number 当值 &lt;0 时需要红色的进度条 - Need Progress bar in red when the value is <0 如何将 JS JSON 响应红色的负数变为红色? - How to turn negative numbers red from JS JSON response Red? 如何使 html、JS 和 css 计算器上的负输出显示为红色? - How to make negative outputs on html, JS, and css calculator display red? jQuery在负值上将单元格背景更改为红色 - jQuery change cell background to red on negative value 我制作了一个基本的计数器应用程序,当我关闭它时我需要帮助来保存号码 - I made a basic counter app and i need help to save the number when I turn it off 如何获得最低值以变红并在变高时变回黑色? - how to get lowest value to turn red and back to black when it gets higher? 当值不是数字,带点号或逗号的数字时,突出显示文本框的“红色” - Highlight “red” the text box when value is not numeric, numeric with dot or comma 需要为一个用 React JS 制作的简单计算器添加一个简单的功能 - Need to add a simple functionality to a simple calculator made in React JS 用JavaScript制成的计算器,需要指定相对于自动输入金额的百分比 - Calculator made in JavaScript, Need to specify percentage to amount entered automatically
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM