Question 37147 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

I am struggling to change imag src using attr – Jquery

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.

Tags:

3

Answers


  1. 0

    Your jQuery selectors #myPic and id="#myFeet" don’t match. Also you don’t 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"
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search