Javascript 尝试在js中添加图像转换器_Javascript_Function_Onclick

Javascript 尝试在js中添加图像转换器

javascript function

Javascript 尝试在js中添加图像转换器,javascript,function,onclick,Javascript,Function,Onclick,我的目标是在单击图像后切换图像，并在再次单击第二个图像后返回到原始图像。我希望这是有道理的。我已经试了两天没有成功。任何帮助都将不胜感激 /*全球文件*/ var cactusImage = document.querySelector('img'); cactusImage.onclick = function () { var myImages = cactusImage.getAttribute('src'); if(myImages === 'images/cactus.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');
  } else {
    cactusImage.setAttribute ('src','images/cactus.jpg')    
  }

}


我的样本网页
你好，世界！
让我们试着

亲切的
时间
为什么
谁

计划创建一个类似这样的网站，它是由一位受欢迎的神秘作家创建的

此代码应适用于：

index.html

<!doctype html>
<html>
<head>
    <title>My Test Page</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
    <a onclick="switchImg()">
        <img src="img1.png" id="img">
    </a>
    
</body>
</html>

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

我已修复了您的代码。您的代码中有一个错误，即您没有提到文件扩展名，无论是.jpg格式还是setAttribute中的任何其他格式。如果你的旧打字机是jpg格式的，那么如果你有另一种格式的图像，那么这段代码可以工作，只要用这种格式替换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/old-typewriter.jpg');
      } else {
        cactusImage.setAttribute ('src','images/cactus.jpg');  
      }
    }
</script>
</html>


我的样本网页
你好，世界！
让我们试着

亲切的
时间
为什么
谁

计划创建一个类似这样的网站，它是由一位受欢迎的神秘作家创建的
var cactusImage=document.querySelector（'img'）；
cactusImage.onclick=函数（）{
var myImages=cactusImage.getAttribute（'src'）；
如果（myImages==='images/cactus.jpg'）{
cactusImage.setAttribute（'src'，'images/old typewriter.jpg'）；
}否则{
cactusImage.setAttribute（'src'，'images/cactus.jpg'）；
}
}

天哪！所以我接受了“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 cactusImage=document.querySelector（'img'）；
cactusImage.onclick=函数（）{
var myImages=cactusImage.getAttribute（'src'）；
如果（myImages==='images/cactus.jpg'）{
cactusImage.setAttribute（'src'，'images/old typewriter.jpg'）；
}否则{
cactusImage.setAttribute（'src'，'images/cactus.jpg'）；
}
}

var myHeading=document.querySelector（“h1”） myHeading.textContent='bekind'；

-->我测试了你的代码，它是有效的，你能证明整个代码可能会遗漏一些东西吗。我提供的代码在单独的js上。文件夹。根据我提供的示例，它是在课堂上编写的，讲师让我们在单独的js中创建代码。在HTML之外。这是HTML代码。我感谢您的帮助。今晚我将实现代码，并在本周晚些时候进行更新。我看到您提供的代码是针对HTML的，但我将问题中列出的代码写在myscripts.js文件中。我仍然会尝试，但我想把代码保存在js中。文件夹，如果可能的话。我知道你已经有了一个解决方案，但是我为其他看到这个问题的人编辑了答案。我将在本周晚些时候尝试这段代码，并会让你知道它是否有效。我感谢你的帮助！因此，我输入了您建议的代码，遇到了一个（意外的令牌）错误，停止了扫描。我已经尝试过了。如果您在脚本标记中添加了预标记，请删除预标记，或者只是复制我编辑的代码，然后用旧打字机图像格式替换.jpg。请让我知道。如果您可以共享旧打字机图像的图像格式，我可以向您发送完整的固定代码。谢谢，Vipul。我将输入您建议的关于.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/old-typewriter.jpg');
      } else {
        cactusImage.setAttribute ('src','images/cactus.jpg');  
      }
    }
</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');  
  }
}