如何在Javascript中触发特定事件
首先，很抱歉这个问题不好，我不知道如何用一句话把它写好 这是我的场景，我正在制作一个游戏，屏幕上显示3张图片和一个单词。这些图片和文字来自一个数据库 数据被输入到数据库中，因此每次输入一个单词时，一张图片也随之上传 所有这些单词和图像集都是从数据库中提取并放入JavaScript数组中的。然后我从一个数组中随机选择了3个图像，并将它们放在另一个数组中，然后从第二个数组中随机选取一个单词 我的问题是，如何让我选择的单词与正确的图片链接，然后当用户点击正确的图片时，屏幕上会出现“做得好”这样的情况 以下是我的阵列布局：-如何在Javascript中触发特定事件,javascript,arrays,random,Javascript,Arrays,Random,首先，很抱歉这个问题不好，我不知道如何用一句话把它写好 这是我的场景，我正在制作一个游戏，屏幕上显示3张图片和一个单词。这些图片和文字来自一个数据库 数据被输入到数据库中，因此每次输入一个单词时，一张图片也随之上传 所有这些单词和图像集都是从数据库中提取并放入JavaScript数组中的。然后我从一个数组中随机选择了3个图像，并将它们放在另一个数组中，然后从第二个数组中随机选取一个单词 我的问题是，如何让我选择的单词与正确的图片链接，然后当用户点击正确的图片时，屏幕上会出现“做得好”这样的情况
var items = [
{name:'Coch',image:'upload/coch.png'}, {name:'Glas',image:'upload/glas.png'},
{name:'Melyn',image:'upload/melyn.png'},{name:'Ci',image:'upload/dog.jpg'},
{name:'Cath',image:'upload/cath.jpg'},{name:'Gwyrdd',image:'upload/gwyrdd.png'},
{name:'Un',image:'upload/un.jpg'},{name:'Dau',image:'upload/dau.jpg'},
{name:'Tri',image:'upload/tri.jpg'},{name:'Bochdew',image:'upload/bochdew.jpg'},
{name:'Piws',image:'upload/piws.png'} ];
<!DOCTYPE html>
<html lang="en">
<div id="choosecat">
<form method="get" action="playgame.php" autocomplete="off">
<fieldset>
<legend>Choose Category</legend>
<label>Category: <select name="topic">
<option value="%">All</option>
<option value="Animals">Animals</option>
<option value="Numbers">Numbers</option>
<option value="Colours">Colours</option>
</select></label>
<input type="submit" id="submitbutton" value="Go" />
</fieldset>
<br />
</form>
<?php
$topic = $_GET['topic'];
$topic_choice = htmlspecialchars($topic, ENT_QUOTES);
?>
</div>
<head>
<title></title>
<link rel="alternate stylesheet" type="text/css" title="red"
href="gameplay.css">
<link rel="stylesheet" type="text/css" title="blue"
href="theme1.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
href="theme2.css">
<script src="js/stylesheets.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/javascript.js" type="text/javascript"></script>
<script>
var items = [
<?php
$con = mysql_connect("localhost","admin","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("learning_game", $con);
$result = mysql_query("SELECT * FROM data WHERE category LIKE '$topic_choice' ");
$first = true;
while ($row = mysql_fetch_array($result)) {
if (!$first) {
echo ",";
}
$first = false;
echo "{name:'" . $row['word'] . "',image:'" . $row['image'] . "',video:'" . $row['video'] . "',audio:'" . $row['audio'] . "'}";
}
mysql_close($con);
?>
];
for (var i = 0; i < items.length; i += 1) {
//document.getElementsByTagName('div')[0].innerHTML += items[i].name + " / " + items[i].image + "<br />\n";
}
document.write("<br /> <br /> <br />");
console.log(items);
top.items = items;
var images = new Array();
var list = document.getElementsByTagName('div')[0];
var names = new Array()
var videos= new Array()
var audios= new Array()
for(i = 0; i < 3; i++) {
// Choose a random item and removes it from the array
var item = items.splice(Math.floor(Math.random() * items.length), 1)[0];
// Create the image element and set its src attribute
images[i] = document.createElement('img');
images[i].src = item.image;
videos[i] = document.createElement('video');
videos[i].src = item.video;
//video.controls = true;
audios[i] = document.createElement('audio');
audios[i].src = item.audio;
//audio.controls = true;
// var audio = new Audio(video);
// Add it to your container element
images.src = item.image;
videos.src = item.video;
audios.src = item.audio;
names[i] = item.name;
}
var randomIndex = Math.floor(Math.random() * 3);
var name_to_display = names[randomIndex];
var image_to_display = images[randomIndex];
var video_to_display = videos[randomIndex];
var audio_to_display = audios[randomIndex];
var data = new Array();
document.getElementById("one").appendChild(images[0]);
document.getElementById("two").appendChild(images[1]);
document.getElementById("three").appendChild(images[2]);
document.body.appendChild(audio[0]);
document.getElementById("whitebox").appendChild(video[1]);
document.getElementById("whitebox").appendChild(video[2]);
/*document.getElementById("one").appendChild(data.image[0]);
document.getElementById("two").appendChild(data.image[1]);
document.getElementById("three").appendChild(data.image[2]);
*/
</script>
</head>
<body onload="set_style_from_cookie()">
<div id="container">
<div id="header">
<br />
<img id="mabon" src="mabon.png"/>
</div>
<div id="radio">
<input class="centerradio" type="checkbox" name="theme" onclick="switch_style('red');return false;" value="Main">Mabon A Mabli
<input id="top_radio_button" class="centerradio" type="checkbox" name="theme" onclick="switch_style('blue');return false;" value="Blue Theme">Pastel <br>
<input class="centerradio" type="checkbox" name="theme" onclick="switch_style('pink');return false;" value="Pink Theme">Plain<br />
</div>
<div id="change_cat">
<div id="random">
<div class="wrapper">
<div id="one" class="item"></div>
<div id="two" class="item"></div>
<div id="three" class="item"></div>
</div>
<div id="wordwrapper">
<div id="worddiv">
<p id="wordtext"><script>document.write('-- '+name_to_display+' --');</script></p>
</div>
</div>
<div id="videocorner">
Video Corner
</div>
<div id="videodiv">
<video width="300" height="230" controls>
<source src="bbc_three.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div id="linkdiv">
<a href="#" id="link" class="myButton">Makaton</a>
</div>
<div id="sounddiv">
<!--
<audio autoplay="3" controls>
<source src="hover.wav" type="audio/wav">
<source src="hover.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
-->
</div>
<img src="cartoon.png" id="help" height="200px">
</div>
<div id="whitebox">
<script>
</script>
</div>
<div id="disp">
<script>
var audio = document.createElement('audio');
audio.src = audio_to_display.src;
//audio.src = item.audio;
audio.controls = true;
document.getElementById("disp").appendChild(audio);
</script>
<script>
document.getElementById("one").appendChild(images[0]);
document.getElementById("two").appendChild(images[1]);
document.getElementById("three").appendChild(images[2]);
var video = document.createElement('video');
video.src = video_to_display.src;
//video.src = item.video;
video.controls = true;
document.getElementById("disp").appendChild(video);
</script>
</div>
</body>
</html>
选择类别
类别：
全部的
动物
数字
颜色
可变项目=[
基本上，你需要三件事：
每个图像上的alt标记，用于标识图像的内容
正确答案的id，对应于其中一个图像的alt标记
每个图像上的单击功能将图像Id与正确答案进行比较，如果正确，则显示警报
比如说：
// Create the image element and set its src attribute
images[i] = document.createElement('img');
images[i].src = item.image;
images[i].alt = item.name;
images[i].onclick = function(e) {
if (e.target.alt == name_to_display)
{
alert('good job!');
}
};
<img alt="Brown Dog" src="/images/browndog.jpg" />
这将创建一个图像标记，其外观如下所示：
// Create the image element and set its src attribute
images[i] = document.createElement('img');
images[i].src = item.image;
images[i].alt = item.name;
images[i].onclick = function(e) {
if (e.target.alt == name_to_display)
{
alert('good job!');
}
};
<img alt="Brown Dog" src="/images/browndog.jpg" />
当点击时，会将其alt标记的值与保存的名称_to _显示进行比较（我假设您打算保存正确答案的值），如果相同，则显示警报。如果名称显示在正确的范围内，则此操作应该有效。谢谢您的回复！onclick调用的是什么？因为我尝试过此操作，但在单击任何图像时都无效？谢谢，并确认屏幕上显示的是名称显示。很抱歉，我对所有这些都不熟悉，所以任何elp将不胜感激。onclick是一个附加到映像的事件处理程序。当用户单击映像时，函数应该执行。我上面给出的示例只是：一个示例。我没有测试它。请尝试删除函数中的if语句：images[I]。onclick=function（e）{alert（'good job！'}；您现在应该会在单击的任何图像上看到警报函数（e）上的“e”是默认情况下传递到此函数的事件对象。您可以console.log（e）查看其中的内容，但基本上它包含一个对象，其中包含一组有关单击内容的dom信息。好的，编辑我的示例并对其进行测试。如果名称显示在范围内，它将起作用。熟悉错误控制台——在学习和调试javascript错误时，它是您最好的朋友。