I do some options in this code.
first, get Attribute by getAttribute() this called ‘src’.
second, use 'searchParams.set()' to change resize in this URL.
third, setAttribute() to accepte last change of size.
this is my code:
<!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="two">
<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">
</iframe>
<iframe id="3ad34" src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100">
</iframe>
</div>
</div>
</div>
</body>
<script>
function check() {
var val = document.getElementById("selectbox").value
var pic = document.querySelectorAll("#two iframe")
var aa = pic.getAttribute('src')
var url = new URL(aa);
var url0 = url.searchParams.set('resize', '500,300');
var url2 = url.searchParams.set('resize', '400,200');
if(val === "firstSize") {
pic.setAttribute('src',url0)
}
else if(val === "secondSize") {
pic.setAttribute('src',url2)
}
}
</script>
</html>
I try this code but not working.
I want if I select the check 1 has value firstSize change the attribute to url0.
and if I select the check 2 has value secondSize change the attribute to url2.