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() {
    noCanvas();
    button1 = select("#thisButton");
    button1.mousePressed(addChamp);

    createElement("img", champImg);
}

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

I dont think the html file is needed, but.

<!DOCTYPE html>
<html>
<head>
    <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>

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

</body>
</html>

Thankss

Answers

Sign In or Register to comment.