It seems to kinda work, but it won't load the picture
let element2 = document.getElementById("button3");
element2.addEventListener("click", () => {
let cat_result = document.getElementById("cat_result");
fetch('https://aws.random.cat/meow')
.then(res => res.json())
.then(data => {
cat_result.innerHTML = '<img src="${data.file}"/>'
})
});
HTML
<img src="" id="cat_result"/>
I believe, your html image tag like this. You can use setAttribute instead of innerHTML.
Js
let element2 = document.getElementById("button3");
element2.addEventListener("click", () => {
let cat_result = document.getElementById("cat_result");
fetch('https://aws.random.cat/meow')
.then(res => res.json())
.then(data => {
cat_result.setAttribute('src', data.file);
})
Hope, it will works.
Template literals need to have backticks (``) around them. More about them here
let element2 = document.getElementById("button3");
element2.addEventListener("click", () => {
let cat_result = document.getElementById("cat_result");
fetch('https://aws.random.cat/meow')
.then(res => res.json())
.then(data => {
cat_result.innerHTML = `<img src="${data.file}"/>`
})
});<button id="button3">click</button>
<div id="cat_result"></div>