CODEWITHSUNDEEP
javascriptjqueryhtmlcalculator
Charlie Axsom
Charlie Axsom

Reputation: 1

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 

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">&nbsp;</li>
    				<li class="empty darkgray">&nbsp;</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>

Upvotes: 0

Views: 680

Answers (2)

user3297291
user3297291

Reputation: 23372

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")

Using 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.

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

Storing state/type in an element can be done in a custom attribute. Custom attributes are always prefixed by 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>

Upvotes: 0

Eugene Tsakh
Eugene Tsakh

Reputation: 2879

The problem is here

$('#calculation').append(num1);

Change .append to .text

Upvotes: 2

Related Questions