My goal is to have the image switch once it's been clicked and back again to the original image once the second image has been clicked again. I hope that makes sense. I've been trying this for two days with no success. Any help would be appreciated.

/\* global document \*/

```
var cactusImage = document.querySelector('img');

cactusImage.onclick = function () {
  var myImages = cactusImage.getAttribute('src');
  if(myImages === 'images/cactus.jpg') {
    cactusImage.setAttribute ('src','images/old-typewriter');
  } else {
    cactusImage.setAttribute ('src','images/cactus.jpg')    
  }

```

}

---

```
<head> <!-- Content in the head element will not be displayed by browers-->  

    <meta charset="utf-8">
    <title> My Sample webpage</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
    <link href="stylesheets/mystyle.css" rel="stylesheet" type="text/css"> 

</head>

<body>

    <h1>Hello World !</h1> <!-- the size can be changed with css-->  

    <!-- <p class="para">It's a start of a new day</p>-->
    <img src="images/cactus.jpg" alt="cactus">
    <p class="para">Let us try to be</p>
    <ul>
        <!-- this is an unordered list--> 

        <li> Kind</li>
        <li> Time</li>
        <li> Why</li>
        <li> Who</li>

    </ul>

    <p id="quote">The plan is to create a site that looks like this <a href="http://truecrimediary.com/">one</a>, which was created by a popular mystery writier.</p>

    <!-- <script>

    var myHeading = document.querySelector("h1")

    myHeading.textContent = 'Be Kind' ;

    </script> -->

</body>

```