时间戳

首页 > 解决方案 > 单击按钮时创建图像JS

javascript - 单击按钮时创建图像JS

问题描述

我有一个功能应该在单击按钮时创建图像

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

脚本应该只显示一个图像，如果我点击另一个按钮，它应该删除第一个图像并显示另一个。但它不起作用。Uncaught SyntaxError: Invalid or unexpected token这个字符串有错误//error// img.width = 1024px;

标签： javascripthtmlimageerror-handling

解决方案

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

推荐阅读