Скопируйте значения класса в Div

Question

У меня есть HTML-файл:

<div class="um-field-area">
    <div class="um-field-value">Value1</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value2</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value3</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value4</div>
</div>
<button onclick="Function()">Whatever</button>
<div id="result"></div>

Я бы хотел, чтобы моя функция принимала значения из всех четырех делителей с классом "um-field-value"

<div class="um-field-value">Value1</div>

И в прошломони в Div "result"

По сути, я хочу, чтобы скрипт просто копировал значения, данные в классе um-field-value, и вставлял его в div "result".Я попробовал следующее:

function Function() {
    var x = document.getElementsByClassName("um-field-value");
    document.getElementsById('result').innerHTML = x;
}

Но это совсем не работает.

Я немного новичок в кодировании, поэтому я не совсем уверен, возможно ли это вообще.Погуглил больше часа, но не смог найти решения.

Answer 1

Это простое и удобочитаемое решение, использующее цикл для получения текста внутри каждого элемента и добавления его в строку.getElementsByClassName возвращает массив всех найденных элементов, поэтому необходим цикл для получения текста внутри каждого с textContent.

function Function() {
    var result = '';
    var fields = document.getElementsByClassName("um-field-value");
    for (var i=0; i<fields.length; i++) {
        result += fields[i].textContent + '\n';
    }
    document.getElementById('result').innerHTML = result;
}

<div class="um-field-area">
    <div class="um-field-value">Value1</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value2</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value3</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value4</div>
</div>
<button onclick="Function()">Whatever</button>
<div id="result"></div>

Answer 2

Используйте querySelectorAll, чтобы получить все dom с этим классом um-field-value и итерируйте по нему, чтобы получить innerHTML

В вашем коде есть опечатка. Это getElementById вместо getElementsById.Существует дополнительный s

function Function() {
  var x = document.querySelectorAll(".um-field-value");
  let result = '';
  for (var y = 0; y < x.length; y++) {
    result += x[y].innerHTML;
  }
  document.getElementById('result').innerHTML = result;
}

<div class="um-field-area">
  <div class="um-field-value">Value1</div>
</div>
<div class="um-field-area">
  <div class="um-field-value">Value2</div>
</div>
<div class="um-field-area">
  <div class="um-field-value">Value3</div>
</div>
<div class="um-field-area">
  <div class="um-field-value">Value4</div>
</div>
<button onclick="Function()">Whatever</button>
<div id="result"></div>

Answer 3

Вы на правильном пути.document.getElementsByClassName вернет NodeList.Вам нужно получить innerText для каждого из элементов в этом списке.В зависимости от браузера вы можете использовать forEach или обычный цикл for для перебора списка.

function Function() {
    var fieldsList = document.getElementsByClassName("um-field-value");
    var fieldValues = [];
    fieldsList.forEach(function(field) { fieldValues.push(field.innerText) });
    document.getElementsById('result').innerHTML = fieldValues.join(", ");
}

Answer 4

document.getElementsByClassName получает сами узлы HTML, но затем вам нужно извлечь значения из узлов HTML, объединить их и установить для вашего результата div.Пример фрагмента ниже:

function myFunction() {
    var valueNodes = Array.prototype.slice.call(document.getElementsByClassName("um-field-value"));
    var values = valueNodes.map(valueNode => valueNode.innerHTML);
    var result = values.join(' ');
    document.getElementById('result').innerHTML = result;
}

<div class="um-field-area">
    <div class="um-field-value">Value1</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value2</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value3</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value4</div>
</div>
<button onclick="myFunction()">Whatever</button>
<div id="result"></div>