By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,991 Members | 1,887 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,991 IT Pros & Developers. It's quick & easy.

Rankdom placement for a button with time

P: 1
hello everyone,

i made a small click game, but i want the button the spawn at random places within the page, like every 1000ms, it changes from position.(The button called "Klik Hier!") can someone help? this is the code i have now. (yes, its a mess, but i am learning, and try to get it work for school)(id ect. are written in dutch)

(get the background img here: http://prnt.sc/agzh7p)

HTML--------------------

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <script src="Script.js"></script>
  7.         <link href="StyleSheet.css" rel="stylesheet" type="text/css">
  8.         <title></title>
  9.  
  10.     </head>
  11.     <body>
  12.         <!--knop aanmaken-->
  13.         <input id="start" type="button" name="answer" value="Start de Game!" onclick="showButton(); setTimeout(hideButton, 5000);"/>
  14.         <!--2e knop aanmaken-->
  15.         <button type="button" id="klikken" onclick="onClick()">Klik Hier!</button>
  16.         <p class="kleur">Clicks: <a id="clicks">0</a></p>
  17.         <!--tabel aanmaken voor scorelijst-->
  18.         <table class="kleur1" border="1">
  19.             <tr>
  20.                 <th>Positie:</th>
  21.                 <th>Score:</th>
  22.             </tr>
  23.             <tr>
  24.                 <td>1</td>
  25.                 <td id="pos1"></td>
  26.             </tr>
  27.             <tr>
  28.                 <td>2</td>
  29.                 <td id="pos2"></td>
  30.             </tr>
  31.             <tr>
  32.                 <td>3</td>
  33.                 <td id="pos3"></td>
  34.             </tr>
  35.         </table>
  36.         <!-- antwoorden hier laten verschijnen, positie-->
  37.         <div id="positie"></div>
  38.     </body>
  39. </html>
  40.  
  41.  
  42.  
  43. CSS--------------------
  44. #klikken
  45. {
  46.     visibility: hidden;
  47. }
  48.  
  49. #start
  50. {
  51.     color: black;
  52.     padding: 20px;
  53.     background-color: #FFA500;
  54.     position: absolute;
  55.     left: 50%;
  56.     transform: translate(-50%,-50%);
  57.     top: 40px;
  58. }
  59.  
  60.  
  61. #start:hover
  62. {
  63.     color: #FFA500;
  64.     background-color: black;
  65. }
  66.  
  67. #klikken
  68. {
  69.     color: black;
  70.     padding: 20px;
  71.     background-color: #FFA500;
  72.     position: absolute;
  73.     left: 50%;
  74.     transform: translate(-50%,-50%);
  75.     top: 200px;
  76.     float: left;
  77. }
  78.  
  79.  
  80. #klikken:hover
  81. {
  82.     color: #FFA500;
  83.     background-color: black;
  84. }
  85.  
  86. #positie
  87. {
  88.     position: absolute;
  89.     top: 100px;
  90.     left: 50%;
  91.     transform: translate(-50%,-50%);
  92.     font-family: 'Copperplate Gothic';
  93.     font-size: 50px;
  94.     color: #FFA500;
  95. }
  96.  
  97. body
  98. {
  99.     background-image: url('foto.jpeg');
  100.     background-size: 100%;
  101. }
  102.  
  103. .kleur
  104. {
  105.     color: #FFA500;
  106.     font-family: 'Copperplate Gothic';
  107.     font-size: 50px;
  108. }
  109.  
  110. .kleur1
  111. {
  112.     color: #FFA500;
  113.     font-family: 'Copperplate Gothic';
  114.     font-size: 20px;
  115. }
  116.  
  117. p
  118. {
  119.     position: absolute;
  120.     transform: translate(-50%,-50%);
  121.     left: 50%;
  122.     top: 85%
  123. }
  124.  
  125. Javascript--------------------
  126. //variable aanmaken
  127. var clicks = 0;
  128. var scores = [0, 0, 0];
  129.  
  130. //functie voor het toestaan om te klikken op start
  131. function disableB() { document.getElementById('start').disabled = true; }
  132. //functie voor het niet toestaan om te klikken op start
  133. function enableB() { document.getElementById('start').disabled = false; }
  134.  
  135. // instellingen button laten zien
  136. function showButton()
  137. {
  138.     disableB();
  139.     document.getElementById('klikken').style.visibility = 'visible';
  140.     setTimeout(scoreList, 5000);
  141.     clicks = 0;
  142.     document.getElementById('clicks').innerHTML = 0;
  143.     document.getElementById('positie').innerHTML = '';
  144. }
  145.  
  146. //functie button laten werken bij het klikken
  147. function onClick() {
  148.     clicks += 1;
  149.     document.getElementById("clicks").innerHTML = clicks;
  150.  
  151. };
  152.  
  153. //functie om de button te laten verschijnen.
  154. function hideButton()
  155. {
  156.     enableB();
  157.     document.getElementById('klikken').style.visibility = 'hidden';
  158. }
  159.  
  160. // het wegschrijven van de scores uit de arrays in de table
  161. function scoreUpdate() {
  162.         document.getElementById('pos1').innerHTML = scores[0];
  163.         document.getElementById('pos2').innerHTML = scores[1];
  164.         document.getElementById('pos3').innerHTML = scores[2];
  165. }
  166.  
  167.  
  168. // de scores die in de arrays worden gezet
  169. function scoreList() {
  170.     if (clicks > scores[0]) {
  171.         scores[2] = scores[1];
  172.         scores[1] = scores[0];
  173.         scores[0] = clicks;
  174.         scoreUpdate();
  175.         document.getElementById('positie').innerHTML = "Je staat 1e!";
  176.  
  177.     }
  178.     else if (clicks <= scores[0] && clicks >= scores[1]) {
  179.         scores[2] = scores[1];
  180.         scores[1] = clicks;
  181.         scoreUpdate();
  182.         document.getElementById('positie').innerHTML = "Je staat 2e!";
  183.     }
  184.     else if (clicks <= scores[1] && clicks >= scores[2]) {
  185.         scores[2] = clicks;
  186.         scoreUpdate();
  187.         document.getElementById('positie').innerHTML = "Je staat 3e!";
  188.     }
  189.     else
  190.     {
  191.         document.getElementById('positie').innerHTML = "Top 3 Niet Behaald!";
  192.     }
  193. }
Mar 18 '16 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.