Ref: the External JavaScript sub-lesson.
In the above lesson example (code below) , to make it even more interesting,
how would I, in addition to the <p>, add an <img>?
function createParagraph() {
let para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
@DigitalEngine the process for creating an image would be very similar to the paragraph. Create a new DOM element:
let img = document.createElement('img');
Populate the <img> element with the image you want to display (this starts the image loading from the server):
img.src = 'path/to/my/image.png'
And then add the image to the page:
document.body.appendChild(img);
Of course, when you are running the example online rather than locally, you might want to wait until the image is loaded before appending it to the page, so something like this would be more robust:
let img = document.createElement('img');
img.addEventListener('load', function() {
document.body.appendChild(img);
});
img.src = 'path/to/my/image.png'
Thanks Chris!
So for the benefit of other students, using your help, this is what I came up with (a little extra added in too). I also changed some of the nomenclature from the original examples in order to hopefully illustrate what is happening here.
Using your first example;
function createResponce() {
let heading = document.createElement('h2');
heading.textContent = 'You clicked the button! Why did you do that!';
document.body.appendChild(heading);
let para = document.createElement('p');
para.textContent = 'What will happen if you click the button again?';
document.body.appendChild(para);
let fireTruck = document.createElement('img');
fireTruck.src = '../../images/fire-truck-320.png'
document.body.appendChild(fireTruck);
}
const buttons = document.querySelectorAll('button');
for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createResponce);
}
or using your second example;
function createResponce() {
let heading = document.createElement('h2');
heading.textContent = 'You clicked on the button! Why did you do that!';
document.body.appendChild(heading);
let para = document.createElement('p');
para.textContent = 'See what happens if you click the button again!';
document.body.appendChild(para);
let fireTruck = document.createElement('img');
fireTruck.addEventListener('load', function() {
document.body.appendChild(fireTruck);
});
fireTruck.src = '../../images/fire-truck-320.png';
}
const buttons = document.querySelectorAll('button');
for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createResponce);
}
Three different examples are linked;
A picture says a thousand words, and in this case the images really helped me understand how this javascript works! Thanks again Chris!