如何通过单击 JavaScript 中的按钮来更改文本和图像？

可以使用 javascript 函数更改图像和文本，然后通过单击按钮调用这些函数。我们将分为 3 个部分。在第一部分中，我们将仅使用HTML创建结构，在第二部分中，我们将使用简单的CSS进行最少的设计以使其具有吸引力，在第三部分中，我们将添加JavaScript代码到执行任务

• HTML 代码：在本节中，我们创建结构，并为按钮设计和字体添加 Bootstrap cdn 链接。

HTML

   
      
      
      
   
   
      

         

            

            

               

                   Hii! GeeksforGeeks people
               
               
            
            

         
      
      

         
             Before
         
         
             Afterr
         
      
   

• CSS 代码：在本节中，我们将使用一些基本的 CSS 样式来使其看起来尽可能正常。

CSS

• Javascript 代码：在本节中，我们将定义 JavaScript 函数，并拍摄了两张图片，它们存在于单独的“img”文件夹中。

Javascript

    function before(){
        document.getElementById('myImage')
        .src="img/photo1.jpg";
        document.getElementById('message')
        .innerHTML="Hii! GeeksforGeeks people";
    }
      
    function afterr(){
        document.getElementById('myImage')
        .src="img/photo2.jpg";
        document.getElementById('message')
        .innerHTML="Bye! GeeksforGeeks people";
    }

完整代码：是上述 HTMl、CSS 和 JavaScript 代码的组合。

html

   
      
      
      
      
         img{
         height: 500px;
         width: 450px;
         }
         h1{
         color: darkgreen;
         margin-top: 20px;
         font-family: Comic Sans MS, cursive, sans-serif;
         }
         .button{
         margin-left: 45%;
         }
      
      
         function before(){
             document.getElementById('myImage')
             .src="img/photo1.jpg";
             document.getElementById('message')
             .innerHTML="Hii! GeeksforGeeks people";
         }
           
         function afterr(){
             document.getElementById('myImage')
             .src="img/photo2.jpg";
             document.getElementById('message')
             .innerHTML="Bye! GeeksforGeeks people";
         }
      
   
   
      
         
            
            
               
                   Hii! GeeksforGeeks people
               
               
            
            
         
      
      
         
             Before
         
         
             Afterr
         
      
   

输出：

CSS 是网页的基础，用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。