function check () {
for (i=0; i<letters[0].length; i++){
console.log(letters[i]);
if (document.getElementById("input").value == letters[i]){
console.log("it worked");
}
}
}
The idea of the code above is to check if a letter typed into the input box is equal to that in the array (its for a hangman game). Am I doing something wrong or is this not the way I should go about checking this? The console does cycle through the array yet the if statement is never triggered.
Hi there jmttaylor8,
letters[0].length…should be…
letters.lengthcoothead
I didn’t think that should matter since surely letters[0] is the same as letters. Also just tried this in the console and it doesn’t make a difference 
Thank you for taking a look however.
Hi there jmttaylor8,
letters[0]…refers to the first item of the array not the array itself.
coothead
Is letters ever initialized? It’s not in the function…
It is earlier in the code just as an empty array.
I have changed it but in the console letters[0].length was the same as letters.length idk why I thought the same as you until I typed that into the console.
Hi there jmttaylor8,
can you give us your full code, so that we can fully check your problem.
coothead
<html>
<head>
<canvas id = "mycanvas" Width = 500 height = 500 style = "border: solid";></canvas>
<script>
//defining the canvas
var ctx = document.getElementById("mycanvas").getContext("2d");
//An array contain words to be choose at random
var words = ["rice","bread","wheat"];
var letters = [];
//decalring the objects to be drawn onto the canvas
var stand = {
height: 10,
width:200,
posx:0,
posy:490,
};
var back = {
height: 300,
width:10,
posx:0,
posy:200,
};
var x = {
height: 10,
width:100,
posx:0,
posy:200,
};
var y = {
height: 20,
width:10,
posx:90,
posy:200,
};
var head = {
height: 40,
width:40,
posx:75,
posy:220,
};
var body = {
height: 80,
width:15,
posx:87,
posy:260,
};
var waist = {
height: 10,
width:30,
posx:80,
posy:340,
};
var leg1 = {
height: 60,
width:10,
posx:80,
posy:340,
};
var leg2 = {
height: 60,
width:10,
posx:100,
posy:340,
};
var arm = {
height: 10,
width:120,
posx:37,
posy:275,
};
var word = "";
//chossing a random word
function guess () {
randword = Math.random();
if (randword < 0.33) {
word = words[0];
}
if (randword < 0.67 && randword > 0.33) {
word = words[1];
}
if (randword < 0.99 && randword > 0.67) {
word = words[2];
letters.push(word.split(""));
}
//putting the letters into an array
}
//checking if the input equals one of the letters of the randomly choose words.
function check () {
for (i=0; i<letters.length; i++){
console.log(letters[i]);
if (document.getElementById("input").value == letters[i]){
console.log("it worked");
}
}
}
//drawing objects onto the canvas
function draw (something) {
ctx.fillRect(something.posx,something.posy,something.width,something.height);
}
//calling the functions to be drawn, testing purposes only
draw(stand)
draw(back)
draw(x)
draw(y)
draw(head)
draw(body)
draw(waist)
draw(leg1)
draw(leg2)
draw(arm)
guess()
</script>
</head>
<form>
<input id = "input" type="text" size="2" maxlength="1"></input>
</form>
<button onclick = "check()"> click <button>
</html>
Sorry for the late reply.
If letters is an empty array, you’ll never get into the for loop…
Letters isn’t empty since im pushing that into it?
Only if randword is between 0.68 and 0.98. And only if you call the guess method, which you never do…
Hi there jmttaylor8,
here is your code corrected and validated…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
#mycanvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
<div>
<input id="input" type="text" size="2" maxlength="1">
<input id="but" type="button" value="click">
</div>
<script>
(function() {
'use strict';
/* jshint browser: true */
//defining the canvas
var ctx = document.getElementById('mycanvas').getContext('2d');
//An array contain words to be choose at random
var words = ['rice', 'bread', 'wheat'];
var letters = [];
//decalring the objects to be drawn onto the canvas
var stand = {
height: 10,
width: 200,
posx: 0,
posy: 490,
};
var back = {
height: 300,
width: 10,
posx: 0,
posy: 200,
};
var x = {
height: 10,
width: 100,
posx: 0,
posy: 200,
};
var y = {
height: 20,
width: 10,
posx: 90,
posy: 200,
};
var head = {
height: 40,
width: 40,
posx: 75,
posy: 220,
};
var body = {
height: 80,
width: 15,
posx: 87,
posy: 260,
};
var waist = {
height: 10,
width: 30,
posx: 80,
posy: 340,
};
var leg1 = {
height: 60,
width: 10,
posx: 80,
posy: 340,
};
var leg2 = {
height: 60,
width: 10,
posx: 100,
posy: 340,
};
var arm = {
height: 10,
width: 120,
posx: 37,
posy: 275,
};
var word = '';
//chossing a random word
function guess() {
var randword = Math.random();
if (randword < 0.33) {
word = words[0];
}
if (randword < 0.67 && randword > 0.33) {
word = words[1];
}
if (randword < 0.99 && randword > 0.67) {
word = words[2];
}
letters.push(word.split(''));
//putting the letters into an array
}
//checking if the input equals one of the letters of the randomly choose words.
document.getElementById('but').addEventListener('click', check, false);
function check() {
for (var i = 0; i < letters[0].length; i++) {
console.log(letters[0][i]);
if (document.getElementById('input').value == letters[0][i]) {
console.log('it worked');
}
}
}
//drawing objects onto the canvas
function draw(something) {
ctx.fillRect(something.posx, something.posy, something.width, something.height);
}
//calling the functions to be drawn, testing purposes only
draw(stand);
draw(back);
draw(x);
draw(y);
draw(head);
draw(body);
draw(waist);
draw(leg1);
draw(leg2);
draw(arm);
guess();
}());
</script>
</body>
</html>coothead
Thank you, I think the problem was the scope on the varible i, seems to have sorted things out, Thank you for all your help and I like your website btw, a bit odd if I don’t say so myself.
Hi there jmttaylor8,
The problem was that “letters” was a two dimensional array.
This was not made apparent by the code of your original post.
It is not really a website as such, but just
a repository for coding bits and bobs. 
coothead
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.