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

Question

在 vanilla JavaScript 中，如何将元素绑定到对象，以便如果对象的子元素具有值，我可以用它更新对象？需要兼容 IE10+ 和所有其他浏览器。

通过一个按钮，我可以动态添加一个createElement()包含表单输入的元素 ()。创建元素时，它还会创建一个对象，该对象也应该是元素，因此我可以使用更改时的输入值更新对象。

然后我将每个新对象存储在一个数组中。

我遇到的问题是将输入值与正确的对象连接起来。我尝试循环遍历数组，希望用事件目标的当前输入值依次更新每个对象，但未能成功。我尝试注册元素（已弃用）和其他各种东西，但我无法完全锻炼如何将输入链接到容器对象（lineObject）。

我真的可以使用一些帮助来解决这个问题并了解如何以我需要的方式将元素绑定到对象。

//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>

标签： javascript

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;
    })
}

请注意，propertyName和inputElement变量是在外部addInput函数中定义的，但它们是在您将匿名函数指定为事件侦听器时创建的闭包中捕获的。

这是一个完整的工作示例的小提琴：https ://jsfiddle.net/b3ta60cn/