Как разделить содержимое кнопки на другой файл HTML? - PullRequest
0 голосов
/ 06 апреля 2020

Я работаю над файлом HTML, который действует как отдельная страница в приложении Electron. В этом файле у меня есть кнопка, которая показывает всплывающую форму при нажатии. Вот соответствующий код для кнопки и всплывающего содержимого:

<button class="open-button" id="openConfig">Change Configuration</button>

	<div class="modal-content" id="networkConfig">
		<div class="modal-header">
			<h2>Configuration Settings</h2>
		</div>

		<div class="modal-body">
			<p>To get started, enter some initial information about the network you want to configure.</p>
			<p>Leave the number of nodes as zero if you would like to start from scratch.</p>
			<br />

			<p>Number of nodes:</p>
			<input type="number" id="nodeNumber" value="0" min="0" max="30">
			<br /><br />
			<p>Preference:</p>
			<div>
				<input type="radio" id="prefsecure" name="option" value="Secure" checked>
				<label for="prefsecure">Secure (Recommended)</label>
			</div>
			<div>
				<input type="radio" id="prefefficient" name="option" value="Efficient">
				<label for="prefefficient">Efficient</label>
			</div>
			<br />

		</div>
		<div class="modal-footer">
			<button type="submit" class="btn">Start Configuration</button>
			<button type="button" class="btn cancel" id="closeConfig">Cancel</button>
			<br /><br />
		</div>
	</div>

Кроме того, вот соответствующие функции javascript, которые позволяют мне открывать / закрывать это всплывающее окно:

function openForm() {
	document.getElementById("networkConfig").style.display = "block";
}
function closeForm() {
	document.getElementById("networkConfig").style.display = "none";
}

document.addEventListener('DOMContentLoaded', function () {
	document.getElementById('openConfig')
		.addEventListener('click', openForm);
});
document.addEventListener('DOMContentLoaded', function () {
	document.getElementById('closeConfig')
		.addEventListener('click', closeForm);
});

Что я хотел бы сделать, это взять содержимое, которое появляется при нажатии кнопки (id кнопки = openConfig), и поместить его в отдельный HTML file (идентификатор содержимого, которое я хочу в отдельном файле - «networkConfig»). Это поможет разделить мой код. Как сделать так, чтобы кнопка ссылалась на этот другой файл? У кого-нибудь есть какие-либо выводы? Я был бы очень признателен за любую помощь на всех!

Кроме того, я прошу прощения, если я сделал какую-либо ошибку при публикации этого. Это мой первый пост в stackoverflow, и я не смог найти то, что я ищу за последние несколько дней. Спасибо за чтение!

1 Ответ

0 голосов
/ 06 апреля 2020

Если я понял это правильно, вы можете сделать это либо ПОСТАВИТЬ контент, который вы хотите повторно использовать где-то, инициализировать пустую переменную, добавить уценку и, таким образом, иметь возможность запрашивать ее в другом месте, либо сохранить временный файл. содержит разметку (небезопасно).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...