First of all, no Jquery and iframe question does NOT solve my question, please don't address to it. i don't even understand that, just started learning javascript today. I want to change the picture in the right frame by clicking to a button in my head frame I have tried using contentWindow too, it did not work. The changing picture script works for same frame, there is a problem in accessing other frames my javascript version is 1.7
index.html
<!DOCTYPE html>
<html lang="tr" dir="ltr">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<frameset rows="30%, 70%" noresize>
<frame id="head" name="head" src="head.html">
<frameset cols="50%, 50% noresize">
<frame id="left" name="left" src="left.html">
<frame id="right" name="right" src="right.html">
</frameset>
<body>
<script type="text/javascript">
window.frames['head'].document.getElementById('button1').addEventListener('click', () => {
window.frames['right'].document.getElementById('image1').src = ('https://www.planetware.com/wpimages/2020/04/iceland-best-waterfalls-seljalandsfoss.jpg');
})
</script>
</body>
</html>
head.html
<!DOCTYPE html>
<html lang="tr" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Site Title</h1>
<button name="button1" id="button1">Next</button>
</body>
</html>
right.html
<!DOCTYPE html>
<html lang="tr" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="https://learnenglishteens.britishcouncil.org/sites/teens/files/styles/article/public/field/image/rs930_135120665-low.jpg?itok=g5LI5W4C" alt="picture" id ="image1" name="image1">
</body>
</html>
this is how the site looks how it looks
