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