JavaScript setAttribute on page after run script-CodePudding

I have a script in HTML:

<!DOCTYPE html>
<html>
    <head>
        <script>
        function check() {
            var val = document.getElementById("selectbox").value
            var pic =  document.getElementById("twoposition").getElementTagName("div")[0].getEelementTagName("div")[0].getEelementTagName("iframe")[0]

            if(val === "firstSize") {
                pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200')
            } 
            else if(val === "secondSize") {
                pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100')
            }
        }
        </script>
        
        <style>
          #twoposition {
              position: absolute;
              width: 100%;
              height: 100%;
              left: 0px;
              top: 20px;
          }
        </style>
        
        <title></title>
    </head>
    <body>
        <select onchange="check()" id="selectbox" name="">
            <option hidden value="empty"></option>
            <option value="firstSize">1</option>
            <option value="secondSize">2</option>
        </select>
        <div id="twoposition">

            <script type="text/javascript" src="......."></script>
            <script type="text/javascript">
                CODE SCRIPTE.....
            </script>
        </div>
    </body>
</html>

afterload page and script run to give other elements in the console. the code HTML now is:

<!DOCTYPE html>
<html>
    <head>
        <script>
        function check() {
            var val = document.getElementById("selectbox").value
            var pic =  document.getElementById("twoposition").getElementTagName("div")[0].getEelementTagName("div")[0].getEelementTagName("iframe")[0]

            if(val === "firstSize") {
                pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200')
            } 
            else if(val === "secondSize") {
                pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100')
            }
        }
        </script>
        
        <style>
          #twoposition {
              position: absolute;
              width: 100%;
              height: 100%;
              left: 0px;
              top: 20px;
          }
        </style>
        
        <title></title>
    </head>
    <body>
        <select onchange="check()" id="selectbox" name="">
            <option hidden value="empty"></option>
            <option value="firstSize">1</option>
            <option value="secondSize">2</option>
        </select>
        <div id="twoposition">

            <script type="text/javascript" src="......."></script>
            <script type="text/javascript">
                CODE SCRIPTE.....
            </script>
            <div id="de6854">
                <div style="width: 100%;height: 100%">
                    <iframe id="4526d" src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=768,432" style="width: 100%; height: 100%">
                    </iframe>
                </div>
            </div>
        </div>

    </body>
</html>

this code <div id="de6854"> and <iframe id="4526d" is change ID dynamically.

Now I want to change setAttribute src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=768,432" in <iframe id="4526d" after change check box.

I try code above but not working.

CodePudding user response：

Is this useful for you?

<!DOCTYPE html>
<html>
    <head>
        <style>
          #twoposition {
              position: absolute;
              width: 100%;
              height: 100%;
              left: 0px;
              top: 50px;
          }
        </style>
        
        <title></title>
    </head>
    <body>
        <select onchange="check()" id="selectbox" name="">
            <option hidden value="empty"></option>
            <option value="firstSize">1</option>
            <option value="secondSize">2</option>
        </select>
        <div id="twoposition">
            <div id="de6854">
                <div style="width: 100%;height: 100%">
                    <iframe id="4526d" src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100" style="width: 100%; height: 100%">
                    </iframe>
                    <iframe id="3ad34" src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100" style="width: 100%; height: 100%">
                    </iframe>
                </div>
            </div>
        </div>

    </body>
    <script>
        function check() {

            var val = document.getElementById("selectbox").value

            var pics =  document.querySelectorAll("#twoposition iframe")

            pics.forEach(elem => {

                if(val === "firstSize") {
                elem.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200')
                } 
                else if(val === "secondSize") {
                   elem.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=768,432')
                }

            })

  
        }
        </script>
</html>

Also you can add defer in your script tag. Like this <script defer>

In this way your script code executed after the document has been parsed.

You can use querySelectorAll for get multiple nodes.