将HTML元素绑定到Javascript对象，并将对象存储在数组中--用子元素的输入值更新对象

Question

//lineNumber *** // 
let lineNumber = document.querySelectorAll('.lineNumber');
let numberOfLines = lineNumber.length;
//first instance of input element
let lineText = document.querySelector('.lineText');
//first input value of element
let lineTextValue = document.querySelector('input[name="lineText"]').value;
//create initial lineObject for first line
let lastLine = lineNumber[numberOfLines - 1];
let lineContainer;

//lineNumber object constructor
function LineObject(lineText, writable) {
	//set properties
	this.lineText = lineText;
	this.writable = writable;
} 

//new object at new lineNumber element, set values
let lineObject = new LineObject(lineTextValue, true);

//create array containing initial line object
let lineArray = [lineObject];

//line functions
(function lineGeneration(){

		//add or remove lines
		document.addEventListener('click', function(e) {

			//this
			let self = e.target;

			// has class .addLine
			if (hasClass(self, 'addLine')) {
				
				//call function to get variables
				insertLineHTML();
        
				//clone new line after the last line\
				self.parentElement.parentElement.parentElement.parentElement.parentElement.appendChild(lineObject.cloneNode(true));

        //lineNumber input location
        let newlineTextInput = self.parentElement.parentElement.parentElement.parentElement.nextElementSibling.querySelector('input[name="lineText"]');
				
				//input value of new element
        let lineTextValue = newlineTextInput.value;//normally "" when created unless placeholder text
				
				//new object at new lineNumber element
       	lineObject = new LineObject(lineTextValue, true);
				
        //add new object to lineArray
        lineArray.push(lineObject);
				
				refreshLineNodeList();
  
			} 

	}); 

    //combine accordion / refresh
    function refreshLineNodeList(){

          //refresh number of elements in nodelist
          lineNumber = document.querySelectorAll('.lineNumber');

          //get new length
          numberOfLines = lineNumber.length; 

        }

    //line html and vars
    function insertLineHTML(){
        lineObject = document.createElement('div');
        lineObject.setAttribute('class', 'lineNumber');
        lineObject.innerHTML = `	
            <div class="accordion-title">
            <h3>Line 2</h3>
            </div>

            <div class="input-section">	

            <div class="input-row">

            <div class="input-container">
            <label>Line 2 :</label>
            <input type="text" name="lineText" value="" class="lineText">
            </div>

           
            <div class="input-row">

            <div class="button-container">
            <div class="warning"></div>
            <button class="addLine">Add Another Line</button>

            </div>
            </div>
            </div>`;
        
            console.log(lineNumber);
        }
	
})();

//lineText addEventListener update object value
document.addEventListener('keyup', function(e) {
  let self = e.target;//input field
	let lineTextValue = self.value;
	
	// has class .lineText
	if (hasClass(self, 'lineText')) {      

      //for each lineObject in LineArray 
       //lineArray.forEach(function(arrayObject) {
        
        //update lineObject HTMLelement.prototype
       Object.defineProperty(lineObject, 'lineText', {
   
            //update object value to event target value
         get: function() {        
               return this.lineTextValue;//how can I get the right lineObject object from the array when I update the input  
             },
          
          set: function(lineTextValue) {
            this.lineText = lineTextValue;//how can I aet the right lineObject object in the array when I update the input
          }          
       });
        //debugging
        //console.log('objectProperty = ' + arrayObject.lineText);
        console.log('this.lineText = ' + this.lineText);  
				console.log('Object.entries(lineObject) - ' + Object.entries(lineObject));
        //console.log('lineObject.lineText = '+ lineObject.lineText);
        //console.log('lineTextValue = '+ lineTextValue);
      //});
  };
});

let button = document.getElementById('test');
button.addEventListener( "click", testFunction );
function testFunction(){	

	button.addEventListener( "click", testFunction );
  //console.log('Object.keys(lineObject) - '+ Object.keys(lineObject));
  //console.log('Reflect.ownKeys(lineObject) - ' + Reflect.ownKeys(lineObject));
  //console.log('Object.values - ' + Object.values(lineObject));
  //console.log('lineObject = '+ lineObject.lineText);
  
  //console.log('Object.entries(lineObject) - ' + Object.entries(lineObject));
  //console.log('Object.entries(lineObjectClone) - ' + Object.entries(lineObjectClone));
  
  //console.log('lineObjectClone.lineText = ' + lineObject.lineText);
  //console.log('lineObjectClone[1].lineText = ' + lineObjectClone.lineText);
  //console.log('lineArray[0] = ' + lineArray[0].lineText);
  console.log('lineArray = ' + lineArray);
  console.log('numberOfLines = ' + numberOfLines);
  for(let i = 0; i < numberOfLines; ++i ){
    console.log('lineArray[i].lineText = ' + lineArray[i].lineText)
  }
};

//does the element have the class specified?
function hasClass(elem, className) {
      return elem.classList.contains(className);
};

	

<section>

  <button id="test">Test</button>
    
  <div class="lineNumber">
		<div class="accordion-title">
			<h3>Line</h3>
			
		</div>
		<div class="input-section" style="display: block;">	
			<div class="input-row">

				<div class="input-container">
					<label>Line Text :</label>
					<input type="text" name="lineText" value="" class="lineText">
				</div>
			</div>

			<div class="input-row">

				<div class="button-container">
					<div class="warning"></div>
					<button class="addLine">Add Another Line</button>			
				</div>
	</div>
		</div>
	</div>
  
</section>

Answer 1

一种方法是使用闭包。

闭包的目的是从包含函数中捕获变量，以便在包含函数退出后使用这些变量。

一个简单的示例如下所示：

let data = {
    nameGenerator: 0
};

function addInput() {
    // generate a new name and property in data object
    let propertyName = String.fromCharCode("a".charCodeAt() + data.nameGenerator++);
    // initialize property value to its name
    data[propertyName] = propertyName;

    // add <div><input value="(property)"></div> to container
    let containerElement = document.getElementById("container");
    let lineElement = document.createElement("div");
    let inputElement = document.createElement("input");
    lineElement.appendChild(inputElement);
    containerElement.appendChild(lineElement);

    // initialize input value (note: this does not bind the two, just initializes)
    inputElement.value = data[propertyName];

    // create a closure that binds the property to the element
    inputElement.addEventListener("keyup", function () {
        // inside this function, propertyName and inputElement 
        // are "captured" in the closure
        data[propertyName] = inputElement.value;
    })
}