Apa yang Anda ketik di dalam kotak input harus direplikasi di bawah ini, pada setiap rentang.

Saya dapat melakukan ini dengan kode de js di bawah ini, tetapi untuk melakukannya saya perlu membuat kode yang sama berulang-ulang untuk setiap rentang yang perlu diselesaikan. Saya sudah mencoba menggunakan kelas "satu" yang sama di setiap rentang, tetapi hanya berfungsi pada rentang pertama. Saya harus membuat kelas baru untuk setiap rentang dan beberapa kode untuk masing-masing rentang tersebut.

Saya ingin tahu cara mereplikasi teks yang sama dalam banyak rentang tanpa banyak kode. Bagaimana?

var rep = document.getElementById('A');
    rep.addEventListener('input', function() {
        var result = document.querySelector('span.one');
        result.innerHTML = this.value;
    });
    
    var rep = document.getElementById('A');
    rep.addEventListener('input', function() {
        var result = document.querySelector('span.two');
        result.innerHTML = this.value;
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="A">
<p>One: <span class="one"></span></p>
<p>Two: <span class="two"></span></p>
0
Rohalt 15 Maret 2020, 21:27

1 menjawab

Jawaban Terbaik

Gunakan querySelectorAll untuk memilih semua elemen dari pemilih css yang sama. Silakan gunakan kode berikut:

Harap gunakan tautan ini untuk mempelajari lebih lanjut tentang querySelectorAll

var rep = document.getElementById('A');
    rep.addEventListener('input', function() {
        var result = document.querySelectorAll('span');
        for(const res of result) {
          res.innerHTML = this.value;
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="A">
<p>One: <span class="one"></span></p>
<p>Two: <span class="two"></span></p>
2
Prince 15 Maret 2020, 18:30