CODEWITHSUNDEEP
javascripthtmlcssweb
Sean Theisen
Sean Theisen

Reputation: 85

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

$(document).ready(function() {
  $(document).click(function(ev) {
    $("body").append(
      $('<div></div>').css({
        position: 'absolute',
        top: ev.pageY + 'px',
        left: ev.pageX + 'px',
        width: '10px',
        height: '10px',
        background: '#000000'
      })
    );
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Views: 99

Answers (1)

messerbill
messerbill

Reputation: 5629

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)
 }

html:

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

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

this is working: https://jsfiddle.net/vbnmdkn6/1/ . Btw this is a really nice idea - will this go online once finished?

Upvotes: 1

Related Questions