dynamicContentWithJS.html

<script>
function changeContent(idx){

var content = [
 {text: "flavio", img: "https://i.pinimg.com/originals/81/6d/a5/816da533638aee63cfbd315ea24cccbd.jpg" },
 {text: "ricardo", img: "https://ih1.redbubble.net/image.369380617.6838/flat,800x800,075,f.u4.jpg" },
 {text: "antonio", img: "https://static.boredpanda.com/blog/wp-content/uploads/2017/03/Evil-Cats-Demons-Summoning-Satan-125-58d223c94bf80__605.jpg" },
]

document.getElementById('btn'+idx).innerHTML = content[idx].text;
document.getElementById('text').innerHTML = content[idx].text;
document.getElementById('coolimage').src = content[idx].img;


console.log('hello world');
}


</script>


<button id="btn0" onclick="changeContent(0)"> option 1 </button>
<button id="btn1" onclick="changeContent(1)"> option 2 </button>
<button id="btn2" onclick="changeContent(2)"> option 3</button>


<div id="dynamicContent">

<div id="text" style="position: relative; display: inline-block; width: 50%; float: left;"> dshgjkdsgfhjgdsjfghjdgshfjghjdsgfjhgdhjsfghj dsfgh ghjg hjg</div>

<img style="position: relative;display: inline-block;  width: 50%; float: right;" id="coolimage" src="https://i.pinimg.com/originals/81/6d/a5/816da533638aee63cfbd315ea24cccbd.jpg" >

<div>