javascript - 尝试使用数组和对象在 JavaScript 中创建字典

标签 javascript search

今天我尝试使用数组和对象在 JavaScript 中制作字典

我正在尝试使用提示在这里进行搜索

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

但是当尝试使用具有 onclick 按钮功能而不是提示的输入元素时,它根本不起作用

这是带有输入和按钮的代码

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

请帮忙看看哪里错了

抱歉我的英语不好,

最佳答案

您的代码会立即执行,并且该单词尚未设置。因此什么也没有发生。 您必须将所有查找逻辑(获取当前输入并检查字典)移至 onclick 回调中。

关于javascript - 尝试使用数组和对象在 JavaScript 中创建字典,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52041717/

相关文章:

mysql - 有关如何使用 CASE 按与大多数单词的最佳匹配进行排序的 SQL 语法

php - 使用 PHP 在 mysql 中搜索存储有多个名称并用 ** 连接的项目

php - 使用文本框和两个下拉菜单在 PHP 页面上搜索和过滤 MySql 结果

c - 查找是否存在任何 i 以便 array[i] 等于 i 的算法

javascript - 在浏览器关闭时调用页面方法

javascript - 如何让我的 TreeView 元素溢出超过父 div 的宽度?

javascript - Vue.js 无法在 :style (twig template) 中设置背景图像

javascript - Discord JS 禁止所有事件禁止成员但不返回错误

javascript - 如何在不刷新页面的情况下更新 session 存储数据?

javascript - 基于个人资料的用户兴趣搜索