尝试在JS中添加图像转换器

如何解决尝试在JS中添加图像转换器

我的目标是在单击图像后切换图像，并在再次单击第二个图像后再次返回原始图像。我希望这是有道理的。我已经尝试了两天，但没有成功。任何帮助将不胜感激。

/ *全局文档* /

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>

解决方法

此代码应正常工作：

index.html

<!doctype html>
<html>
<head>
    <title>My Test Page</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
    <a onclick="onimg1 = false; onimg2 = true;" style="cursor: pointer;">
    <div style="display: none;" id="img1">
        <img src="img1">
    </div></a><a onclick="onimg2 = true onimg1 = false;">
    <div style="display: none;" id="img2">
        <img src="img2">
    </div></a>
    
</body>
</html>

script.js

//declare the variables
        var onimg1 = true;
        var onimg2 = false;

        //check for variable values
        if(onimg1) {
            document.getElementById("img1").style = "display: block;";
        }
        if(onimg2) {
            document.getElementById("img2").style = "display: block;";
        }

只需替换图像文件的名称即可。

我已修复您的代码。您的代码中有一个错误，即您没有提到文件扩展名，无论是.jpg还是setAttribute中的任何其他格式。因此，假设您的老式打字机为jpg格式，那么如果您有另一种图像格式，只需将jpg替换为该格式，然后尝试重新运行此代码，该代码将起作用。


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

我已经编辑了完整的代码，您可以用以下代码替换您的代码。它将起作用。

<!DOCTYPE html>
<html lang="en">
<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>

</body>
<script>
    var cactusImage = document.querySelector('img');
    cactusImage.onclick = function () {
      var myImages = cactusImage.getAttribute('src');
      if(myImages === 'images/cactus.jpg') {
        cactusImage.setAttribute ('src','images/cactus.jpg');  
      }
    }
</script>
</html>

天哪！因此，我采纳了“ Vipul”的建议，将代码包装在script>中，并将代码嵌入到我以前没有做过的HTML文件中，瞧。我要感谢大家提出的建议。希望有一天我能回馈。

最好

<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>
    
    <button>Change name</button>
    
    <script src="scripts/myscripts.js"> </script>
    
    <script>
var cactusImage = document.querySelector('img');
cactusImage.onclick = function () {
  var myImages = cactusImage.getAttribute('src');
  if(myImages === 'images/cactus.jpg') {
    cactusImage.setAttribute ('src','images/old-typewriter.jpg');
  } else {
    cactusImage.setAttribute ('src','images/cactus.jpg');  
  }
}

var myHeading = document.querySelector（“ h1”） myHeading.textContent ='善良'; ->