Get innerHTML and Place it to other InnerHTML

Viewed 95

UPDATED QUESTION
I have two div(s) with class selector (as follow):

    <div class="harga celana-dalam">111</div>
    <div class="harga celana-dalam">222</div>
    <div class="harga celana-dalam">333</div>




    <div class="showHargaProd"><!--111 should be here-->/div>
    <div class="showHargaProd"><!--222 should be here-->/div>
    <div class="showHargaProd"><!--333 should be here-->/div>

Here's the custom js:

<script>
    function hargaProduk(){
         //global divHrg;
         var divHrg = document.querySelectorAll("[class='harga celana-dalam']");
         var divResult = document.querySelector("#showHargaProd");
                for (var i=0; i < divHrg.length; i++) {
                alert(divHrg[i].innerHTML);
                }
         }
        document.addEventListener("DOMContentLoaded", hargaProduk);
</script>

What I want to try is: copy all content each of divs in harga celana-dalam into each of divs showHargaProd.

In my script above, I use alert fo see if it works. Using alert, it shows as I wished but I want each of them fill in each of showHargaProd.

1 Answers

To fill content of div with class with value of other class, you need to loop on the first class and fill the second.

<script>
    
    function hargaProduk() {

        let sources = document.querySelectorAll(".harga.celana-dalam");
        let dests = document.querySelectorAll(".showHargaProd");

        for (let i = 0; i < sources.length; i++) {

            if (dests[i]) {
                dests[i].innerHTML = sources[i].innerHTML;
            }

        }
        
    }

    document.addEventListener("DOMContentLoaded", hargaProduk);
    
</script>
Related