Listening for function outcomes in Javascript
Question
I'm still very new to html and javascript so I have some questions on how I would do some things. How could I track to see if a matching set of cards was picked, within my script tag? I tried making a global variable, to track it, within my script tag however, it would cause none of the functions to fire off. If someone could explain this for me it would be greatly appreciated. As I stated earlier I'm just learning javascript and html(as of two days ago actually) and I'm still fuzzy on some of the logic.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is a test of the game</h1>
<img id="topLeft" onclick="changeImageTL()" src="word-ace-card-back.jpg" width="104" height="142">
<img src="word-ace-card-back.jpg" onclick="changeImageTM()" id="topMiddle" onclick="changeImageTM()" width="104" height="142">
<img src="word-ace-card-back.jpg" onclick="changeImageTR()" id="topRight" width="104" height="142">
<br>
<img src="word-ace-card-back.jpg" onclick="changeImageML()" id="middleLeft" width="104" height="142">
<img src="word-ace-card-back.jpg" onclick="changeImageM()" id="middle"width="104" height="142">
<img src="word-ace-card-back.jpg" onclick="changeImageMR()" id="middleRight" width="104" height="142">
<br>
<img src="word-ace-card-back.jpg" onclick="changeImageBL()" id="bottomLeft" width="104" height="142">
<img src="word-ace-card-back.jpg" onclick="changeImageBM()" id="bottomMiddle" width="104" height="142">
<img src="word-ace-card-back.jpg" onclick="changeImageBR()" id="bottomRight" width="104" height="142">
<br>
<br>
<p> Hints: </p>
<label for="carrot" hidden = true>Carrot</label><br>
<label for="potato" hidden = true>Potato</label><br>
<label for="cabbage" hidden = true>Cabbage</label><br>
<br>
<br>
1. <input type="text" name="question1"> are grown from the dirt and are orange<br><br><br>
2. <input type="text" name="question2"> is a potato<br><br><br>
3. <input type="text" name="question3"> cabbage or something<br><br><br>
4. <input type="text" name="question3"> radish<br><br><br>
<input type="submit" value="Submit">
<script>
function changeImageTL() {
var image = document.getElementById('topLeft');
if ("word-ace-card-back.jpg") {
image.src = "carrot-fb.jpg";
} else if("carrot-fb.jpg") {
image.src = "word-ace-card-back.jpg";
}
}
function changeImageTM() {
var image = document.getElementById('topMiddle');
if ("word-ace-card-back.jpg") {
image.src = "carrot-fb.jpg";
} else if("carrot-fb.jpg") {
image.src = "word-ace-card-back.jpg";
}
}
function changeImageTR() {
var image = document.getElementById('topRight');
if ("word-ace-card-back.jpg") {
image.src = "Potato_wiki.jpg";
} else if("Potato_wiki.jpg") {
image.src = "word-ace-card-back.jpg";
}
}
function changeImageML() {
var image = document.getElementById('middleLeft');
if ("word-ace-card-back.jpg") {
image.src = "corn.jpg";
} else if("corn.jpg") {
image.src = "word-ace-card-back.jpg";
}
}
function changeImageM() {
var image = document.getElementById('middle');
if ("word-ace-card-back.jpg") {
image.src = "Broccoli_wiki.jpg";
} else if("Broccoli_wiki.jpg") {
image.src = "word-ace-card-back.jpg";
}
}
function changeImageMR() {
var image = document.getElementById('middleRight');
if ("word-ace-card-back.jpg") {
image.src = "TryAgain.png";
} else if("TryAgain.png") {
image.src = "word-ace-card-back.jpg";
}
}
function changeImageBL() {
var image = document.getElementById('bottomLeft');
if ("word-ace-card-back.jpg") {
image.src = "Broccoli_wiki.jpg";
} else if("Broccoli_wiki.jpg") {
image.src = "word-ace-card-back.jpg";
}
}
function changeImageBM() {
var image = document.getElementById('bottomMiddle');
if ("word-ace-card-back.jpg") {
image.src = "Potato_wiki.jpg";
} else if("Potato_wiki.jpg") {
image.src = "word-ace-card-back.jpg";
}
}
function changeImageBR() {
var image = document.getElementById('bottomRight');
if ("word-ace-card-back.jpg") {
image.src = "corn.jpg";
} else if("corn.jpg") {
image.src = "word-ace-card-back.jpg";
}
}
</script>
</body>
</html>
3 answers
solution1
2 2015-11-29 18:45:18
Your functions do execute, but they need some correction:
First, the following condition is not doing what you think it does:
if ("word-ace-card-back.jpg") {
... you need to compare that string with something. You intended this:
if (image.src == "word-ace-card-back.jpg") {
However, that will still not do it, because the src will give a full url , like http://localhost/myapp/word-ace-card-back.jpg .
You can fix this by only checking whether the image source url contains the particular image name, like this:
function changeImageTL() {
var image = document.getElementById('topLeft');
if (image.src.indexOf("word-ace-card-back.jpg") !== -1) {
image.src = "carrot-fb.jpg";
} else if(image.src.indexOf("carrot-fb.jpg") !== -1) {
image.src = "word-ace-card-back.jpg";
}
}
When indexOf returns -1 , it means the argument does not occur in the string you search in (in this case image.src ).
Now notice also that the else condition is really not necessary. You want to flip the image anyway, so if it is not in one direction, it should always be in the other. So the condition in the else part can be omitted:
function changeImageTL() {
var image = document.getElementById('topLeft');
if (image.src.indexOf("word-ace-card-back.jpg") !== -1) {
image.src = "carrot-fb.jpg";
} else {
image.src = "word-ace-card-back.jpg";
}
}
Do this correction in all functions and it should work better.
solution2
1 ACCPTED 2015-11-29 18:58:59
Assuming this is a 3x3 grid from what I could gather, you could create an array of size 9 where the first 3 represent the top and so on.
var grid = [0, 0, 0, 0, 0, 0, 0, 0, 0];
Where the zeros represent something not being selected.
Then place this line of code above your changeImageTL .
var grid = [0, 0, 0, 0, 0, 0, 0, 0, 0];
function changeImageTL() {
...
Now in each function flip the bit for each click, as in:
// For TL...
grid[0] = !grid[0];
Now, I would recommend changing all of your methods to a single method:
function changeImage(pos, I1,I2) {
var image = // Discussed later...
// Flip the bit...
grid[pos] = !grid[pos];
if (image.src == I1) {
image.src = I2;
} else if(image.src == I2) {
image.src = I1;
}
}
Then in the HTML call the function as follows:
changeImage(0, 'word-ace-card-back.jpg', 'carrot-fb.jpg');
Then you can call another function at the end of all your new function to check:
function doCheck() {
// Example...
if(grid[0] && grid[1]) { /* Do something */ }
// Etc....
}
Also, you do not have to use document.getElementById if you already know which element was clicked. Since you gave the image the onclick , when the element gets clicked the code called will be ran with the scope as the element. This means image is this . So, your code could look like:
function changeImage(pos, I1,I2) {
// Setting it to image to add some readability.
var image = this;
// Flip the bit...
grid[pos] = !grid[pos];
if (image.src == I1) {
image.src = I2;
} else if(image.src == I2) {
image.src = I1;
}
// Checks the grid.
doCheck();
}
solution3
-1 2015-11-29 18:36:53
Juste将“脚本”标记及其内容移动到“正文”的开头（在调用函数之前），它应该可以正常工作。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.