Question

嗨！

我正在执行Brian P. Hogan所著的“程序员的练习：开发编码技能的57个挑战”一书中的第一个练习，这需要一些DOM操作。

在这种情况下，我有一个表单，我想在js文件中获取并声明表单，表单的输入和div。我通常会这样做：

const myForm = document.getElementById('myForm');
const noun = document.getElementById('noun');
const verb = document.getElementById('verb');
const adverb = document.getElementById('adverb');
const result = document.getElementById('result');

但是我想做一个与此类似的函数：

function getDomElementById(element) {
  const element = document.getElementById(`${element}`);
}

，然后在Chrome中出现错误：

未捕获的SyntaxError：标识符'element'已经被声明

此函数应通过其id获取元素并声明它。

你知道我该怎么做吗？

谢谢！

Answer 1

function getDomElementById(element) {
  const element = document.getElementById(`${element}`);
}

您在这里重新声明了名为element的变量。
const element是错误的。
请重命名此变量。

Answer 2

为什么不使用对象作为元素，例如

const elements = {
    myForm: document.getElementById('myForm'),
    noun: document.getElementById('noun'),
    // ...
}

或者采用具有ID数组和以ID为键的对象的动态方法。

Answer 3

您不能创建这样的变量，但是可以使用对象

let obj = {};

const getDomElementById = (element) => {
  obj = {
    ...obj,
    [element]: document.getElementById(`${element}`),
  }
}

如何使用：getDomElementById（'myForm'）;

通过

获取DOM

obj.myForm

Answer 4

如果您想编写更少的代码，请为该函数命名更短，并使其返回选择：

const getEl = function( id ) {
  return document.getElementById( `${ id }` );
};
const myForm = getEl('myForm');
const noun = getEl('noun');
const verb = getEl('verb');

将函数分配给外部变量的问题是：

1）代码不短于直接使用document.getElementById()的原始代码。而且，您必须使用对象来使用类似'myForm'的字符串来引用元素。因此，最终您将不得不在任何要使用它的地方使用values.myForm。

const values = {
  myForm: null,
  noun: null,
  verb: null
};
function getDomElementById( id ) {
  values[ id ] = document.getElementById(`${ id }`);
}
getDomElementById( 'myForm' );
getDomElementById( 'noun' );
getDomElementById( 'verb' );

2）在外部具有函数覆盖值可能会导致令人讨厌的错误，您需要在其中寻找哪个函数在什么时候覆盖了变量。

3）很快您将了解.querySelectorAll()，它与.getElementById()类似，但也允许使用类和复杂的CSS选择器。如果您仍在使用函数，则必须添加另一个参数来表示名称：

const values = {
  myForm: null,
  noun: null,
  verb: null
};
function getDomElements( name, selector ) {
  value[ name ] = document.querySelectorAll(`${ selector }`);
}
getDomElements( 'myForm', 'section.validation-form > .myForm' );
getDomElements( 'noun', 'section.validation-form > .noun' );
getDomElements( 'verb', 'section.validation-form > #verb.active' );

到达上面的代码点后，我又回到了开头并完全删除了该功能，因为我只是在延长代码的长度和不易阅读的程度，几乎没有其他优点。

const myForm = document.querySelector( 'section.validation-form > .myForm' );
const noun = document.querySelector( 'section.validation-form > .noun' );
const verb = document.querySelector( 'section.validation-form > #verb.active' );

如何制作一个声明变量的函数？（JS）

4 个答案:

如何制作一个声明变量的函数？ （JS）

4 个答案:

如何制作一个声明变量的函数？（JS）