Question

我之前曾发布过此question。但是有人建议我需要问一个更具体或更集中的问题。

我正在单个页面上处理输出历史记录日志。而且我想使它的每个输出本身都包含在可以单独关闭或删除的box对象中。像this.

现在，我设法使一切正常工作，可以很好地输出到带有关闭按钮的框。但是，在这种情况下，关闭按钮本身不会起作用。

所以，我正在尝试像这样输出它...

HTML：

<p>History log:</p><br><div style="white-space:pre-wrap"><ul 
id="outputListItem" class="boxcontainer"></ul></div>

脚本：

document.getElementById("Add").onclick = function(e) {
convertOutput();
}

function convertOutput(){
//this is the part I have been trying to get working
convertOutput.addEventListener('close', function() {
this.parentElement.style.display = 'none';
}
});

var output = document.getElementById("output").value;
var li = document.createElement('li');
li.className = "containedboxes";
var dateTime = todayDateTime();

li.innerHTML = "<time id='time'>" + dateTime +"</time><br /> <br />"+ output 
+"<br /><br /><span class='close'>&times;</span>";
   document.getElementById('outputListItem').prepend(li);
}

关闭该框的脚本：

var closebtns = document.getElementsByClassName("close");
var i;

for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}

在我提出的最后一个问题上，有人建议我在紧随其后的addEventListener（）循环之后立即使用convertOutput（）。如果这是您的操作方式，那么我对JavaScript还是很陌生，所以请不要担心如何正确地执行此操作。我也为此创建了一个fiddle，但是由于某种原因，我无法使脚本在小提琴中正常运行，但是所有代码都可以看到。

我正在寻找使用普通JavaScript解决的方法。

Answer 1

您的框仅在事件未附加到事件之前就崩溃，因此它不会对click事件做出响应。刚开始时以下块：

document.getElementById("Add").onclick = function(e) {
convertOutput();
}

尝试将点击侦听器添加到HTML元素添加，该元素不存在。如果您删除代码块或添加适当的元素，则您的框将具有单击功能。

Answer 2

我为您创建了一个示例。希望这可以帮助您开始:)需要注意的几件事，我使用data属性在数组中存储该项目的索引，因此您可以在单击列表项时将其删除。

document.addEventListener('DOMContentLoaded', function(){
	let nameEl = document.querySelector("#name");
	let submitEl = document.querySelector("#submit-name");
	let historyEl = document.querySelector(".history-list");

	let historyList = [
		{ name: 'Mitch'},
		{ name: 'Max'},
		{ name: 'Mike'},
	];

	function addToList(arr) {
		// Clear up list and then update it
		while(historyEl.firstChild) {
			historyEl.removeChild(historyEl.firstChild);
		}
		// Update the list with the historyList
		for(let item in historyList) {
			let name = historyList[item].name;
			let listContent = document.createElement("li");
			listContent.textContent = name;
			// We will use the index to remove items from the list
			listContent.setAttribute('data-value', item);
			listContent.addEventListener("click", removeFromList)
			historyEl.appendChild(listContent);
		}
	}

	function removeFromList(index) {
		// Takes the index of the object, and will later remove it
		console.log("Removed Item " + this.dataset.value);
		historyList.splice(index, 1);
		addToList(historyList);

	}

	addToList(historyList);

	submitEl.addEventListener("click", function(event) {
		if(nameEl.value) {
			// Add the name to the start of the history list array.
			historyList.unshift({ name: nameEl.value})
			nameEl.value = '';
			// Update the dom with the new array
			addToList(historyList);
		}
	});
});

<label for="name">Type Name</label>
<input type="text" name="name" id="name">
<button id="submit-name">Submit Name</button>

<ul class="history-list"></ul>

希望这对您如何完成任务有一个好主意，如果您有任何疑问，请告诉我：）

将对象输出到保持关闭功能的页面

2 个答案: