我的目标是在点击图像时立即更改为另一个图像。用户可以点击他或她想要的次数并且图像不断变化。但是当我点击图像时没有任何反应。
alert("Hey, I'm alive");
window.onload = function () {
var d = new Date();
var time = d.getHours();
var greetingSpan = document.getElementById('greeting');
if (time < 12) {
greetingSpan.innerText = "Good Morning!"
}
else if (time < 18 && time > 12) {
greetingSpan.innerText = "Good Afternoon!"
}
else {
greetingSpan.innerText = "Good Night!"
}
var image = document.getElementById('welcomeImg');
image.onclick = function () {
var imgSrc = image.getAttribute('src');
if (imgSrc === 'images/image1.jpg') {
var imgSrc = image.setAttribute('src', 'images/image2.jpg');
}
else if (imgSrc === 'images/image2.jpg') {
var imgSrc = image.setAttribute('src', 'images/image1.jpg');
}
}
};
这是html:
<!DOCTYPE html>
<html>
<head>
<?php include('head.php') ?>
</head>
<body>
<div id="page-wrap">
<?php include('menu.php') ?>
<h1>Welcome to T-Shirts Inc. <span id="greeting"> </span></h1>
<h2>This site is still under construction</h2>
<p>
<img src="images/image1.jpg" id="listImage"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu
porta purus. Fusce ut ornare est. Nulla eget urna eget massa malesuada condimentum. Aenean aliquet dictum sem
at sagittis. Sed in ante blandit, ornare nisi quis, molestie velit. Nullam metus risus, convallis id est sed,
tincidunt consectetur purus. Nulla vitae leo ultricies, consectetur mi vel, fermentum quam.
</p>
<p>
Sed hendrerit metus at sodales suscipit. Integer tincidunt sapien vitae ligula dignissim ullamcorper. Donec eget euismod
nibh, a ultricies velit. Nam eu pulvinar lacus. Integer ornare nunc sed leo tempor lobortis. Maecenas ut erat
sit amet purus rhoncus luctus id vitae neque. Etiam rhoncus lacus enim, quis sollicitudin est volutpat ut. Fusce
at erat at mauris euismod convallis non faucibus lacus. Sed lobortis quis enim elementum placerat. Cras iaculis
luctus est in sollicitudin. Nam gravida quam eu suscipit facilisis. Morbi ut elementum dolor. In ligula massa,
iaculis nec risus in, tincidunt malesuada ipsum. Vivamus dictum facilisis lacus eu aliquam. Donec eleifend diam
magna, sit amet mattis arcu bibendum quis. In cursus feugiat sem nec ullamcorper.
</p>
<p>
Cras venenatis ligula et tortor auctor ultrices. Phasellus ipsum nisi, blandit at eleifend ut, volutpat ut neque. Praesent
aliquet eu massa ut tristique. Sed sed justo vitae eros imperdiet tempor. Integer mollis mi id hendrerit ullamcorper.
Curabitur vel ipsum ligula. Suspendisse eget libero velit.
</p>
<script src="scripts/behaviour.js">
type = "text/javascript"
</script>
</div>
</body>
</html>