计算器生成控制台日志，但屏幕上未显示任何内容
[英]Calculator producing console log but nothing shows up on the screen
问题描述
i have to build this calculator using JavaScript/jquery however no numbers will show up on the screen when i press on the buttons it shows up in the console log with no errors i just need help figuring out how to get the numbers to show up on screen any help is appreciated 
我必须使用JavaScript / jquery构建此计算器，但是当我按下控制台日志中显示的按钮时，屏幕上不会显示任何数字，而不会出现任何错误，我只需要帮助弄清楚如何获取数字即可显示在屏幕上屏幕任何帮助表示赞赏
function init(){ console.log('start'); var num1 = 0; var num2 = 0; var op = ''; var ON = ''; $('.digit, .operator orange').click(function(){ var ID = this.id; console.log(ID); calculator(this); }); function calculator(obj){ console.log(ON); var ID = obj.id; var type = obj.classList[1]; if(type === 'digit'){ if (ON == true){ $('#calculation').empty(); } $('#calculation').append(ID); console.log(ID + '!') }else if(type === 'operator orange'){ op =obj.textContent; if(num1 == 0){ num1 = $('#calculation').text(); }else{ num2 = $('#calculation').text(); num1 = eval(num1 + op + num2); } $('#calculation').empty(); }else if (type ==='operator orange'){ num2 = $('#calculation').text(); num1 = eval(num1 + op + num2); $('#calculation').empty(); $('#calculation').append(num1); ON = true; num1= 0; num2= 0; }else if(type === 'clear'){ $('#calculation').empty(); num1=0; num2=0; ON = false; } } } $(document).ready(init);
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <title>Calculator</title> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="calculator"> <div id="calculation">0</div> <div class="buttons"> <ul> <li id="clear" class="clear darkgray">C</li> <li class="empty darkgray"> </li> <li class="empty darkgray"> </li> <li id="/" class="operator orange">/</li> </ul> <ul> <li id="7" class="digit">7</li> <li id="8" class="digit">8</li> <li id="9" class="digit">9</li> <li id="*" class="operator orange">*</li> </ul> <ul> <li id="4" class="digit">4</li> <li id="5" class="digit">5</li> <li id="6" class="digit">6</li> <li id="-" class="operator orange">-</li> </ul> <ul> <li id="1" class="digit">1</li> <li id="2" class="digit">2</li> <li id="3" class="digit">3</li> <li id="+" class="operator orange">+</li> </ul> <ul> <li id="0" class="digit wide nobottom">0</li> <li id="." class="digit nobottom">.</li> <li id= "=" class="equals orange nobottom">=</li> </ul> </div> </div> <script src="js.js"></script> </body> </html>
2 个解决方案
解决方案1
2 2016-10-31 15:07:34
The problem is here 问题在这里
$('#calculation').append(num1);
Change .append to .text 将.append更改为.text
解决方案2
0 2016-11-05 12:06:31
var type = obj.classList[1]; will never return digit , since that class is at position 0. Use an attribute instead ( data-type="digit" ) or classList.contains("digit") 永远不会返回digit ，因为该类位于位置0。请改用属性（ data-type="digit" ）或classList.contains("digit")
Using classList.contains 使用classList.contains
When using the class attribute to target elements and store type or state, I'd advice to use some sort of prefix, such as js- , to differentiate style classes and interactivity. 当使用class属性来定位元素并存储类型或状态时，我建议使用某种前缀（例如js- ）来区分样式类和交互性。
var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); var div3 = document.getElementById("div3"); console.log("Div 1, type is digit:", div1.classList.contains("digit")); console.log("Div 2, type is digit:", div2.classList.contains("digit")); console.log("Div 3, type is digit:", div3.classList.contains("digit"));
<div id="div1" class="test digit something-else">1</div> <div id="div2" class="digit something-else test">2</div> <div id="div3" class="something-else test">3</div>
Using a data- attribute 使用data-属性
Storing state/type in an element can be done in a custom attribute. 可以在自定义属性中将状态/类型存储在元素中。 Custom attributes are always prefixed by data- . 自定义属性始终以data-作为前缀。 Main benefits are: 主要好处是：
- They don't clash with styling 他们不与样式冲突
- You can re-use one attribute for all types 您可以对所有类型重复使用一个属性
var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); var div3 = document.getElementById("div3"); var getType = function(el) { return el.getAttribute("data-type"); } console.log("Div 1, type is:", getType(div1)); console.log("Div 2, type is:", getType(div2)); console.log("Div 3, type is:", getType(div3));
<div id="div1" data-type="digit" class="test something-else">1</div> <div id="div2" data-type="digit" class="something-else test">2</div> <div id="div3" data-type="otherType" class="something-else test">3</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.