.DOM Присвоение значения

@www_www · Регистрация: 23.04.2018

Author24 — интернет-сервис помощи студентам

Здравствуйте! Через js нужно введенный в input текст перенести в p. Подскажите, как правильно добраться к значению input через .DOM? По name или id?

Javascript

function a(){
        //Создание поля для ввода
        var input = document.createElement("input");
        input.id="idvv";
        input.name="imya";
        input.value="";
        document.body.appendChild(input);
        //Создание текста, который будет изменен по клику на кнопку
        var p = document.createElement("p");
        p.id="p1";
        p.textContent="Здесь отобразится введенный текст";
        document.body.appendChild(p);
        //Создание кнопки и присвоение нового значения p
        var input = document.createElement("input");
        input.type="button";
        input.value="Save";
        input.addEventListener("click", function(){
            var o = document.body.imya.value; //<--Как правильно добраться к значению input?
            alert(o);
            document.getElementById("p1").textContent=o;
        });
        document.body.appendChild(input);
        }

@kalabuni · 10.11.2018, 00:08

метод appendChild () как раз возвращает "приживлённый" элемент, т. е. для получения ссылки на созданный этим методом тег не нужно будет присваивать ему ни id, ни name

@www_www · 10.11.2018, 00:22 **[ТС]**

kalabuni, все равно не понимаю как можно добраться до атрибута value у input с name 'imya'? Можете подробнее объяснить?

@kalabuni · 10.11.2018, 00:44

если хотите именно через атрибут name, то можно двумя способами:
document.getElementsByName ('imya') [0].value
или
document.body.querySelector ('[name="imya"]').value

-------------------------

а выше я указывал вам на то, что для доступа к инпуту никакого имени вообще не надо использовать, ибо
document.body.appendChild (input) вернёт вам созданный инпут, т.е.

Javascript

1	var tag = document.body.appendChild (input); alert (tag.value);

@www_www · 10.11.2018, 00:45 **[ТС]**

kalabuni, благодарю, все работает.

@amr-now · 10.11.2018, 12:04

Стенд с пятью разными способами доступа к элементу. Способы не все, но всё равно интересные.

PHP/HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        a();
 
        function a() {
            //Создание поля для ввода
            var input = document.createElement("input");
            input.id = "idvv";
            input.name = "imya";
            input.value = "";
            let inp = document.body.appendChild(input);
 
            //Создание текста, который будет изменен по клику на кнопку
            var p = document.createElement("p");
            p.id = "p1";
            p.textContent = "Здесь отобразится введенный текст";
            document.body.appendChild(p);
 
            let variants = [
                function (e) {
                    var o = inp.value; // Доступ к input через переменную.
                    alert(o);
                    document.getElementById("p1").textContent = o + " " + e.target.value;
                },
 
                function (e) {
                    var o = idvv.value; // Доступ к input по прямому id.
                    alert(o);
                    document.getElementById("p1").textContent = o + " " + e.target.value;
                },
 
                // function (e) {
                //     var o = imya.value; // Доступ к input по прямому имени здесь выдает ошибку.
                //     alert(o);
                //     document.getElementById("p1").textContent = o + " " + e.target.value;
                // },
 
                function (e) {
                    var o = document.getElementById("idvv").value; // Доступ к input по getElementById().
                    alert(o);
                    document.getElementById("p1").textContent = o + " " + e.target.value;
                },
 
                function (e) {
                    var o = document.getElementsByName("imya")[0].value; // Доступ к input по getElementsByName().
                    alert(o);
                    document.getElementById("p1").textContent = o + " " + e.target.value;
                },
 
                function (e) {
                    var o = document.querySelector("input[name=imya]").value; // Доступ к input по querySelector().
                    alert(o);
                    document.getElementById("p1").textContent = o + " " + e.target.value;
                },
            ];
 
            //Создание кнопки и присвоение нового содержимого в <p> тремя способами
            for (let i = 0; i < variants.length; ++i) {
                var input = document.createElement("input");
                input.type = "button";
                input.value = "Save" + (i + 1);
                input.onclick = variants[i];
                document.body.appendChild(input);
            }
        }
    </script>
</body>
</html>

Доступ по прямому id работает, но не рекомендуется.
Доступ по прямому имени работает не всегда и не рекомендуется.
Можно ещё получить доступ через индексатор document.forms[0][n]

------
А вообще имхо штатные методы доступа к элементу слишком многословные. jQuery конечно создавался как прекрасная альтернатива.

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	10.11.2018, 00:08	2
	метод appendChild () как раз возвращает "приживлённый" элемент, т. е. для получения ссылки на созданный этим методом тег не нужно будет присваивать ему ни id, ни name 0

@www_www 0 / 0 / 0 Регистрация: 23.04.2018 Сообщений: 20
	10.11.2018, 00:22 [ТС]	3
	kalabuni, все равно не понимаю как можно добраться до атрибута value у input с name 'imya'? Можете подробнее объяснить? 0

@www_www 0 / 0 / 0 Регистрация: 23.04.2018 Сообщений: 20
	10.11.2018, 00:45 [ТС]	5
	kalabuni, благодарю, все работает. 0

	10.11.2018, 12:04