Отображение случайных букв как значений атрибутов вместо элементов массива

Question

Итак, я пытаюсь создать окно регистрации с javascript, и мне это удалось, пока я не наткнулся на странную ошибку. Скрипт выводит это в HTML:

<input type="f" name="i" alt="r" placeholder="s"> 

Вместо:

<input type="email" name="regemail" alt="email" placeholder="What's your email?"> 

И то же самое для остальных 2-х входов. Почему это происходит? Я пытался искать какие-либо ошибки, но консоль не дает мне никаких ошибок, и я не могу найти ничего плохого в коде, который я написал. Помощь приветствуется.

var firstInput = ["email", "regemail", "email", "What's your email?"]; 
 
    var secondInput = ["password", "regpassword", "password", "Choose a password"]; 
 
    var thirdInput = ["password", "confirmpassword", "confirmpassword", "Confirm password"]; 
 
    var types = ["type", "name", "alt", "placeholder"]; 
 
    var inputNumber = ["firstInput", "secondInput", "thirdInput"]; 
 
    var container = document.getElementById('usp-container'); 
 

 
    function register() { 
 

 
    var div = document.createElement('div'); 
 
    div.setAttribute('id', "register-popup"); 
 
    container.appendChild(div); 
 
    
 
    var form = document.createElement('form'); 
 
    form.setAttribute('method', "post"); 
 
    form.setAttribute('action', "processregistration.php"); 
 
    div.appendChild(form); 
 
    
 
    
 
     for (i = 0; i < 3; i++) { 
 
      
 
     function makeInputs(inputs) { 
 
      
 
     var tableRow = document.createElement('tr'); 
 
     form.appendChild(tableRow); 
 
     var tableData = document.createElement('td'); 
 
     tableRow.appendChild(tableData); 
 
     var input = document.createElement('input'); 
 
     
 
     for (j = 0; j < 4; j++) { 
 
      
 
      input.setAttribute(types[j], inputs[j]); 
 
     } 
 
      
 
     tableData.appendChild(input); 
 
     
 
     } 
 
      
 
     makeInputs(inputNumber[i]); 
 
    } 
 
    
 
    } 
 

 
    register();

Answer 1

У вас есть имена переменных в массиве

var firstInput = ["email", "regemail", "email", "What's your email?"]; 

var inputNumber = ["firstInput", "secondInput", "thirdInput"]; 

Тогда вы Перебор этих имен переменных, и пытается получить значение этой переменной с

inputNumber[0] 

и это доставит вам строку "firstInput", не массив, поэтому, когда вы делаете

inputNumber[0][0] 

вы получаете характер "f", не значение "email" из массива.

Чтобы использовать строку для ссылки на переменную, которую вы бы использовать кронштейн обозначения, так и в глобальном масштабе, что будет выглядеть как

window[inputNumber[0]][0]; 

, которая на самом деле не очень хороший способ, чтобы получить переменную

FIDDLE

Вы бы лучше не с объектом

var values = { 
    firstInput : ["email", "regemail", "email", "What's your email?"], 
    secondInput : ["password", "regpassword", "password", "Choose a password"], 
    thirdInput : ["password", "confirmpassword", "confirmpassword", "Confirm password"] 
} 

затем ссылки на массивы с ключевыми именами

values[inputNumber[0]][0] 

FIDDLE