Can't get <select onFocus"" > to work

Question

Que336 0 Newbie Poster

12 Years Ago

Somebody please help me. The page loads fine but when I change the option on select nothing happens. I'm sure it's just a small problem. Your help will go a long way. Thank you in advance.

<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>
<select id="select">
<option  onfocus="doThis()" value="easy">Easy</option>
<option onfocus="doThis()" value="medium">Medium</option>
<option  onfocus="doThis()" value="hard">Hard</option>
</select>
<script type=text/javascript>
	
	var opt = document.getElementById("select");
	
	var items = [];
	var ans = [];
		
		if(opt.value === "easy"){
			 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];
			 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];
		} 
		else if
		(opt.value === "medium"){
			 items = [8,0,0,0,0,0,3,1,0,0,0,0,5,1,7,0,0,0,0,9,0,0,0,0,2,5,0,7,0,0,3,0,8,0,0,1,4,0,0,0,0,0,0,0,6,3,0,0,2,0,1,0,0,5,0,7,3,0,0,0,0,4,0,0,0,0,8,9,6,0,0,0,0,1,8,0,0,0,0,0,2];
			 ans = [8,6,5,4,2,9,3,1,7,2,3,4,5,1,7,6,8,9,1,9,7,6,8,3,2,5,4,7,5,9,3,6,8,4,2,1,4,2,1,9,7,5,8,3,6,3,8,6,2,4,1,7,9,5,6,7,3,1,5,2,9,4,8,5,4,2,8,9,6,1,7,3,9,1,8,7,3,4,5,6,2];
		}else 
		{
			items = [0,8,0,0,0,0,0,0,1,9,0,0,2,7,6,0,0,0,0,5,0,0,0,0,0,2,9,0,0,9,8,0,0,2,0,0,0,0,1,4,0,9,8,0,0,0,0,6,0,0,,5,3,0,0,7,3,0,0,0,0,0,6,0,0,0,0,9,3,8,0,0,2,2,0,0,0,0,0,0,4,0];
			ans = [6,8,2,5,9,4,7,3,19,1,3,2,7,6,4,8,5,4,5,7,3,8,1,6,2,9,5,4,9,8,6,3,2,1,7,3,7,1,4,2,9,8,5,6,8,2,6,7,1,5,3,9,4,7,3,5,1,4,2,9,6,8,1,6,4,9,3,8,5,7,2,2,9,8,6,5,7,1,4,3];
		}
	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];
	
	
		function doThis(){
			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";
				}//end of if
			}//end of for
			
		}//end of do this
		
		doThis();
			
			function check(){
				for (var i = 0; i < ids.length;i++){
					var id = ids[i];
					var answer = ans[i];
					var myID = document.getElementById(id);
					
					if (myID.textContent != answer){
						myID.style.backgroundColor = "red";
					}
				}
			}
			
		
</script>

<button type="button" onclick="check()">Display Date</button>
</body>

html-css javascript

2 Contributors
3 Replies
233 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by jstfsklh211

jstfsklh211 79 Light Poster

12 Years Ago

<select id="select" onchange="doThis()">
    <option value="easy">Easy</option>
    <option value="medium">Medium</option>
    <option value="hard">Hard</option>
</select>

though I'm not sure what doThis is doing

Edited 12 Years Ago by jstfsklh211 because: n/a

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-18T00:44:54+00:00

<select id="select" onchange="doThis()">
    <option value="easy">Easy</option>
    <option value="medium">Medium</option>
    <option value="hard">Hard</option>
</select>

though I'm not sure what doThis is doing

Thanks for taking time out for me, I really appreciate it. DoThis() fills the divs with values from the arrays which are dependant on which option is selected. It's a sudoku game. I want this to change dynamically so if the user chooses easy the easy puzzle is shown....the same applies to the other puzzles. I'm not too sure what I'm doing wrong. Any suggestions?

jstfsklh211 79 Light Poster · Answer 2 · 2012-02-19T07:34:06+00:00

seems we need to back up a bit

right now when your page loads you check "select" for a value which in this case will always be the first value in the select box

Your doThis() function never checks what the value of "select" is and will only continuously reload the same value that loaded the first time

your function also doesn't have any knowledge of the three options for your game even if you had been checking the value of select your function has nothing to reset the values of "item" and "ans"

getting the value of "select" into your function is pretty simple

var select = document.getElementById("select");
var opt = select.options[select.selectedindex].value

opt would now equal the selected value of "select"

rewriting your script to something more like this

var items = [];
var ans = [];

function doThis(){
	var select = document.getElementById("select");
	var opt = select.options[select.selectedindex].value;
	 	 
	if(opt == "easy") {
		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];
		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];
	} else if(opt == "medium") {
		items = [8,0,0,0,0,0,3,1,0,0,0,0,5,1,7,0,0,0,0,9,0,0,0,0,2,5,0,7,0,0,3,0,8,0,0,1,4,0,0,0,0,0,0,0,6,3,0,0,2,0,1,0,0,5,0,7,3,0,0,0,0,4,0,0,0,0,8,9,6,0,0,0,0,1,8,0,0,0,0,0,2];
		ans = [8,6,5,4,2,9,3,1,7,2,3,4,5,1,7,6,8,9,1,9,7,6,8,3,2,5,4,7,5,9,3,6,8,4,2,1,4,2,1,9,7,5,8,3,6,3,8,6,2,4,1,7,9,5,6,7,3,1,5,2,9,4,8,5,4,2,8,9,6,1,7,3,9,1,8,7,3,4,5,6,2];
	} else {
		items = [0,8,0,0,0,0,0,0,1,9,0,0,2,7,6,0,0,0,0,5,0,0,0,0,0,2,9,0,0,9,8,0,0,2,0,0,0,0,1,4,0,9,8,0,0,0,0,6,0,0,,5,3,0,0,7,3,0,0,0,0,0,6,0,0,0,0,9,3,8,0,0,2,2,0,0,0,0,0,0,4,0];
		ans = [6,8,2,5,9,4,7,3,19,1,3,2,7,6,4,8,5,4,5,7,3,8,1,6,2,9,5,4,9,8,6,3,2,1,7,3,7,1,4,2,9,8,5,6,8,2,6,7,1,5,3,9,4,7,3,5,1,4,2,9,6,8,1,6,4,9,3,8,5,7,2,2,9,8,6,5,7,1,4,3];
	}

	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";
		}//end of if
	}//end of for
	 
}//end of do this

and now your arrays will reload each time you call doThis() and in theory will reprint your game properly

leaving "items" "ans" outside of the function allows them to be accessed from either function (global variables)

your check() function looks like it could work with the only problem being if I remember correctly there are always more than one answer to every sudoku game you should be checking to verify that all the rows have one and only of each number from 1 - 9 not forcing your answer on them