How to take the users keyboard input and display it on the screen where they type


I want to have it so the user can click on an image, and where he clicked, type something, and that text will stay there. I currently have it where I can display an black box, but I need it so the user can type info next to the box.
I want to make an interactive map for my dad where he can click and display where he caught a certain type of fish

<body background="">
<script src=""></script>
$(document).ready(function() {
      $(document).click(function(ev) {
            position: 'absolute',
            top: ev.pageY + 'px',
            left: ev.pageX + 'px',
            width: '10px',
            height: '10px',
            background: '#000000'


is your positioning logic working?



so far your positioning logic is already working, i’d recommend to create an array with all known fish types. Once you have selected a fish you can click on the map to mark the position.

function handleClick(x, y) {
   var myFish = $('#myDropdown option:selected').text();

   var fishElement = $('#map').append("<p style='position: absolute; top: "+y+"px; left: "+x+"px;'>"+myFish+"</p>");


 $(document).click(function(ev) {
   handleClick(ev.pageX, ev.pageY)


<select id="myDropdown">
  <option key="1" value="Shark"></option>

<div id="map" style="position: relative;"></div>

this should work, but not tested yet. Btw this is a really nice idea – will this go online once finished?


This was for my dad for christmas, but if i like the idea enough, i just might do that
– Sean Theisen
2 hours ago
Also this does not work
– Sean Theisen
1 hour ago
this is just an example….note that for example the map div has no width or height at my example. If you provided a jsfiddle demo i could have a look at your code
i cant get js fiddle to work,
– Sean Theisen
50 mins ago
so publish the broken one – i will have a look