试图使用数组和对象在JavaScript中创建字典
[英]Trying to make dictionary in JavaScript using array and objects
问题描述
Today I was trying to make Trying to make dictionary in JavaScript using array and objects 
今天，我尝试制作尝试使用数组和对象的JavaScript制作字典
I am trying to make search here using prompt 我正在尝试使用提示在这里进行搜索
<html> <body style="font-size: 40px"> <input type="text" id="myin"> <button id="btn">Search</button> <div id="outputArea"></div> <script> var outputAreaRef = document.getElementById("outputArea"); var output = ""; var word = prompt("Enter something: "); var acronyms = [{ acronym: "omg", meaning: "Oh MY God" }, { acronym: "lol", meaning: "Laugh Out Loud" }, { acronym: "lmao", meaning: "Laughing My Age Off" }, { acronym: "wtf", meaning: "What This Function" } ]; for (var i = 0; i < acronyms.length; i++) { if (acronyms[i].acronym === word) { word = acronyms[i].meaning; outputAreaRef.innerHTML = word; } } </script> </body> </html>
But when trying to use an input element with onclick button function rather than the prompt it does not work at all 但是，当尝试使用具有onclick按钮功能而不是提示的输入元素时，它根本不起作用
here is the code with input and button 这是带有输入和按钮的代码
<html> <body style="font-size: 40px"> <input type="text" id="myin"> <button id="btn">Search</button> <div id="outputArea"></div> <script> var outputAreaRef = document.getElementById("outputArea"); var output = ""; var word = document.getElementById("myin"); var acronyms = [{ acronym: "omg", meaning: "Oh MY God" }, { acronym: "lol", meaning: "Laugh Out Loud" }, { acronym: "lmao", meaning: "Laughing My Age Off" }, { acronym: "wtf", meaning: "What This Function" } ]; for (var i = 0; i < acronyms.length; i++) { if (acronyms[i].acronym === word) { word = acronyms[i].meaning; document.getElementById('btn').onclick = function() { outputAreaRef.innerHTML = word; } } } </script> </body> </html>
Please help where is the wrong 请帮助哪里错了
Sorry for my bad ENGLISH, 对不起，我的英语不好，
2 个解决方案
解决方案1
1 2018-08-27 14:45:50
Your code executes right away and the word will not be set yet. 您的代码立即执行，并且该单词尚未设置。 Hence nothing happens. 因此什么也没发生。 You have to move all the lookup logic (getting the current input and checking the dictionary) into the onclick callback. 您必须将所有查找逻辑（获取当前输入并检查字典）移至onclick回调中。
解决方案2
0 2018-08-27 14:47:34
You need to get the value of the input using document.getElementById("myin").value .Secondly create a function & attach it with the click handler of the button. 您需要使用document.getElementById("myin").value获取输入的document.getElementById("myin").value 。其次，创建一个function并将其附加到按钮的单击处理程序。
Inside this event handler get the value of the input ,retrieving the value outside the click handler wont work. 在此事件处理程序内获取input的值，在单击处理程序外检索该值将无法工作。
var outputAreaRef = document.getElementById("outputArea"); var output = ""; var acronyms = [{ acronym: "omg", meaning: "Oh MY God" }, { acronym: "lol", meaning: "Laugh Out Loud" }, { acronym: "lmao", meaning: "Laughing My Age Off" }, { acronym: "wtf", meaning: "What This Function" } ]; //Attach event listener to the button document.getElementById('btn').addEventListener('click', searchWord) function searchWord() { // need to get the value of the input var word = document.getElementById("myin").value; // if matches then show the value for (var i = 0; i < acronyms.length; i++) { // to lowerCase to make it case insensitive & trim to remove white space if (acronyms[i].acronym === word.toLowerCase().trim()) { outputAreaRef.innerHTML = acronyms[i].meaning; } } }
body { font-size: 40px; }
<input type="text" id="myin"> <button id="btn">Search</button> <div id="outputArea"></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.