#javascript #html
Вопрос:
Моя цель состоит в том, чтобы разработать функцию, которая будет перебирать набор html-элементов и собирать их значения. Как только я соберу эти значения, я хотел бы использовать их для создания текстовой области html.
До сих пор я создал набор полей ввода html и метод javascript для сбора значений из полей ввода. Эти значения затем используются для отображения html в текстовой области.
const generate_html = (...args) => console.log("generate_html:", ...args)
function process_input() {
title_input = document.getElementById("title_input").value
el1 = document.getElementById("el1").value
el2 = document.getElementById("el2").value
el3 = document.getElementById("el3").value
el4 = document.getElementById("el4").value
el5 = document.getElementById("el5").value
dl1 = document.getElementById("dl1").value
dl2 = document.getElementById("dl2").value
dl3 = document.getElementById("dl3").value
dl4 = document.getElementById("dl4").value
dl5 = document.getElementById("dl5").value
answer = el4 ": " dl4 "n" el5 ": " dl5 "n" el1 ": " dl1 "n" el2 ": " dl2 "n" el3 ": " dl3
generate_html(el1, el2, el3, el4, el5, dl1, dl2, dl3, dl4, dl5, title_input)
// hide_user_input()
} <div class="inputBoxes">
<title>Input:</title>
<div class="row">
Title: <input id="title_input" type="text">
</div>
<div class="row">
Key Term 1: <input id="el1" type="text" value="">
</div>
<div class="row">
Description 1: <input id="dl1" type="text" value="">
</div>
<div class="row">
Key Term 2: <input id="el2" type="text" value="">
</div>
<div class="row">
Description 2: <input id="dl2" type="text" value="">
</div>
<div class="row">
Key Term 3: <input id="el3" type="text" value="">
</div>
<div class="row">
Description 3: <input id="dl3" type="text" value="">
</div>
<div class="row">
Key Term 4: <input id="el4" type="text" value="">
</div>
<div class="row">
Description 4: <input id="dl4" type="text" value="">
</div>
<div class="row">
Key Term 5: <input id="el5" type="text" value="">
</div>
<div class="row">
Description 5: <input id="dl5" type="text" value="">
</div>
<span style="padding: 3px">
<button id="one" class="button" type="button" onClick="process_input()">generate html</button>
</span>
</div> Должен быть более эффективный способ сделать это. В конце концов, я хотел бы просто использовать метод, чтобы захватить любой элемент ввода из inputBoxes div, т. е. eli и dli, такой, чтобы метод generate_html просто принимал три аргумента generate_html(array_el,array_dl, title_input) , т. Е. Любая помощь в этом будет весьма признательна. Спасибо.
Перейдя к ответу ниже, я изменил метод
function generate_html(){
var elData;
var dlData;
var length = $('#inputBoxes').children().length
var allData = []
for(i=1; i<=length;i ){
elData = $(`#el${i}`).value
dlData = $(`#dl${i}`).value
console.log(`el${i}`);
console.log(`dl${i}`);
e=`el${i}`;
d=`dl${i}`;
allData.push({e:elData,d:dlData})
}
Хотя я все еще получаю 
за allData.
Ответ №1:
Если вы хотите установить разделение между входными данными dl и el для вашей функции generate_html, то можно запросить «идентификатор начинается с», затем выполнить итерацию, чтобы получить значения, и вы можете отправить их в свою функцию. Затем при создании вы можете объединить их в одно значение, чтобы добавить в текстовую область.
const generate_html = (elArray, dlArray, title) => {
let text = title "n";
for (let i = 0; i < elArray.length; i ) {
text = `${elArray[i]}:${dlArray[i]}n`;
}
console.log(text);
}
function process_input() {
const e_inputs = document.querySelectorAll("[id^='el']");
const d_inputs = document.querySelectorAll("[id^='dl']");
const title = document.getElementById('title_input').value;
let elArray = [];
let dlArray = [];
e_inputs.forEach( i => { if(i.value) elArray.push(i.value) });
d_inputs.forEach( i => { if(i.value) dlArray.push(i.value) });
generate_html(elArray, dlArray, title);
} <div class="inputBoxes">
<title>Input:</title>
<div class="row">
Title: <input id="title_input" type="text">
</div>
<div class="row">
Key Term 1: <input id="el1" type="text" value="">
</div>
<div class="row">
Description 1: <input id="dl1" type="text" value="">
</div>
<div class="row">
Key Term 2: <input id="el2" type="text" value="">
</div>
<div class="row">
Description 2: <input id="dl2" type="text" value="">
</div>
<div class="row">
Key Term 3: <input id="el3" type="text" value="">
</div>
<div class="row">
Description 3: <input id="dl3" type="text" value="">
</div>
<div class="row">
Key Term 4: <input id="el4" type="text" value="">
</div>
<div class="row">
Description 4: <input id="dl4" type="text" value="">
</div>
<div class="row">
Key Term 5: <input id="el5" type="text" value="">
</div>
<div class="row">
Description 5: <input id="dl5" type="text" value="">
</div>
<span style="padding: 3px">
<button id="one" class="button" type="button" onClick="process_input()">generate html</button>
</span>
</div> Ответ №2:
вы можете использовать jQuery length и захватить iteration(index) of your input id , чтобы сделать это.
пример в вашем случае : добавьте идентификатор в свой класс текстовых полей. например : поле
var length = $('#field').children().length
var allData = []
for(i=1; i<=length;i ){
var elData = $('#el' i).value
var dlData = $('#dl' i).value
allData.push({'el' i:elData,'dl' i:dlData})
}
Ответ №3:
Существует множество способов сделать это, но следующая функция дает вам основу для начала. Вы можете настроить его под свои нужды:
function getElementsAddToTextArea() {
const elements = document.querySelectorAll('.inputBoxes > div > input')
let answer = ''
for (let index = 0; index < elements.length; index ) {
const value = elements[index].value
answer = `${answer}: ${value}`
}
const textarea = document.createElement('textarea')
textarea.value = answer
const inputBoxes = document.querySelector('.inputBoxes')
inputBoxes.append(textarea)
}
Способ, которым это работает, заключается в том, что вы получаете все входные элементы с querySelectorAll() помощью функции, а затем просматриваете их, чтобы извлечь их значение и добавить его в переменную ответа. Возможно, вам потребуется добавить сюда некоторые условные операторы, если вы хотите настроить внешний вид.
Затем вам нужно создать textarea элемент после, добавить к нему ответ по его значению и добавить textarea элемент в уже существующий html.
Ознакомьтесь с MDN для получения некоторых документов о querySelectorAll. Я рекомендую ссылаться на эти документы для любого запроса веб-разработки, поскольку они являются хорошим ресурсом.