触发 javascript 函数的输入

Question

我在导航栏上做了一堆按钮。这些按钮可以左右触发两种语言的不同文章或课程。

后来，我在尝试搜索特定文章时发现这很麻烦。所以我决定添加一个输入文本栏来接收我的输入并触发我想要的 javascript 函数。

我在这篇文章中简化了数字，但这是脚本的核心。我用 4 位数字将函数命名为 MMDD，所以我希望我可以输入一个框 0312 并执行函数 0312。

但是，我似乎无法让它工作。这在 javascrip 中是否可行？如果不是，你推荐什么方法？

function fr01() {
  document.getElementById("fr01").innerHTML = "text here will appear in french"
}

function en01() {
  document.getElementById("en01").innerHTML = "text here will apear in english"
}

function myFunction01() {
  fr01();
  en01();
}

function myFunction() {
  var x = document.getElementById("myInput").value;

  function 'x'
}

<input type="text" id="myInput" oninput="myFunction()">
<button onclick="myFunction01()">CHAPTER01</button>

顶部工作得非常好并且实时，当我按下相应的按钮时，它会显示两侧，当我尝试输入数字时，我会收到此错误消息

myFunction is not defined at HTMLInputElement.oninput

我不是已经在顶部定义了吗？

感谢您抽出宝贵时间阅读本文。

Answer 1

根据例如文本值动态调用函数，然后您可以创建一个 map 将字符串连接到函数。一个对象与此非常相似。它具有可以是字符串的属性和可以是函数的值。

const actions = {
  'foo': function() {
    // Do something.
  }
};

使用此模式，您可以创建有效选项列表并连接列表附带的相应功能。

现在假设你有一个字符串。使用该字符串，您可以使用括号符号从对象中选择一个函数。

const string = 'foo';
const action = actions[action]; 

如果找到一个值，那么action 现在将是一个函数。否则它将是undefined。

下面的 sn-p 演示了这个原理。

function omg() {
  console.log('omg');
}

function bark() {
  console.log('bark');
}

const actions = {
 '0312': function() { // Regular function.
   console.log('Hello')
 },
 '0420': () => { // Arrow function.
   console.log('Wow')
 },
 '1360': () => console.log('Vroom'), // Arrow function variation.
 '1337': () => { // Arrow function that calls two other functions.
   omg();
   bark();
 },
 '7331': [omg, bark] // Array with function references.
};

const form = document.querySelector('#form');
const actionField = document.querySelector('#action');

form.addEventListener('submit', event => {
  const selector = actionField.value;
  const action = actions[selector];
  
  if (typeof action === 'function') {
    action();
  }
  
  if (Array.isArray(action)) {
    action.forEach(subAction => {
      subAction()
    });
  }
  
  event.preventDefault();
});

<form id="form">
  <label for="action">Try me (0312, 0420, 1360 and 1337 will work)</label>
  <input type="text" id="action" />
  <button type="submit">Execute</button>
</form>