0

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>
2
Contributors
3
Replies
4
Views
5 Years
Discussion Span
Last Post by jstfsklh211
0
<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 by jstfsklh211: n/a

0
<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?

0

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

Edited by jstfsklh211: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.