Databases
StackOverflow2013
Postsdbo
POHow to trigger a certain event in Javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to trigger a certain event in Javascript
    text
    copied!<p>First of all sorry for the bad question, I don't know how to write it well in one sentence.</p> <p>Here is my scenario, I am making a game where 3 pictures are displayed on screen and along with a word. These pictures and words have come from a database.</p> <p>Data is entered into the database so for every word time a word is entered a picture is also uploaded with it.</p> <p>All these sets of words and images are pulled from a database and put into a JavaScript array. I have then randomly chosen 3 images from an array and placed them in another array and then at random picked one word from the second array. </p> <p>My question is how do you make the word I have chosen link with the correct image and then when the correct picture is clicked by the user something happens like "Well Done" comes on screen?</p> <p>here is my array layout : -</p> <pre><code> 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'} ]; </code></pre> <p>Here is my full code:-</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;div id="choosecat"&gt; &lt;form method="get" action="playgame.php" autocomplete="off"&gt; &lt;fieldset&gt; &lt;legend&gt;Choose Category&lt;/legend&gt; &lt;label&gt;Category: &lt;select name="topic"&gt; &lt;option value="%"&gt;All&lt;/option&gt; &lt;option value="Animals"&gt;Animals&lt;/option&gt; &lt;option value="Numbers"&gt;Numbers&lt;/option&gt; &lt;option value="Colours"&gt;Colours&lt;/option&gt; &lt;/select&gt;&lt;/label&gt; &lt;input type="submit" id="submitbutton" value="Go" /&gt; &lt;/fieldset&gt; &lt;br /&gt; &lt;/form&gt; &lt;?php $topic = $_GET['topic']; $topic_choice = htmlspecialchars($topic, ENT_QUOTES); ?&gt; &lt;/div&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="alternate stylesheet" type="text/css" title="red" href="gameplay.css"&gt; &lt;link rel="stylesheet" type="text/css" title="blue" href="theme1.css"&gt; &lt;link rel="alternate stylesheet" type="text/css" title="pink" href="theme2.css"&gt; &lt;script src="js/stylesheets.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/jquery.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/javascript.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script&gt; var items = [ &lt;?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); ?&gt; ]; for (var i = 0; i &lt; items.length; i += 1) { //document.getElementsByTagName('div')[0].innerHTML += items[i].name + " / " + items[i].image + "&lt;br /&gt;\n"; } document.write("&lt;br /&gt; &lt;br /&gt; &lt;br /&gt;"); 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 &lt; 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]); */ &lt;/script&gt; &lt;/head&gt; &lt;body onload="set_style_from_cookie()"&gt; &lt;div id="container"&gt; &lt;div id="header"&gt; &lt;br /&gt; &lt;img id="mabon" src="mabon.png"/&gt; &lt;/div&gt; &lt;div id="radio"&gt; &lt;input class="centerradio" type="checkbox" name="theme" onclick="switch_style('red');return false;" value="Main"&gt;Mabon A Mabli &lt;input id="top_radio_button" class="centerradio" type="checkbox" name="theme" onclick="switch_style('blue');return false;" value="Blue Theme"&gt;Pastel &lt;br&gt; &lt;input class="centerradio" type="checkbox" name="theme" onclick="switch_style('pink');return false;" value="Pink Theme"&gt;Plain&lt;br /&gt; &lt;/div&gt; &lt;div id="change_cat"&gt; &lt;div id="random"&gt; &lt;div class="wrapper"&gt; &lt;div id="one" class="item"&gt;&lt;/div&gt; &lt;div id="two" class="item"&gt;&lt;/div&gt; &lt;div id="three" class="item"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="wordwrapper"&gt; &lt;div id="worddiv"&gt; &lt;p id="wordtext"&gt;&lt;script&gt;document.write('-- '+name_to_display+' --');&lt;/script&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="videocorner"&gt; Video Corner &lt;/div&gt; &lt;div id="videodiv"&gt; &lt;video width="300" height="230" controls&gt; &lt;source src="bbc_three.mp4" type="video/mp4"&gt; &lt;source src="movie.ogg" type="video/ogg"&gt; Your browser does not support the video tag. &lt;/video&gt; &lt;/div&gt; &lt;div id="linkdiv"&gt; &lt;a href="#" id="link" class="myButton"&gt;Makaton&lt;/a&gt; &lt;/div&gt; &lt;div id="sounddiv"&gt; &lt;!-- &lt;audio autoplay="3" controls&gt; &lt;source src="hover.wav" type="audio/wav"&gt; &lt;source src="hover.mp3" type="audio/mpeg"&gt; Your browser does not support the audio element. &lt;/audio&gt; --&gt; &lt;/div&gt; &lt;img src="cartoon.png" id="help" height="200px"&gt; &lt;/div&gt; &lt;div id="whitebox"&gt; &lt;script&gt; &lt;/script&gt; &lt;/div&gt; &lt;div id="disp"&gt; &lt;script&gt; var audio = document.createElement('audio'); audio.src = audio_to_display.src; //audio.src = item.audio; audio.controls = true; document.getElementById("disp").appendChild(audio); &lt;/script&gt; &lt;script&gt; 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); &lt;/script&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Sorry for the quality of the code, I am new to Javascript and Web Development.</p> <p>Thank You in advance for any replies.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload