FloRaptor FloRaptor - 4 years ago 326
HTML Question

Uncaught ReferenceError: enter is not defined (calculator)

I just started studying javascript at school and I have a little project, a simple calculator.
but I have a problem when I click on a button (5, 9, - etc), the chrome's inspector says Uncaught ReferenceError: enter is not defined
at HTMLButtonElement.onclick (calculatrice.html:34)
maybe is a stupid error^^

ps: the js is not finished



var DEBUT =0;
var ERREUR =1;
var OP1 =2;
var OP2 =3;
var FIN =4;
var etat =DEBUT;
var op1 ='';
var op2 ='';
var op = undefined;

function isdigit (bval){
if((bval=='0')||(bval=='1')||(bval=='2')||(bval=='3')||(bval=='4')||(bval=='5')||(bval=='6')||(bval=='7')||(bval=='8')||(bval=='9')){
return true;
}
return false;
}

function machine(bval) {
if(etat==DEBUT){
if((bval=='c')||(bval=='=')) return;

if((bval=='+')||(bval=='-')||(bval=='/')||(bval=='*')){
etat=ERROR;
}
if(isdigit(bval) == true) {
etat=OP1;
op1 += bval;
}
}

if(etat==ERROR){
if ((bval)=='C'){
etat=DEBUT;
op1="";
op2="";
op=undefined
}
}

if (etat==OP1){
if(bval=='c'){
etat=DEBUT;
valeur="";
op1=undefined;
op2=undefined;
}
if(bval=='='){
etat=FIN;
re.value += OPL;
}

if (etat=FIN){

}

}

function enter (bval) {
var re = document.getElementById("result");
machine (bval);
if (etat == DEBUT){
re.value='';
}
else if (etat == ERREUR){
re.value='ERREUR';
}
else {
re.value += bval;

body{
font-family :Arial, sans-serif;
font-size :12pt;
text-align :center;
background-color:#ffffff;
color :#777777;
}

.box{
margin :0px auto;
padding :20px 20px 20px 20px;
width :600px;
background-color:rgba(50,50,50,0.5 );
text-align :left;
}

#result{
margin :20px auto;
padding :0px;
display :block;
width :100%;
background-color:#ffffff;
color :#444444;
border :none;
text-align :right;
font-size :16pt;
}

button{
display :block;
width :2em;
}

<!DOCTYPE html>

<html>

<head>
<title>Calculatrice</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="calculatrice.css"/>
<script type="application/javascript" src="calculatrice.js">
</script>
</head>

<body>
<div class="box">
<input id="result" type="text" disabled="1"/>
</div>
<p/>
<div class="box">
<table>
<tr>
<td><button onclick ="enter('7');">7</button></td>
<td><button onclick ="enter('8');">8</button></td>
<td><button onclick ="enter('9');">9</button></td>
<td><button onclick ="enter('/');">/</button></td>
</tr>
<tr>
<td><button onclick ="enter('4');">4</button></td>
<td><button onclick ="enter('5');">5</button></td>
<td><button onclick ="enter('6');">6</button></td>
<td><button onclick ="enter('*');">*</button></td>
</tr>
<tr>
<td><button onclick ="enter('1');">1</button></td>
<td><button onclick ="enter('2');">2</button></td>
<td><button onclick ="enter('3');">3</button></td>
<td><button onclick ="enter('+');">+</button></td>
</tr>
<tr>
<td><button onclick ="enter('0');">0</button></td>
<td><button onclick ="enter('.');">.</button></td>
<td><button onclick ="enter('=');">=</button></td>
<td><button onclick ="enter('-');">-</button></td>
<td><button onclick ="enter('C');">C</button></td>
</tr>
</table>
</div>
</body>
</html>




Answer Source

You have missed some curly braces, plus ERROR is undefined and instead of onclick make use of onClick . Also the dom element re is undefined in function machine so either pass it of initialize it in the function.

var DEBUT	=0;
var ERROR	=1;
var OP1		=2;
var OP2		=3;
var FIN		=4;
var etat	=DEBUT;
var op1		='';
var op2		='';
var op		= undefined;

function isdigit (bval){
	if((bval=='0')||(bval=='1')||(bval=='2')||(bval=='3')||(bval=='4')||(bval=='5')||(bval=='6')||(bval=='7')||(bval=='8')||(bval=='9')){
		return true;
	}
	return false;
}

function machine(bval, re) {
	if(etat==DEBUT){
		if((bval=='c')||(bval=='=')) return;
			
		if((bval=='+')||(bval=='-')||(bval=='/')||(bval=='*')){
			etat=ERROR;
		}
		if(isdigit(bval) == true) {
			etat=OP1;
			op1 += bval;
		}
	}
	
	if(etat==ERROR){
		if ((bval)=='C'){
			etat=DEBUT;
			op1="";
			op2="";
			op=undefined
		}
	}
	
	if (etat==OP1){
		if(bval=='c'){
			etat=DEBUT;
			valeur="";
			op1=undefined;
			op2=undefined;
		}
		if(bval=='='){
			etat=FIN;
			re.value += OPL;
		}
	}
	if (etat=FIN){
		
	}
		
}

function enter (bval) {
	var re = document.getElementById("result");
	machine (bval, re);
	if (etat == DEBUT){
		re.value='';
	}
	else if (etat == ERROR){
		re.value='ERROR';
	} 
	else {
		re.value += bval; 
    }
} 
body{
	font-family		:Arial, sans-serif;
	font-size		:12pt;
	text-align		:center;
	background-color:#ffffff;
	color			:#777777;
	}
	
.box{
	margin			:0px auto;
	padding			:20px 20px 20px 20px;
	width			:600px;
	background-color:rgba(50,50,50,0.5 );
	text-align		:left;
	}
	
#result{
	margin			:20px auto;
	padding			:0px;
	display			:block;
	width			:100%;
	background-color:#ffffff;
	color			:#444444;
	border			:none;
	text-align		:right;
	font-size		:16pt;
	}
	
button{
	display			:block;
	width			:2em;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

	<head>
		<title>Calculatrice</title>
		<meta charset="UTF-8"/>
		<link rel="stylesheet" type="text/css" href="calculatrice.css"/>
		<script type="application/javascript" src="calculatrice.js">
		</script>
	</head>
	
	<body>
		<div class="box">
			<input id="result" type="text" disabled="1"/>
		</div>
		<p/>
		<div class="box">
			<table>
				<tr>
					<td><button onClick ="enter('7');">7</button></td>
					<td><button onClick ="enter('8');">8</button></td>
					<td><button onClick ="enter('9');">9</button></td>
					<td><button onClick ="enter('/');">/</button></td>
				</tr>
				<tr>
					<td><button onClick ="enter('4');">4</button></td>
					<td><button onClick ="enter('5');">5</button></td>
					<td><button onClick ="enter('6');">6</button></td>
					<td><button onClick ="enter('*');">*</button></td>
				</tr>
				<tr>
					<td><button onClick ="enter('1');">1</button></td>
					<td><button onClick ="enter('2');">2</button></td>
					<td><button onClick ="enter('3');">3</button></td>
					<td><button onClick ="enter('+');">+</button></td>
				</tr>
				<tr>
					<td><button onClick ="enter('0');">0</button></td>
					<td><button onClick ="enter('.');">.</button></td>
					<td><button onClick ="enter('=');">=</button></td>
					<td><button onClick ="enter('-');">-</button></td>
					<td><button onClick ="enter('C');">C</button></td>
				</tr>
			</table>
		</div>
	</body>
</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download