here I am trying to change the image source property with the help of javascript but it is not working my case how can I change this .some one suggest me change in code.so that is can work in my case.
this is the CSS file for formatting the HTML code. here I am using both logos from the internet. also changing the background and background is changed but imaged is not changed.
function hello() {
console.log(document.getElementsByTagName("img").src);
document.getElementsByTagName("img").src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}h2 {
text-align: center;
}
body {
margin: auto;
padding: 5px;
}
#maincontent {
text-align: center;
}
.btn {
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="door.css" />
<script src="main.js"></script>
<title>Door</title>
</head>
<body>
<h2 text-align="center">Open The Door</h2>
<div id="maincontent">
<img
src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
id="hero"
width="400px"
height="600px"
/>
</div>
<div class="btn">
<button id="workbtn" onclick="hello();">Open Door</button>
</div>
</body>
</html>