JavaScript映射:如何找到键、获取其值并在HTML中显示？

发表时间：2022-07-30 00:31:16 阅读：197

这里是初学者.

我想写一个简单的程序，当我在HTML文本框中键入时，用数字代替字母.(这是一个开发程序，用于准备使用Unicode在字母之间进行音译.)

我的计划是将数字映射到JavaScript映射中的字母，然后使用键盘事件触发一个函数来检索数字.已经苦苦挣扎了一周(全职)寻找合适的语法.

最近尝试: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));
*/

每次我在运行http服务器时按"a"、"b"、"c"键，屏幕上显示的都是字母，而不是数字.

我试过(除其他外):在函数中使用"for"设置循环，并使用map.forEach()设置"if"语句.我也尝试了许多表达输出语句的方法.什么都没起作用.很明显，我错过了一些基本的东西.它应该是直截了当的，但事实并非如此.

🎖️ 优质答案

Im使用javascript对象存储数据.以及通过事件处理程序捕获事件，您只需要使用函数名，而不需要传递参数.然后我简单地用textareas值中对象的数字ID替换键.

&lt!-开始代码段:js hide:false控制台:true babel:false--&gt

&lt!-语言:lang js--&gt

// 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);

&lt!-语言:lang html--&gt

    <textarea id="typespace" autofocus type="text"></textarea>

&lt!-结束代码段--&gt

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

如果你想在你可以发明的其他角色中转换，那么它应该改变ascii数学

&lt!-开始代码段:js hide:false控制台:true babel:false--&gt

&lt!-语言:lang html--&gt

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

&lt!-结束代码段--&gt

you can do something like this

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

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

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

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 ([
  [&#39;a&#39;, &#39;1&#39;],
  [&#39;b&#39;, &#39;2&#39;],
  [&#39;c&#39;, &#39;3&#39;]
]);

// Change letter to number
document.querySelector( &#39;#typespace&#39; ).addEventListener( &#39;keyup&#39;, ( 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>