Tengo una función que debería crear una imagen cuando se hace clic en el botón
<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> El script debe mostrar solo una imagen y si hago clic en otro botón, debe eliminar la primera imagen y mostrar otra. Pero no funciona. Tiene un error Uncaught SyntaxError: Invalid or unexpected token en esta cadena //error// img.width = 1024px;
<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>Elimina UnrestyledButton.onclick = function (){} o RestyledButton.onclick = function ()
Por tu error, he hecho así
<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>De acuerdo con su error, debe cambiar eso a setAttribute() para evitar el error.