CODEWITHSUNDEEP
javascripthtmlimageerror-handling
Regular User
Regular User

Reputation: 511

Create image when button is clicked JS

I have a function that should create an image when button is clicked

    <script>
      var RestyledButton  = document.querySelector('#RestyledButton');
      RestyledButton.onclick = function () {
    function show_image(src, width, height) {
        var img = document.createElement("img");
        img.src = "https://badzingerauto.com/wp-content/uploads/2021/08/0-02-0a-9f28adad47f010eda8970ef447fc0a0c48bc08b66d6f61dd5ac3c17ea3602f75_157750a049205ef1-1024x768.jpg";
   //error//     img.width = 1024px;
        img.height = 768px;
    
    
        // This next line will just add it to the <body> tag
        document.body.appendChild(img);
    }
      };
    
    
      var UnrestyledButton = document.querySelector('#UnrestyledButton');
      UnrestyledButton.onclick = function () {
    function show_image(src, width, height) {
        var img = document.createElement("img");
        img.src = "https://badzingerauto.com/wp-content/uploads/2021/08/0-02-0a-cf2e0f59f9ecbadf6b08b1108448506868d680ca23b181b5d7891493d575962d_ee21b4da7f002dbb-1024x768.jpg";
        img.width = 1024px;
        img.height = 768px;
    
    
        // This next line will just add it to the <body> tag
        document.body.appendChild(img);
    }
      };
    </script>

Script should display only one image and if I click on another botton it should delete first image and show another. But it doest't work. It has error Uncaught SyntaxError: Invalid or unexpected token on this string //error// img.width = 1024px;

Upvotes: 1

Views: 54

Answers (2)

Siddharth Kumar
Siddharth Kumar

Reputation: 168

  <script>
    var RestyledButton = document.getElementById('RestyledButton');
    function show_image(src, width, height) {
        var img = document.createElement("img");
        img.setAttribute('src', "https://badzingerauto.com/wp-content/uploads/2021/08/0-02-0a-9f28adad47f010eda8970ef447fc0a0c48bc08b66d6f61dd5ac3c17ea3602f75_157750a049205ef1-1024x768.jpg");
        img.setAttribute('width', '1024px');
        img.setAttribute('height', '768px');


        // This next line will just add it to the <body> tag
        document.body.appendChild(img);
    }


    var UnrestyledButton = document.getElementById('UnrestyledButton');
    function show_image(src, width, height) {
        var img = document.createElement("img");
        img.setAttribute('src', "https://badzingerauto.com/wp-content/uploads/2021/08/0-02-0a-cf2e0f59f9ecbadf6b08b1108448506868d680ca23b181b5d7891493d575962d_ee21b4da7f002dbb-1024x768.jpg");
        img.setAttribute('width', '1024px');
        img.setAttribute('height', '768px');


        // This next line will just add it to the <body> tag
        document.body.appendChild(img);
    }
</script>

Remove the UnrestyledButton.onclick = function (){} or RestyledButton.onclick = function ()

Upvotes: 2

Siddharth Kumar
Siddharth Kumar

Reputation: 168

For your error, I have done like this

<script>
  var RestyledButton  = document.querySelector('#RestyledButton');
  RestyledButton.onclick = function () {
function show_image(src, width, height) {
    var img = document.createElement("img");
    img.setAttribute('src' , "https://badzingerauto.com/wp-content/uploads/2021/08/0-02-0a-9f28adad47f010eda8970ef447fc0a0c48bc08b66d6f61dd5ac3c17ea3602f75_157750a049205ef1-1024x768.jpg");
    img.setAttribute('width' , '1024px');
    img.setAttribute('height', '768px');


    // This next line will just add it to the <body> tag
    document.body.appendChild(img);
}
  };


  var UnrestyledButton = document.querySelector('#UnrestyledButton');
  UnrestyledButton.onclick = function () {
function show_image(src, width, height) {
    var img = document.createElement("img");
    img.setAttribute('src',"https://badzingerauto.com/wp-content/uploads/2021/08/0-02-0a-cf2e0f59f9ecbadf6b08b1108448506868d680ca23b181b5d7891493d575962d_ee21b4da7f002dbb-1024x768.jpg");
    img.setAttribute('width', '1024px');
    img.setAttribute('height', '768px');


    // This next line will just add it to the <body> tag
    document.body.appendChild(img);
}
  };
</script>

According to your error, you should change that to setAttribute() to avoid the error.

Upvotes: 1

Related Questions