Need help making a solution button and list strike through
Hello,
I need some help with my word search puzzle. I need to make it so that when a word is clicked on the list it will strike through and also I need to make it so that when you click the solution button it shows all the words in the puzzle.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Word Search Game</title>
<script src="modernizr-1.5.js" type="text/javascript" ></script>
<script src="wordsearch.js" type="text/javascript" ></script>
<script src="words.js" type="text/javascript" ></script>
<link href="kgstyles.css" rel="stylesheet" type="text/css" />
<link href="wordsearch.css" rel="stylesheet" type="text/css" />
</head>
<body onLoad="init(letterGrid, wordGrid, wordList)">
<section id="main">
<header>
<img src="kglogo.jpg" alt="Kiddergarden" />
</header>
<div id="links">
<img src="links.jpg" alt="" />
</div>
<article>
<img src="headmenu.jpg" alt="" />
<img src="title.jpg" id="h1img" alt="Guessing Game" />
<figure id="wordTable"></figure>
<aside>
<h1></h1>
<p>Click the letters in the grid that match the words listed
below. When you find a word, strike it out from the list
by clicking the entry.
</p>
<figure id="wordList"></figure>
<ul onLoad='makelist()'>
</ul>
</aside>
<div>
<input type="button" id="solve" value = "Show Solution" />
</div>
</article>
</section>
</body>
</html>
Code:
function init(letterGrid, wordGrid, words) {
document.getElementsByTagName("h1")[0].innerHTML = puzzleTitle;
document.getElementById("wordTable").innerHTML = drawWordSearch( letterGrid, wordGrid );
document.getElementById("wordList").appendChild( makeList( words ) );
document.getElementById("solve").onclick = showSolution;
}
function makeList(words){
var listContainer = document.createElement("ul");
var numberOfListItems = words.length;
for ( var i = 0; i <numberOfListItems; i++ ) {
var item = document.createElement("li");
item.innerHTML = words[i];
listContainer.appendChild( item );
}
return listContainer;
}
function drawWordSearch(letterGrid, wordGrid) {
var rowSize = letterGrid.length;
var colSize = letterGrid[0].length;
var htmlCode = "<table id='wordsearchtable'>";
for (var i = 0; i < rowSize; i++) {
htmlCode += "<tr>";
for (var j = 0; j < colSize; j++) {
if (wordGrid[i][j] == " ") {
htmlCode += "<td id='"+i+"_"+j+"' onClick='cellClicked("+i+","+j+")'>";
} else {
htmlCode += "<td id='"+i+"_"+j+"' onClick='cellClicked("+i+","+j+")' class='wordCell' >";
}
htmlCode += letterGrid[i][j];
htmlCode += "</td>";
}
htmlCode += "</tr>";
}
htmlCode += "</table>";
return htmlCode;
}
// Highlights cell selected and when clicked again it becomes unhighlighted
function cellClicked(row, col) {
var cell = document.getElementById(row+"_"+col);
if( cell.style.backgroundColor == "" ) {
cell.style.backgroundColor = "rgb(255,0,0)";
} else {
cell.style.backgroundColor = "";
}}
function showSolution() {
}
Here is some help with your show solution. I do not know what you mean by strike through though.
Code:
var ShowAnswer = document.getElementByID("Your button ID here"); //get the button ID
ShowAnswer.addEventListener("click", showSolution); //add an event listener to toggle when the button is clicked then run the function
function showSolution() {
var joinList = wordList.join(", "); //join the array into a string with ", " seperator
return joinList; //return the string
}
PS: If you wanted it to do more than what I have posted make sure you specify that in your questions, because to me it was somewhat vague.
Last edited by JonBMN; 04-26-2013 at 04:46 PM..
Reason: reminder
Here is some help with your show solution. I do not know what you mean by strike through though.
Code:
var ShowAnswer = document.getElementByID("Your button ID here"); //get the button ID
ShowAnswer.addEventListener("click", showSolution); //add an event listener to toggle when the button is clicked then run the function
function showSolution() {
var joinList = wordList.join(", "); //join the array into a string with ", " seperator
return joinList; //return the string
}
PS: If you wanted it to do more than what I have posted make sure you specify that in your questions, because to me it was somewhat vague.
Thank you! Sorry I did not really know how to phrase my question. On the right of the puzzle on the page there is a list of words ( wordList ). I need a function that causes a line to go through ( or strike it out ) when a user clicks on that specific word. Does that make sense?
It's fine, sometimes I don't know how to either, but it all comes with experience
So to get this straight you'd like to make it so if you clicked the word in your wordList, the values would highlight in your grid?
No, though that would be cool lol. So you know how when you have a word puzzle and you find a word from the list of words that you are searching for? You would put a line through the word on the list, not just the puzzle, to say ok I already found that one. The word in the Grid will just be highlighted it does not need a strike. I am probably terrible at explaining this sorry.
function makeList(words){
var listContainer = document.createElement("ul");
var numberOfListItems = words.length;
for ( var i = 0; i <numberOfListItems; i++ ) {
var item = document.createElement("li");
item.innerHTML = words[i];
item.onclick=function (){this.style.textDecoration="line-through"}
listContainer.appendChild( item );
}
return listContainer;
}
Code:
function showSolution() {
var rowSize = letterGrid.length;
var colSize = letterGrid[0].length;
var mytab=document.getElementById('wordsearchtable');
for (var i = 0; i < rowSize; i++) {
for (var j = 0; j < colSize; j++) {
if (wordGrid[i][j] == "#") {
mytab.rows[i].cells[j].innerHTML = letterGrid[i][j]
} else {
mytab.rows[i].cells[j].innerHTML =" ";
}
}
}
}
function makeList(words){
var listContainer = document.createElement("ul");
var numberOfListItems = words.length;
for ( var i = 0; i <numberOfListItems; i++ ) {
var item = document.createElement("li");
item.innerHTML = words[i];
item.onclick=function (){this.style.textDecoration="line-through"}
listContainer.appendChild( item );
}
return listContainer;
}
Code:
function showSolution() {
var rowSize = letterGrid.length;
var colSize = letterGrid[0].length;
var mytab=document.getElementById('wordsearchtable');
for (var i = 0; i < rowSize; i++) {
for (var j = 0; j < colSize; j++) {
if (wordGrid[i][j] == "#") {
mytab.rows[i].cells[j].innerHTML = letterGrid[i][j]
} else {
mytab.rows[i].cells[j].innerHTML =" ";
}
}
}
}
Awesome that works. Are you able to explain it all to em a bit? I am still learning a lot. That is similar to what I had started but then erased it because I wasn't sure I was doing it right. Also, how would I make it so the words are just highlighted instead of the whole puzzle disappearing except the words?
Before you post, read our: 
