单击按钮时创建图像 JS

Question

我有一个函数可以在单击按钮时创建图像

    <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>

脚本应该只显示一张图片，如果我点击另一个按钮，它应该删除第一张图片并显示另一张。但它不起作用。此字符串 //error// img.width = 1024px;

有错误 Uncaught SyntaxError: Invalid or unexpected token

Answer 1

对于您的错误，我这样做过

<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>

根据您的错误，您应该将其更改为 setAttribute() 以避免错误。

Answer 2

  <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>

删除UnrestyledButton.onclick=function(){}或RestyledButton.onclick=function()

单击按钮时创建图像 JS

Create image when button is clicked JS

html

javascript

error-handling

image