theflash51 Posted December 2, 2007 Share Posted December 2, 2007 Hi There, I know next to nothing about PHP and Javascript but I have been plugging away at this bit of code for a while now and I have it working, but I want to change the functionality a bit I was hoping someone here could help be figure that out. let me post the code first then I'll explain it and tell you what I'd like to change: <HTML> <HEAD> <title>200,000 to 1</title> <script language=javascript> <!-- function get_mouse_coord(ev) { var e = ev ? ev:window.event; var s = e.clientX + ',' + e.clientY; document.forms.myForm.guess_x.value = e.clientX document.forms.myForm.guess_y.value = e.clientY } //--> </script> </HEAD> <body> <?php if (!$_POST['submit']) { ?> <img STYLE="position:absolute; TOP:0px; LEFT:0px; CLEAR:left; FLOAT:left;" src="picture.gif" onclick="get_mouse_coord(event)"; name="picture"> <form STYLE="position:absolute; TOP:410px; LEFT:25px;" name="myForm" action="compare2.php" method="post"> <input type="text" name="guess_x"> <input type="text" name="guess_y"> <input type="submit" value="submit" name="submit" > </form> <?php } else { $inputx = $_POST['guess_x']; $inputy = $_POST['guess_y']; if (($inputx == null) || ($inputy == null)) { $message = 'You must pick your co-ordniates first, go to <a href="compare2.php">this page</a> to start'; } elseif (($inputx == '123') && ($inputy == '123')) { $message = 'Congratulations, you have found the right pixel'; } else { $message = 'Sorry, your guess wasn\'t correct. <a href="compare2.php">Try Again!</a>'; } echo "$message"; } ?> </body> </HTML> The code is simple enough, I have a 400 x 400 pixel picture, click anywhere on the picture and the co-ords of your mouse click are sent to two text boxes. Click the submit button and the co-ords are compared to the "correct" co-ords. If it's a match you get a congrats message, if it's not a match you get the try again message. it all works but it's not very user friendly. I'd like for the user to be able to have more than one guess before they have to click the submit button, I was thinking of having 10 sets of text boxes and each click the user makes fills the next set of co-ord boxes with their guess. Then clicking the submit button would compare them all at once. I can't seem to get my head around how to do that. Also, ideally I'd like to have a real-time depiction of the mouse co-ords in another box, I tried using onmousemotion but I couldn't get that to work either. It would be a great help to me if someone could guide me through this, Thanks in advance. Quote Link to comment Share on other sites More sharing options...
kratsg Posted December 2, 2007 Share Posted December 2, 2007 Just have a variable set to 0.. <script type='text/javascript'> var num_clicks; num_clicks = 0;//global, only goes back to zero when page is refreshed function get_mouse_coord(ev) { var e = ev ? ev:window.event; var s = e.clientX + ',' + e.clientY; var x = document.getElementsByTag('text_x'); var y = document.getElementsByTag('text_y'); document.forms.myForm.x[num_click].value = e.clientX document.forms.myForm.y[num_click].value = e.clientY num_clicks++; } </script> What I did was two things, first I created an array of all textboxes on the page (one for "x" and one for "y") that have this format: <input type="text_x"> <input type="text_y"> Because HTML sets an input type as "text" to default, these will show up as text-boxes. Then, I will go down the list in each array with num_clicks and change that corresponding text-box as we go (and increment the num_clicks variable by 1). See if this makes sense for you. Quote Link to comment Share on other sites More sharing options...
theflash51 Posted December 2, 2007 Author Share Posted December 2, 2007 Thanks for the help although I don't know enough about arrays to make that work with just what you've given me. What you've said makes sense to me, I just don't know how to implement it. I lack the syntax knowledge Quote Link to comment Share on other sites More sharing options...
kratsg Posted December 2, 2007 Share Posted December 2, 2007 Well, you basically take all those textboxes and define it as an array.. So the '0th' textbox text_x[0] will be the first "type="text_x" on the page. And so on. Quote Link to comment Share on other sites More sharing options...
theflash51 Posted December 2, 2007 Author Share Posted December 2, 2007 I'm having trouble figuring out what you are telling me to do, remember I'm a complete newbie here, I think I need it spelled out for me. Quote Link to comment Share on other sites More sharing options...
theflash51 Posted December 3, 2007 Author Share Posted December 3, 2007 Can anyone elaborate a little on what kratsg has said here? I need it dumbed down some more Quote Link to comment Share on other sites More sharing options...
kratsg Posted December 4, 2007 Share Posted December 4, 2007 Which part? (quote it for me) Quote Link to comment Share on other sites More sharing options...
theflash51 Posted December 4, 2007 Author Share Posted December 4, 2007 This part I do not understand how to do... What I did was two things, first I created an array of all textboxes on the page (one for "x" and one for "y") that have this format: Code: <input type="text_x"> <input type="text_y"> Because HTML sets an input type as "text" to default, these will show up as text-boxes. Then, I will go down the list in each array with num_clicks and change that corresponding text-box as we go (and increment the num_clicks variable by 1). See if this makes sense for you. Even with your additional explanation here.. Well, you basically take all those textboxes and define it as an array.. So the '0th' textbox text_x[0] will be the first "type="text_x" on the page. And so on. I have tried to lay it out the way you explained but I really have no clue what to do. Quote Link to comment Share on other sites More sharing options...
kratsg Posted December 4, 2007 Share Posted December 4, 2007 If you do something like this for your html... #1: <input type="text_x"> <input type="text_y"> <br><br> #2: <input type="text_x"> <input type="text_y"> Then for the array: var x = document.getElementsByTag('text_x'); var y = document.getElementsByTag('text_y'); Then the array elements of the 0th index, 1st index, to the nth index contains all the textboxes on the page. x[0] and y[0] are the first two textboxes for text_x and text_y x[1] and y[1] are the next two textboxes for text_x and text_y Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.