I want to use indexOf() and lastIndex() to add attributes by setAttribute after customizing the URL.
I try this code but not working:
<!DOCTYPE html>
<html>
<head>
<style>
#two {
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="first">1</option>
<option value="second">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" 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 pic = document.querySelector("#two iframe")
var s = val.substring(0, val.indexOf('?resize='));
var ss= val.substring(val.lastIndexOf(',10'));
var f = s + ?resize= + '400' + ss;
var s = s + ?resize= + '500' + ss;
if(val==="first"){
pic.setAttribute('src','f')
} else if(val==="second"){
pic.setAttribute('src','s')
}
}
</script>
</html>
Any one can find solution of that problem:
I test write that code in JavaScript and running good:
var s = 'https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100';
s = s.substring(0, s.indexOf('?resize='));
document.write(s);
document.write('<br>');
document.write('<br>');
var ss = 'https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100';
ss = ss.substring(ss.lastIndexOf(',10'));
document.write(ss);
document.write('<br>');
document.write('<br>');
rr = s+"?resize="+"500"+ss
document.write(rr);
this code give result: https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=500,100
change 200 and add 500.