Loading image in html from javasript

Hi. At first I wanted to show the image of the champion of the list, when their names are added. But I couldnt, so tried something easiest, but I couldnt either xD. Why it is not working ?
The "createElement" is not working.

let counter = 0 ;
let button1;
let champ = ["Shaco", "Zac", "Velkoz", "Ezreal"];
let champImg;

function preload(){
    champImg = loadImage(`https://image.ibb.co/gdEFk7/campeon0_jpg.jpg`);
function setup() {
    button1 = select("#thisButton");

    createElement("img", champImg);

function addChamp(){
    let listChamp;
    listChamp = createElement("li", champ[counter]);
    if(counter === 4){
        counter = 0;

I dont think the html file is needed, but.

<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>A HA!!</title>

    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.dom.js"></script>
    <script src="libraries/p5.sound.js"></script>
    <script src="sketch.js"></script>

    <h1>What am I doing ?</h1>
    <p>A wonderfull list of my LoL mains </p>
    <ul id = "listElements">
    <button id = "thisButton"> Add the champs </button>




Sign In or Register to comment.