Отображение содержимого ввода для нескольких делений - PullRequest
Новая
       7

Отображение содержимого ввода для нескольких делений

0 голосов
/ 15 февраля 2020

Я хочу дать всем .firstname-показать содержимое из ввода, но я не знаю, как это сделать. Вот код: 

    <input type="text" id="firstname" name="firstname" placeholder="First name">
    <button id="firstname-btn" onclick="show()">SHOW</button>
    <div class="firstname-show"></div>
    <div class="firstname-show"></div>

    function show() {
       var name = document.getElementById('firstname').value;
       document.querySelectorAll('.firstname-show').textContent = name;
    }

Ответы [ 2 ]

2 голосов
/ 15 февраля 2020

Селектор запросов вернет массив, поэтому вы должны выполнить итерацию для l oop. см. ниже функцию. 

function show() {
    var name = document.getElementById('firstname').value;
    var elements = document.querySelectorAll('.firstname-show');

    for(var i in elements){
        elements[i].textContent = name;
    }
}

https://jsfiddle.net/kagf25c1/

0 голосов
/ 15 февраля 2020

Поскольку querySelectorAll возвращает коллекцию, вы можете использовать метод forEach в коллекции, чтобы просмотреть каждый элемент и применить необходимую обработку 

const show = () => {
     let value = document.getElementById('firstname').value;
     document.querySelectorAll('.firstname-show')
     .forEach(div => div.textContent = value);
}
<input type="text" id="firstname" name="firstname" placeholder="First name">
<button id="firstname-btn" onclick="show()">SHOW</button>
<div class="firstname-show"></div>
<div class="firstname-show"></div>
...