JavaScript Map: How to find a key, get its value, and display it in HTML?-CodePudding

Beginner here.

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. Clearly I'm missing something fundamental. It ought to be straightforward but it's not.

CodePudding user response：

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>

CodePudding user response：

**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>

CodePudding user response：

you can do something like this

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

// Change letter to number
function subst() {
  const newString = event.target.value.split('').map(l => map.get(l) || l).join('')
  event.target.value = newString;  
}

<textarea id="typespace" autofocus type="text" onKeyUp="subst()"></textarea>

CodePudding user response：

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>