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

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

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

HTML

   
      
      
      
   
   
      

         

            

            

               

                   Hii! GeeksforGeeks people
               
               
            
            

         
      
      

         
             Before
         
         
             Afterr
         
      
   

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

的CSS

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

Java脚本

    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
         
      
   

输出：