CODEWITHSUNDEEP
javascriptdictionary
prainbow
prainbow

Reputation: 13

How to find a key, get its value, and display it in HTML?

I want to write a simple program to substitute numbers for letters as I type in an HTML textbox. (This is a developmental program to prepare for transliterating between alphabets using Unicode.)

My plan is to map numbers to letters in a JavaScript map, then use keyboard events to trigger a function to retrieve the numbers. Been floundering for a week (full-time) looking for syntax that will do it.

Most recent try: HTML:

<!DOCTYPE html>
<html>
  <head>
    <script src="scripts.js"></script>
  </head>
  <body>
    <textarea id="typespace" autofocus type="text" onkeyup="subst()"></textarea>
  </body>
</html>

JavaScript:

// Create map
const map = new Map {[
  [a, '1'],
  [b, '2'],
  [c, '3']
]};

// Change letter to number
function subst() {
  var input = event.key;          // Say user presses "a" key, "a" gets stored as input
  var output = map.get(input);    // Value mapped to "a" is "1"
  document.getElementById("typespace").innerHTML = output;  // Why "a" in typespace, not "1"?
}

/* Event handler needed?
typespace.addEventListener("keyup", subst(e));
*/

Every time I hit keys "a", "b", "c" while running http-server, all I get on screen is letters, not numbers.

I've tried (among other things): Setting up a loop in the function using "for" and an "if" statement; using map.forEach(). Also I've tried numerous ways of expressing the output statement. Nothing has worked.

Upvotes: 0

Views: 931

Answers (3)

user5781320
user5781320

Reputation: 

**this isn't only limited to an *abc*  this works will all a-z**

it's suppose to change the ascii math if you want to convert in other roles you can invent

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="Custa">
<title></title>
</head>
<body>
<textarea id="typespace" autofocus type="text" onkeyup="subst()"></textarea>
<span id="okpal"></span>
<script>
    

function subst() {
  var input = event.key;          // Say user presses "a" key, "a" gets stored as input
 // console.log(input.charCodeAt(0)-96);
  obj=document.getElementById("okpal");
//  old=obj.innerHTML;
  obj.innerHTML+=(input.charCodeAt(0)-96)+' ';
 // console.log(old);
}

</script>
</body>
</html>

Upvotes: 0

dqhendricks
dqhendricks

Reputation: 19251

A few problems in your code. First, when you create the map, you are using {} instead of () to instantiate the object. second, it may be best to use a document querySelector() and addEvetListener() to add the keyup event listener. third, you'll need to set the value of a textbox with .value, rather than innerHTML, since it is a form input rather than tag where you nest inner HTML. Try this to get you going.

// Create map
const mymap = new Map ([
  ['a', '1'],
  ['b', '2'],
  ['c', '3']
]);

// Change letter to number
document.querySelector( '#typespace' ).addEventListener( 'keyup', ( event ) => {
  var output = mymap.get( event.key );    // Value mapped to "a" is "1"
  event.currentTarget.value = output;  // Why "a" in typespace, not "1"?
} );
<!DOCTYPE html>
<html>
  <head>
    <script src="scripts.js"></script>
  </head>
  <body>
    <textarea id="typespace" autofocus type="text"></textarea>
  </body>
</html>

Upvotes: 0

imvain2
imvain2

Reputation: 15847

I'm using a javascript object for storing the data. And capturing the event via an event handler, which you only need to use the function name and not pass parameters. Then I simply replace the key with the numerical ID from the object in the textarea's value.

// Create map

const map ={
  "a": '1',
  "b": '2',
  "c": '3'
};

// Change letter to number
function subst(event){
  var input = event.key;
  var output = map[input];
  if(output){
    event.target.value = event.target.value.replace(input,output);
  }
}

typespace.addEventListener("keyup", subst);
    <textarea id="typespace" autofocus type="text"></textarea>

Upvotes: 1

Related Questions