sudhee_bsp
Reputation: 58
why I'm getting function is not defined?
My html code is :-
com_hrd.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="com_hrd.css" />
<title>GUESS</title>
<script type="text/javascript" src="com_hrd.js"></script>
</head>
<body>
<h1 id="a1">GUESS</h1>
<h1 id="a2">_Hard</h1>
<h2 id="a3">Hello <span id="res1"></span></h2>
<div class="hr2"></div>
<button type="submit" id="f1" onclick="msg()">
Generate
</button>
<div id="res5"></div>
<div id="res6"></div>
<div id="res"></div>
<h2 id="a3_1">Enter Your Lucky Number></h2>
<h2 id="a3_2">To Start Game:=></h2>
<div id="snackbar">
Number generated...Enter the Number
</div>
<input type="number" id="a4" />
<button
type="submit"
id="a5"
onclick="cal(document.getElementById('a4').value)"
>
Check
</button>
</body>
</html>
com_hrd.js
document.getElementById("res1").innerHTML = localStorage.getItem("textvalue3");
function generate() {
var N = Math.floor(Math.random() * 100) + 1;
return N;
}
function msg() {
var x = document.getElementById("snackbar");
x.className = "show";
setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
}
var Num = generate();
function cal(a) {
N1 = a;
// N1 = parseInt(document.getElementById("a4").value);
if (N1 == Num) {
document.getElementById("res").innerHTML = "BINGO!!! You Won!! \n Reload the Page \n To play Again";
break;
}
else {
l1 = [];
a1 = N1.toString();
for (var i = 0, len = a1.length; i < len; i += 1) {
l1.push(+a1.charAt(i));
}
l2 = [];
a2 = Num.toString();
for (var j = 0, len = a2.length; j < len; j += 1) {
l2.push(+a2.charAt(j));
}
if (l2.length == 1) {
if (l1.length == 2) {
if (l1[0] == l2[0] & l1[1] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
}
else if (l1[1] == l2[0] & l1[0] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else if (l1[0] == l2[0] & l1[1] == l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else {
document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
}
}
else if (l1[0] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
}
}
else if (l2.length == 2 & l1.length == l2.length) {
if (l1[0] == l2[0] | l1[1] == l2[1]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else if (l1[0] == l2[1] & l1[1] == l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 2\nPosition Matched: 0";
}
else if (l1[0] == l2[1] | l1[1] == l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else {
document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
}
}
else if (l1.length == 2 & l1.length > l2.length) {
if (l1[0] == l2[0] & l1[1] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
}
else if (l1[1] == l2[0] & l1[0] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
}
else if (l2.length == 2 & l1.length < l2.length) {
if (l1[0] == l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
}
else if (l1[0] == l2[1]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else if (l1[0] != l2[0] & l1[0] != l2[1]) {
document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
}
}
}
}
When i am clicking on Check button, cal() function must be called. But it is showing the following error :
Uncaught ReferenceError: cal is not defined
at HTMLButtonElement.onclick (com_hrd.html:36)
I'm unable get the solution. Actually that button should work. And i should be able to see the sentences i have given like, "Number position". But dont know why it is not working.
Upvotes: 2
Views: 127
Answers (3)
Ed Lucas
Reputation: 7305
This code seems to work fine after removing the misplaced break and commenting out your localstorage statement that was throwing a security error. I hardcoded the value to 99 for testing...try running it below.
//document.getElementById("res1").innerHTML = localStorage.getItem("textvalue3");
function generate() {
var N = Math.floor(Math.random() * 100) + 1;
//return N
return 99;
}
function msg() {
var x = document.getElementById("snackbar");
x.className = "show";
setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
}
var Num = generate();
function cal(a) {
N1 = a;
if (N1 == Num) {
document.getElementById("res").innerHTML = "BINGO!!! You Won!! \n Reload the Page \n To play Again";
console.log('BINGO');
}
else {
l1 = [];
a1 = N1.toString();
for (var i = 0, len = a1.length; i < len; i += 1) {
l1.push(+a1.charAt(i));
}
l2 = [];
a2 = Num.toString();
for (var j = 0, len = a2.length; j < len; j += 1) {
l2.push(+a2.charAt(j));
}
if (l2.length == 1) {
if (l1.length == 2) {
if (l1[0] == l2[0] & l1[1] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
}
else if (l1[1] == l2[0] & l1[0] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else if (l1[0] == l2[0] & l1[1] == l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else {
document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
}
}
else if (l1[0] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
}
}
else if (l2.length == 2 & l1.length == l2.length) {
if (l1[0] == l2[0] | l1[1] == l2[1]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else if (l1[0] == l2[1] & l1[1] == l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 2\nPosition Matched: 0";
}
else if (l1[0] == l2[1] | l1[1] == l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else {
document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
}
}
else if (l1.length == 2 & l1.length > l2.length) {
if (l1[0] == l2[0] & l1[1] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
}
else if (l1[1] == l2[0] & l1[0] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
}
else if (l2.length == 2 & l1.length < l2.length) {
if (l1[0] == l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
}
else if (l1[0] == l2[1]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else if (l1[0] != l2[0] & l1[0] != l2[1]) {
document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
}
}
}
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="com_hrd.css" />
<title>GUESS</title>
<script type="text/javascript" src="com_hrd.js"></script>
</head>
<body>
<h1 id="a1">GUESS</h1>
<h1 id="a2">_Hard</h1>
<h2 id="a3">Hello <span id="res1"></span></h2>
<div class="hr2"></div>
<button type="submit" id="f1" onclick="msg()">
Generate
</button>
<div id="res5"></div>
<div id="res6"></div>
<div id="res"></div>
<h2 id="a3_1">Enter Your Lucky Number></h2>
<h2 id="a3_2">To Start Game:=></h2>
<div id="snackbar">
Number generated...Enter the Number
</div>
<input type="number" id="a4" />
<button
type="submit"
id="a5"
onclick="cal(document.getElementById('a4').value)"
>
Check
</button>
</body>
</html>Upvotes: 1
Keegan Brown
Reputation: 535
You have an illegal break statement within that function, but that doesn't explain the error you're getting. something else must be wrong with your environment. I'd check to make sure your JS file is actually in the location referenced by your HTML. Working fiddle for reference (with the illegal break fixed): https://jsfiddle.net/keegangbrown/deapmrjo/
<h1 id="a1">GUESS</h1>
<h1 id="a2">_Hard</h1>
<h2 id="a3">Hello <span id="res1"></span></h2>
<div class="hr2"></div>
<button type="submit" id="f1" onclick="msg()">
Generate
</button>
<div id="res5"></div>
<div id="res6"></div>
<div id="res"></div>
<h2 id="a3_1">Enter Your Lucky Number></h2>
<h2 id="a3_2">To Start Game:=></h2>
<div id="snackbar">
Number generated...Enter the Number
</div>
<input type="number" id="a4" />
<button
type="submit"
id="a5"
onclick="cal(document.getElementById('a4').value)"
>
Check
</button>
document.getElementById("res1").innerHTML = localStorage.getItem("textvalue3");
function generate() {
var N = Math.floor(Math.random() * 100) + 1;
return N;
}
function msg() {
var x = document.getElementById("snackbar");
x.className = "show";
setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
}
var Num = generate();
function cal(a) {
N1 = a;
// N1 = parseInt(document.getElementById("a4").value);
if (N1 == Num) {
document.getElementById("res").innerHTML = "BINGO!!! You Won!! \n Reload the Page \n To play Again";
return;
}
else {
l1 = [];
a1 = N1.toString();
for (var i = 0, len = a1.length; i < len; i += 1) {
l1.push(+a1.charAt(i));
}
l2 = [];
a2 = Num.toString();
for (var j = 0, len = a2.length; j < len; j += 1) {
l2.push(+a2.charAt(j));
}
if (l2.length == 1) {
if (l1.length == 2) {
if (l1[0] == l2[0] & l1[1] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
}
else if (l1[1] == l2[0] & l1[0] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else if (l1[0] == l2[0] & l1[1] == l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else {
document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
}
}
else if (l1[0] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
}
}
else if (l2.length == 2 & l1.length == l2.length) {
if (l1[0] == l2[0] | l1[1] == l2[1]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else if (l1[0] == l2[1] & l1[1] == l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 2\nPosition Matched: 0";
}
else if (l1[0] == l2[1] | l1[1] == l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else {
document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
}
}
else if (l1.length == 2 & l1.length > l2.length) {
if (l1[0] == l2[0] & l1[1] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
}
else if (l1[1] == l2[0] & l1[0] != l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
}
else if (l2.length == 2 & l1.length < l2.length) {
if (l1[0] == l2[0]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
}
else if (l1[0] == l2[1]) {
document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
}
else if (l1[0] != l2[0] & l1[0] != l2[1]) {
document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
}
}
}
}
Upvotes: 1
Cagri Tacyildiz
Reputation: 17590
write return rather than break in cal() function. It is illegal used.
if (N1 == Num) {
document.getElementById("res").innerHTML = "BINGO!!! You Won!! \n Reload the Page \n To play Again";
return;
}
Upvotes: 1
Related Questions
- Javascript: Function parameter not defined error
- How to solve this CSS is not a function error
- JavaScript Issue can not use function with HTML Tag
- Why does the function return not defined?
- Why is function not defined?
- Cannot use a created function in JQuery
- function is called as a non function in javascript
- Function says it's "not defined"
- JavaScript function not recognized
- CSS does not work with Javascript function