JavaScript Map：如何找到密钥，获取其值，并在 HTML 中显示？
[英]JavaScript Map: How to find a key, get its value, and display it in HTML?
问题描述
Beginner here.
初学者在这里。
I want to write a simple program to substitute numbers for letters as I type in an HTML textbox.当我在 HTML 文本框中键入时，我想编写一个简单的程序来用数字代替字母。 (This is a developmental program to prepare for transliterating between alphabets using Unicode.) （这是一个开发程序，用于准备使用 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.我的计划是将 map 数字转换为 JavaScript map 中的字母，然后使用键盘事件触发 ZC1C425268E687A94F14 检索数字。 Been floundering for a week (full-time) looking for syntax that will do it.挣扎了一周（全职）寻找可以做到的语法。
Most recent try: HTML:最近的尝试：HTML：
<!DOCTYPE html>
<html>
<head>
<script src="scripts.js"></script>
</head>
<body>
<textarea id="typespace" autofocus type="text" onkeyup="subst()"></textarea>
</body>
</html>
JavaScript: 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.每次我在运行 http-server 时按“a”、“b”、“c”键，我在屏幕上看到的都是字母，而不是数字。
I've tried (among other things): Setting up a loop in the function using "for" and an "if" statement;我尝试过（除其他外）：使用“for”和“if”语句在 function 中设置循环； using map.forEach().使用 map.forEach()。 Also I've tried numerous ways of expressing the output statement.此外，我尝试了多种表达 output 语句的方法。 Nothing has worked.没有任何效果。 Clearly I'm missing something fundamental.显然我错过了一些基本的东西。 It ought to be straightforward but it's not.它应该是直截了当的，但事实并非如此。
3 个解决方案
解决方案1
0 已采纳 2022-07-29 16:43:34
I'm using a javascript object for storing the data.我正在使用 javascript object 来存储数据。 And capturing the event via an event handler, which you only need to use the function name and not pass parameters.并通过事件处理程序捕获事件，您只需要使用 function 名称而不传递参数。 Then I simply replace the key with the numerical ID from the object in the textarea's value.然后，我只需将密钥替换为文本区域值中 object 中的数字 ID。
// 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>解决方案2
0 2022-07-29 16:45:32
**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如果你想转换成其他你可以发明的角色，假设改变 ascii 数学
<.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>
解决方案3
-1 2022-07-29 16:49:14
A few problems in your code.您的代码中存在一些问题。 First, when you create the map, you are using {} instead of () to instantiate the object.首先，当您创建 map 时，您使用 {} 而不是 () 来实例化 object。 second, it may be best to use a document querySelector() and addEvetListener() to add the keyup event listener.其次，最好使用文档querySelector()和addEvetListener()来添加keyup事件监听器。 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.第三，您需要使用.value而不是innerHTML设置文本框的值，因为它是表单输入而不是您嵌套内部 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.