Как добавить подпись под элементом со значениями из input, проблема с определением созданного элемента, не видит его?

Question

[julith]

Пользователь вводит значения RGB, создается блок с этим цветом. Каждый клик по кнопке + новый блок. Хочу добавить подпись со значениями RGB под каждым блоком. В последней функции проблемы, не видит добавленную подпись, определяет как indefined, а так же обработчик событий не видит блок, созданный предыдущей фунцией. Подскажите, как избежать этого.

<form action="" name="myForm">
        <div class="colorsAdding">
            <label for="R">R</label>
            <input type="text" name="R" id="R">
            <label for="G">G</label>
            <input type="text" name="G" id="G">
            <label for="B">B</label>
            <input type="text" name="B" id="B">
            <br>
            <button type="button" id="ColorAdd" onclick="validate() && colorAdd()">Add color</button>
        </div>
    </form>

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    margin: 15px;
}

.colorsAdding {
    width: max-content;
    margin: 15px;
    padding: 10px;
    border: 1px solid rgb(68, 34, 34);
    background-color: azure;
}

#R,
#G,
#B {
    max-width: 50px;
}

#ColorAdd {
    margin: 10px;
    width: 230px;
}

.newColorField {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 15px;
    float: left;
    text-align: center;
}

var forms = document.forms;
var myForm = forms.myForm;
const colorAdding = document.querySelector('#ColorAdd');

function isValidRGBValue(value) {
    return value != "" && Number.isInteger(+value) && value >= 0 && value <= 255;
}

function validate() {
    if (isValidRGBValue(myForm.R.value) && isValidRGBValue(myForm.G.value) && isValidRGBValue(myForm.B.value)) {
    return true;
}
    alert('wrong RGB numbers, try with 0-255');
    return false;
}

function colorAdd() {
    var divColorField = document.createElement('div');
    
    divColorField.classList.add('newColorField');
    
    divColorField.style.backgroundColor = `rgb(${myForm.R.value}, ${myForm.G.value}, ${myForm.B.value})`;
    myForm.after(divColorField);
}

colorAdding.addEventListener('click', function() {
    let colorFieldText = document.createTextNode(`R = ${myForm.R.value}, G = ${myForm.G.value}, B = ${myForm.B.value}`);
    colorFieldText.classList.add('newColorField');//indefined почему?
    divColorField.after(colorFieldText);//не видит как элемент страницы
});

Answer 1

[julith]

Решила проблему созданием родительского дива

function colorAdd() {
    divField = document.createElement('div');
    divColorField = document.createElement('div');
    
    divField.classList.add('newField');
    divColorField.classList.add('newColorField');

    divField.appendChild(divColorField);
    
    divColorField.style.backgroundColor = `rgb(${myForm.R.value}, ${myForm.G.value}, ${myForm.B.value})`;
    myForm.after(divField);
}

colorAdding.addEventListener('click', function() {
    text = `R = ${myForm.R.value}, G = ${myForm.G.value}, B = ${myForm.B.value}`;
    colorFieldText = document.createTextNode(text);
    divField.appendChild(colorFieldText);
});

Answer 2

[Григорий Боев]

Насколько я понял, createTextNode() создаёт текстовое содержимое элемента, его надо привязать к какому-то элементу:

var newtext = document.createTextNode(text);
var p1 = document.getElementById("p1");

p1.appendChild(newtext);

Можно попробовать использовать createElement() или создавать пару элементов в colorAdd() и привязывать colorFieldText к одному из них