I am struggling to change imag src using attr-CodePudding

I am new to JQuery and I have a simple script that is not working and I can't figure why. I want to change a image by using the attr(). I have tried puting the script in the head section and it didn't work. I have placed both the images in the same root file but still it doesn't work. What am I doing wrong?

    <!doctype html>
    <html lang="en">
    <head>
    <title>Testing JQuery</title>
    


    <link rel="stylesheet"  href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    
    </head>
    <body>

    <img src="20220801_021439_mfnr.jpg" 
      alt="my swollen feet" 
      heigth="500px" width="300px" 
      id="#myFeet">
     
    <script type="text/javascript">

     $(document).ready(function(){
       
   $("#myPic").attr("src","IMG-20201105-WA0000.jpg");
      });

   </script>
    </body>

I have also tried other JQuery instructions using attr() , those instruction too dont work but everything else does.

CodePudding user response：

Your jquerry selector #myPic and id="#myFeet" dont match. Also you dont put a # in front of the id in the id attribute. The # is only used in css and js.

id="#myPic"

Should just be

id="myPic"

CodePudding user response：

You could use the .attr() function to set attributes on given DOM element:

$('#id').attr('src', 'newImage.jpg');

to change the image source

In your case

<!doctype html>
    <html lang="en">
    <head>
    <title>Testing JQuery</title>
    


    <link rel="stylesheet"  href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    
    </head>
    <body>

    <img src="20220801_021439_mfnr.jpg" 
      alt="my swollen feet" 
      heigth="500px" width="300px" 
      id="myFeet">
     
    <script type="text/javascript">

     $(document).ready(function(){
       
   $("#myFeet").attr("src","IMG-20201105-WA0000.jpg");
      });

   </script>
    </body>

CodePudding user response：

ID must be same and id must be defined as id="myPic" not as id="#myPic" and id is wrong.

<!doctype html>
    <html lang="en">
    <head>
    <title>Testing JQuery</title>
        <link rel="stylesheet"  href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    
    </head>
    <body>

    <img src="20220801_021439_mfnr.jpg" 
      alt="my swollen feet" 
      heigth="500px" width="300px" 
      id="myPic">
     
    <script type="text/javascript">

     $(document).ready(function(){
       
   $("#myPic").attr("src","IMG-20201105-WA0000.jpg");
      });

   </script>
    </body>