Member Avatar for Que336

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
  • 232 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jstfsklh211

Recommended Answers

All 3 Replies

Member Avatar for jstfsklh211 
<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 because: n/a
Member Avatar for Que336 
<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?

Member Avatar for jstfsklh211

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 because: n/a
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.