у меня есть код мне нужно чтобы при нажиме на кнопки появлялись надписи

у меня есть код мне нужно чтобы при нажиме на кнопки появлялись надписи (под полями ввода): первый массив и после него шли значение которые мы ввели в первое поле ввода, второй массив и значение которые мы ввели в другое поле ввода и надпись результат где будет вивиодитись результат выполненного кода код

let form = document.forms.test;
form.addEventListener('submit', (event) => {
  event.preventDefault();

  let arr1 = form.arr1.value.split(',');
  let arr2 = form.arr2.value.split(',');

  let result = arr1
    .filter(num => !arr2.includes(num))
    .concat(arr2.filter(num => !arr1.includes(num)));

  form.result.value = result;

});
<form name="test">
  Серия значений 1:<br>
  <input name="arr1"><br> Серия значений 2:<br>
  <input name="arr2"><br> Результат:
  <br>
  <input name="result"><br>
  <input type="submit" value="Получить результат">
</form>


Ответы (1 шт):

Автор решения: Макс к
  1. Добавьте под полями ввода элементы в которые будет вывод данных из инпутов/массивов;
  2. Добавьте в них данные.

let form = document.forms.test;
let output_1 = document.querySelector('.output_1');
let output_2 = document.querySelector('.output_2');
let output_3 = document.querySelector('.output_3');




form.addEventListener('submit', (event) => {
  event.preventDefault();

  let arr1 = form.arr1.value.split(',');
  let arr2 = form.arr2.value.split(',');

  let result = arr1
    .filter(num => !arr2.includes(num))
    .concat(arr2.filter(num => !arr1.includes(num)));

  form.result.value = result;
  output_1.innerText = arr1;
  output_2.innerText = arr2;
    output_3.innerText = arr1+arr2;



});
.output_1, .output_2, .output_3{
  color: red
}
<form name="test">
  Серия значений 1:<br>
  <input name="arr1">
      <div class="output_1"></div> 
  Серия значений 2:<br>
  <input name="arr2">
      <div class="output_2"></div>
  <br> Результат:
  <br>
  <input name="result">
  <div class="output_3"></div>
  <br>
  <input type="submit" value="Получить результат">
</form>

→ Ссылка