JavaScript图像没有变化

时间:2017-05-16 12:39:28

标签: javascript html

我的目标是在点击图像时立即更改为另一个图像。用户可以点击他或她想要的次数并且图像不断变化。但是当我点击图像时没有任何反应。

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>

0 个答案:

没有答案