简体   繁体   中英

Javascript problem or more lack of knowledge than anything

Hopefully this is fairly simple.

This is my current code below. It is generating a random number for me on loading the page and works fine for the target div. However, I want this to run this function within 8 separate divs. I obviously cannot have 8 divs with the same id so I changed this to getElementByClassName and changed the class on my div to vvv and got rid of the id but for some reason this doesn't work?

Also, do I need anything else in my script to call this function for more than one div? Any help much appreciated!

<script>
        let text = "VAC";       
        
        window.onload = function ()
        {
        var output = document.getElementById("vvv");
        
        setInterval(function ()
        {
            output.innerHTML = Math.floor(Math.random() * (115 - 105 + 1)) + 105 + " " + text; 
        }, 2000);//this value is the time between generating the number//
        };
</script>

You are looking for getElementsByClassName (not getElementByClassName).

 let text = "VAC"; let outputs = document.getElementsByClassName("vvv"); let randomDivs = function() { for (let output in outputs) { outputs[output].innerHTML = Math.floor(Math.random() * (115 - 105 + 1)) + 105 + " " + text } } randomDivs() setInterval(randomDivs, 2000); //this value is the time between generating the number//
 <div class="vvv"></div> <div class="vvv"></div> <div class="vvv"></div> <div class="vvv"></div> <div class="vvv"></div> <div class="vvv"></div> <div class="vvv"></div> <div class="vvv"></div>

You may write it like this.

<body>
    <div class="vvv">1234</div>
    <div class="vvv">1234</div>
    <div class="vvv">1234</div>
    <script>
        let text = "VAC";       
        var output = document.getElementsByClassName("vvv"); //you can use getElementsByTagName("div") as well
        setInterval(function (){
            Array.from(output).forEach((item, index) => {item.innerHTML = Math.floor(Math.random() * (115 - 105 + 1)) + 105 + " " + text;}
        )}, 2000)
    </script>
</body>

Note: Didn't realize it was answered already with similar approach. You may try getElementsByTagName("div") as well as suggested. But it has it's limitations too.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM