I have a script in HTML:
JavaScript
x
45
45
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
function check() {6
var val = document.getElementById("selectbox").value7
var pic = document.getElementById("twoposition").getElementTagName("div")[0].getEelementTagName("div")[0].getEelementTagName("iframe")[0]8
9
if(val === "firstSize") {10
pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200')11
} 12
else if(val === "secondSize") {13
pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100')14
}15
}16
</script>17
18
<style>19
#twoposition {20
position: absolute;21
width: 100%;22
height: 100%;23
left: 0px;24
top: 20px;25
}26
</style>27
28
<title></title>29
</head>30
<body>31
<select onchange="check()" id="selectbox" name="">32
<option hidden value="empty"></option>33
<option value="firstSize">1</option>34
<option value="secondSize">2</option>35
</select>36
<div id="twoposition">37
38
<script type="text/javascript" src="......."></script>39
<script type="text/javascript">40
CODE SCRIPTE..41
</script>42
</div>43
</body>44
</html>45
afterload page and script run to give other elements in the console. the code HTML now is:
JavaScript
1
52
52
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
function check() {6
var val = document.getElementById("selectbox").value7
var pic = document.getElementById("twoposition").getElementTagName("div")[0].getEelementTagName("div")[0].getEelementTagName("iframe")[0]8
9
if(val === "firstSize") {10
pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200')11
} 12
else if(val === "secondSize") {13
pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100')14
}15
}16
</script>17
18
<style>19
#twoposition {20
position: absolute;21
width: 100%;22
height: 100%;23
left: 0px;24
top: 20px;25
}26
</style>27
28
<title></title>29
</head>30
<body>31
<select onchange="check()" id="selectbox" name="">32
<option hidden value="empty"></option>33
<option value="firstSize">1</option>34
<option value="secondSize">2</option>35
</select>36
<div id="twoposition">37
38
<script type="text/javascript" src="......."></script>39
<script type="text/javascript">40
CODE SCRIPTE..41
</script>42
<div id="de6854">43
<div style="width: 100%;height: 100%">44
<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%">45
</iframe>46
</div>47
</div>48
</div>49
50
</body>51
</html>52
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.
Advertisement
Answer
Is this useful for you?
JavaScript
1
55
55
1
<!DOCTYPE html>2
<html>3
<head>4
<style>5
#twoposition {6
position: absolute;7
width: 100%;8
height: 100%;9
left: 0px;10
top: 50px;11
}12
</style>13
14
<title></title>15
</head>16
<body>17
<select onchange="check()" id="selectbox" name="">18
<option hidden value="empty"></option>19
<option value="firstSize">1</option>20
<option value="secondSize">2</option>21
</select>22
<div id="twoposition">23
<div id="de6854">24
<div style="width: 100%;height: 100%">25
<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%">26
</iframe>27
<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%">28
</iframe>29
</div>30
</div>31
</div>32
33
</body>34
<script>35
function check() {36
37
var val = document.getElementById("selectbox").value38
39
var pics = document.querySelectorAll("#twoposition iframe")40
41
pics.forEach(elem => {42
43
if(val === "firstSize") {44
elem.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200')45
} 46
else if(val === "secondSize") {47
elem.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=768,432')48
}49
50
})51
52
53
}54
</script>55
</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.