onClick not calling function

Question

Que336 0 Newbie Poster

12 Years Ago

hi

I'm having serious problems with this code. It all started when I tried to use functions. The function easy() works fine when the page loads but the button has stopped calling the check() function. could it be because I have that stored inside another function? I tried placing outside the function easy() but it still didnt work. Does anyone have any ideas? You help will be greatly appreciated

window.onload = function(){
	easy();	
}

function easy(){
var ids = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,
			   51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81]
	var items = [3,0,6,5,0,0,0,9,0,2,0,0,4,0,0,8,5,1,1,0,0,7,8,0,0,6,0,0,0,9,3,6,8,5,0,0,6,2,8,0,0,0,3,4,9,0,0,5,9,2,4,1,0,0,0,4,0,0,9,7,0,0,2,8,6,				3,0,0,1,0,0,5,0,7,0,0,0,3,4,0,8];
	
	var ans = [3,8,6,5,1,2,7,9,4,2,9,7,4,3,6,8,5,1,1,5,4,7,8,9,2,6,3,4,1,9,3,6,8,5,2,7,6,2,8,1,7,5,3,4,9,7,3,5,9,2,4,1,8,6,5,4,1,8,9,7,6,3,2,8,6,3,2,4,1,9,7,5,9,7,2,6,5,3,4,1,8];
	
	var x = 0
	for (var i = 0; i < items.length; i++) {
	var item = items[i];
	var id = ids[i];		
	var element = document.getElementById(id).innerHTML = item;
	
	if (item === 0){
		document.getElementById(id).innerHTML="";
		document.getElementById(id).contentEditable = "true";
		document.getElementById(id).style.backgroundColor = "yellow";
        
       function check(){
			for (var i = 0; i < items.length; i++) {
			var id = ids[i];
			var answ = ans[i];
			
			if(document.getElementById(id).textContent!= answ){
				document.getElementById(id).style.backgroundColor = "red";
			}
		}
		
		}//end of check
	}
	
	
	}

html-css javascript

Edited 12 Years Ago by Que336 because: n/a

3 Contributors
4 Replies
1K Views
9 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by Troy III

Troy III 272 Posting Pro

12 Years Ago

who's calling the check function?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Que336 0 Newbie Poster · Answer 1 · 2012-02-16T05:12:33+00:00

who's calling the check function?

Its a button I have on the page. Here is a clearer picture.

<head>
<script type="text/javascript">

window.onload = function(){
	easy();	
}

function easy(){
var ids = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,
			   51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81]
	var items = [3,0,6,5,0,0,0,9,0,2,0,0,4,0,0,8,5,1,1,0,0,7,8,0,0,6,0,0,0,9,3,6,8,5,0,0,6,2,8,0,0,0,3,4,9,0,0,5,9,2,4,1,0,0,0,4,0,0,9,7,0,0,2,8,6,				3,0,0,1,0,0,5,0,7,0,0,0,3,4,0,8];
	
	var ans = [3,8,6,5,1,2,7,9,4,2,9,7,4,3,6,8,5,1,1,5,4,7,8,9,2,6,3,4,1,9,3,6,8,5,2,7,6,2,8,1,7,5,3,4,9,7,3,5,9,2,4,1,8,6,5,4,1,8,9,7,6,3,2,8,6,3,2,4,1,9,7,5,9,7,2,6,5,3,4,1,8];
	
	var x = 0
	for (var i = 0; i < items.length; i++) {
	var item = items[i];
	var id = ids[i];		
	var element = document.getElementById(id).innerHTML = item;
	
	if (item === 0){
		document.getElementById(id).innerHTML="";
		document.getElementById(id).contentEditable = "true";
		document.getElementById(id).style.backgroundColor = "yellow";
	}
	function check(){
			for (var i = 0; i < items.length; i++) {
			var id = ids[i];
			var answ = ans[i];
			
			if(document.getElementById(id).textContent!= answ){
				document.getElementById(id).style.backgroundColor = "red";
			}
		}
		
		}//end of check
	
	}// end of easy
	
	
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="tablestyle.css" type="text/css" />
</head>

<body>
<table id="main" width="50%">
  <tr>
    <td><div id="1"></div></td>
    <td><div id="2"></div></td>
    <td><div id="3"></div></td>
    <td><div id="4"></div></td>
    <td><div id="5"></div></td>
    <td ><div id="6"></div></td>
    <td><div id="7"></div></td>
    <td><div id="8"></div></td>
    <td><div id="9"></div></td>
  </tr>
  <tr>
    <td><div id="10"></div></td>
    <td><div id="11"></div></td>
    <td ><div id="12"></div></td>
    <td><div id="13"></div></td>
    <td><div id="14"></div></td>
    <td ><div id="15"></div></td>
    <td><div id="16"></div></td>
    <td><div id="17"></div></td>
    <td><div id="18"></div></td>
  </tr>
  <tr>
    <td ><div id="19"></div></td>
    <td ><div id="20"></div></td>
    <td ><div id="21"></div></td>
    <td ><div id="22"></div></td>
    <td ><div id="23"></div></td>
    <td ><div id="24"></div></td>
    <td ><div id="25"></div></td>
    <td ><div id="26"></div></td>
    <td ><div id="27"></div></td>
  </tr>
  <tr>
    <td><div id="28"></div></td>
    <td><div id="29"></div></td>
    <td ><div id="30"></div></td>
    <td><div id="31"></div></td>
    <td><div id="32"></div></td>
    <td ><div id="33"></div></td>
    <td><div id="34"></div></td>
    <td><div id="35"></div></td>
    <td><div id="36"></div></td>
  </tr>
  <tr>
    <td><div id="37"></div></td>
    <td><div id="38"></div></td>
    <td ><div id="39"></div></td>
    <td><div id="40"></div></td>
    <td><div id="41"></div></td>
    <td ><div id="42"></div></td>
    <td><div id="43"></div></td>
    <td><div id="44"></div></td>
    <td><div id="45"></div></td>
  </tr>
  <tr>
    <td ><div id="46"></div></td>
    <td ><div id="47"></div></td>
    <td ><div id="48"></div></td>
    <td ><div id="49"></div></td>
    <td ><div id="50"></div></td>
    <td ><div id="51"></div></td>
    <td ><div id="52"></div></td>
    <td ><div id="53"></div></td>
    <td ><div id="54"></div></td>
  </tr>
  <tr>
    <td><div id="55"></div></td>
    <td><div id="56"></div></td>
    <td ><div id="57"></div></td>
    <td><div id="58"></div></td>
    <td><div id="59"></div></td>
    <td ><div id="60"></div></td>
    <td><div id="61"></div></td>
    <td><div id="62"></div></td>
    <td><div id="63"></div></td>
  </tr>
  <tr>
    <td><div id="64"></div></td>
    <td><div id="65"></div></td>
    <td ><div id="66"></div></td>
    <td><div id="67"></div></td>
    <td><div id="68"></div></td>
    <td ><div id="69"></div></td>
    <td><div id="70"></div></td>
    <td><div id="71"></div></td>
    <td><div id="72"></div></td>
  </tr>
  <tr>
    <td><div id="73"></div></td>
    <td><div id="74"></div></td>
    <td ><div id="75"></div></td>
    <td><div id="76"></div></td>
    <td><div id="77"></div></td>
    <td><div id="78"></div></td>
    <td><div id="79"></div></td>
    <td><div id="80"></div></td>
    <td><div id="81"></div></td>
  </tr>
</table>
<script type="text/javascript">
	
		//end of check	
</script>
<p>&nbsp;</p>
<input type="submit" name="check" id="check" value="Check" onclick="check()" />
</body>

jstfsklh211 79 Light Poster · Answer 2 · 2012-02-16T06:10:48+00:00

most likely it is calling check but as your button type is submit its redirecting you probably back to the same page making it appear nothing happened

try changing button type to button or adding onclick="return check()" with a return false if you are not trying to redirect or true if you are intending to after running the function

Troy III 272 Posting Pro · Answer 3 · 2012-02-16T08:16:59+00:00

Its a button I have on the page. Here is a clearer picture.

<head>
<script type="text/javascript">

window.onload = function(){
	easy();	
}

function easy(){
var ids = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,
			   51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81]
	var items = [3,0,6,5,0,0,0,9,0,2,0,0,4,0,0,8,5,1,1,0,0,7,8,0,0,6,0,0,0,9,3,6,8,5,0,0,6,2,8,0,0,0,3,4,9,0,0,5,9,2,4,1,0,0,0,4,0,0,9,7,0,0,2,8,6,				3,0,0,1,0,0,5,0,7,0,0,0,3,4,0,8];
	
	var ans = [3,8,6,5,1,2,7,9,4,2,9,7,4,3,6,8,5,1,1,5,4,7,8,9,2,6,3,4,1,9,3,6,8,5,2,7,6,2,8,1,7,5,3,4,9,7,3,5,9,2,4,1,8,6,5,4,1,8,9,7,6,3,2,8,6,3,2,4,1,9,7,5,9,7,2,6,5,3,4,1,8];
	
	var x = 0
	for (var i = 0; i < items.length; i++) {
	var item = items[i];
	var id = ids[i];		
	var element = document.getElementById(id).innerHTML = item;
	
	if (item === 0){
		document.getElementById(id).innerHTML="";
		document.getElementById(id).contentEditable = "true";
		document.getElementById(id).style.backgroundColor = "yellow";
	}
	function check(){
			for (var i = 0; i < items.length; i++) {
			var id = ids[i];
			var answ = ans[i];
			
			if(document.getElementById(id).textContent!= answ){
				document.getElementById(id).style.backgroundColor = "red";
			}
		}
		
		}//end of check
	
	}// end of easy
	
	
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="tablestyle.css" type="text/css" />
</head>

<body>
<table id="main" width="50%">
  <tr>
    <td><div id="1"></div></td>
    <td><div id="2"></div></td>
    <td><div id="3"></div></td>
    <td><div id="4"></div></td>
    <td><div id="5"></div></td>
    <td ><div id="6"></div></td>
    <td><div id="7"></div></td>
    <td><div id="8"></div></td>
    <td><div id="9"></div></td>
  </tr>
  <tr>
    <td><div id="10"></div></td>
    <td><div id="11"></div></td>
    <td ><div id="12"></div></td>
    <td><div id="13"></div></td>
    <td><div id="14"></div></td>
    <td ><div id="15"></div></td>
    <td><div id="16"></div></td>
    <td><div id="17"></div></td>
    <td><div id="18"></div></td>
  </tr>
  <tr>
    <td ><div id="19"></div></td>
    <td ><div id="20"></div></td>
    <td ><div id="21"></div></td>
    <td ><div id="22"></div></td>
    <td ><div id="23"></div></td>
    <td ><div id="24"></div></td>
    <td ><div id="25"></div></td>
    <td ><div id="26"></div></td>
    <td ><div id="27"></div></td>
  </tr>
  <tr>
    <td><div id="28"></div></td>
    <td><div id="29"></div></td>
    <td ><div id="30"></div></td>
    <td><div id="31"></div></td>
    <td><div id="32"></div></td>
    <td ><div id="33"></div></td>
    <td><div id="34"></div></td>
    <td><div id="35"></div></td>
    <td><div id="36"></div></td>
  </tr>
  <tr>
    <td><div id="37"></div></td>
    <td><div id="38"></div></td>
    <td ><div id="39"></div></td>
    <td><div id="40"></div></td>
    <td><div id="41"></div></td>
    <td ><div id="42"></div></td>
    <td><div id="43"></div></td>
    <td><div id="44"></div></td>
    <td><div id="45"></div></td>
  </tr>
  <tr>
    <td ><div id="46"></div></td>
    <td ><div id="47"></div></td>
    <td ><div id="48"></div></td>
    <td ><div id="49"></div></td>
    <td ><div id="50"></div></td>
    <td ><div id="51"></div></td>
    <td ><div id="52"></div></td>
    <td ><div id="53"></div></td>
    <td ><div id="54"></div></td>
  </tr>
  <tr>
    <td><div id="55"></div></td>
    <td><div id="56"></div></td>
    <td ><div id="57"></div></td>
    <td><div id="58"></div></td>
    <td><div id="59"></div></td>
    <td ><div id="60"></div></td>
    <td><div id="61"></div></td>
    <td><div id="62"></div></td>
    <td><div id="63"></div></td>
  </tr>
  <tr>
    <td><div id="64"></div></td>
    <td><div id="65"></div></td>
    <td ><div id="66"></div></td>
    <td><div id="67"></div></td>
    <td><div id="68"></div></td>
    <td ><div id="69"></div></td>
    <td><div id="70"></div></td>
    <td><div id="71"></div></td>
    <td><div id="72"></div></td>
  </tr>
  <tr>
    <td><div id="73"></div></td>
    <td><div id="74"></div></td>
    <td ><div id="75"></div></td>
    <td><div id="76"></div></td>
    <td><div id="77"></div></td>
    <td><div id="78"></div></td>
    <td><div id="79"></div></td>
    <td><div id="80"></div></td>
    <td><div id="81"></div></td>
  </tr>
</table>
<script type="text/javascript">
	
		//end of check	
</script>
<p>&nbsp;</p>
<input type="submit" name="check" id="check" value="Check" onclick="check()" />
</body>

So, if my guess is right; your easy function should run only once at the page load, than you'll need the check function to run independently, but every time the client clicks a button(?) But since the check function is depending on the easy functions processed data you've placed the check function inside the easy one for it to be able to access the data needed(?) But than its a closure. It can't be seen by the global context. That's why you'll not be able to call the check from an outer context of its host function.

Now, you either need to move the check function outside of the easy one and make the easy vars globally accessible, or add a check function call to the easy function [with: check();] soon after it is defined and call the easy function from the button instead.

There are other possible scenarios too but you should try these first and see how it goes.