JavaScript 可以根据用户输入创建新函数吗？

Posted 2023-04-13

【中文标题】JavaScript 可以根据用户输入创建新函数吗？

【英文标题】：can JavaScript create a new function based on user input?

【发布时间】：2015-02-19 14:34:57

【问题描述】：

我在 html 文档中有一个输入框、一个按钮和其他随机元素。我的问题是：javascript 可以使用输入框中的 id 并在单击按钮时隐藏具有该 ID 的元素吗？请告诉我如何执行此操作。我正在制作一个基于某些按钮点击创建元素的程序，因此用户可以在不知道代码的情况下格式化 html。我正在尝试添加动态函数，但我完全不知道该怎么做，因为函数需要足够灵活才能使用其中的输入。

我不能直接插入函数的原因是因为我希望按钮使用专门创建的函数来执行用户想要的操作。

我也不知道 jquery，只知道 HTML JavaScript 和 CSS

【问题讨论】：

是的，可以。你试过什么？

是的，这完全可行。请上传您目前的代码，以便可以根据您当前的实现提出建议

You'll need to show us what you have tried, and where you are exactly stuck。请使用Short, Self-contained, Correct example更新您的帖子

非常简单的 jQuery $('#'+id).hide()

@FlushFish：哦，大声哭泣，也不是直接使用 DOM 很难。我没有反对 jQuery，我只是说......

【参考方案1】：

是的，但您完全走错了路：您不需要创建新函数来响应用户输入来执行此操作。

您只需要在函数中使用用户输入。

function myEventHandler(event) 
    var user_input = document.getElementById('my_text_input').value;
    var user_selected_element = document.getElementById(user_input);
    if (user_selected_element) 
        user_selected_element.style.display = "none";
    


document.getElementById('the_button').addEventListener('click', myEventHandler);

【参考方案2】：

您需要创建一个传递给按钮的单击处理程序的函数。单击按钮时，我们可以获取输入的值并从那里处理它。这是一个有效的fiddle。

function hideById() 
  var id = document.getElementById('id').value;
  document.getElementById(id).style.display = 'none';


document.querySelector("button").addEventListener("click", hideById);