Loading image in html from javasript

DDv2FF · March 2018

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

GoToLoop · March 2018

Something like this? :-/
http://Bl.ocks.org/GoSubRoutine/bef70ffdae5e1a052ade9c6b15f737cc

DDv2FF · March 2018

Mm, something like this.
https://preview.ibb.co/mgQhXn/Sin_t_tulo.png

But, first I want to load just one image in the html file from javascript. I think I have an idea of how to putt the images in the right order on the list, but that comes latter

DDv2FF · March 2018

I made it !! First, createElement("img", blabla); was wrong.
I should use createImg(src,[alt],[successCallback]); xd

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

let shacoUrl = "https://image.ibb.co/gdEFk7/campeon0_jpg.jpg";
let zacUrl = "http://oi66.tinypic.com/xm5p2r.jpg";
let velkozUrl = "http://oi64.tinypic.com/23krvps.jpg";
let ezrealUrl = "http://oi68.tinypic.com/1zp3ymd.jpg";

function setup() {
    noCanvas();

    button1 = select("#thisButton");
    button1.mousePressed(addChamp);
}

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

    let champsImg= [shacoUrl, zacUrl, velkozUrl, ezrealUrl];
    inputImg = createImg(champsImg[counter]);
    inputImg.parent("listElements");

    counter++;

    if(counter === 4){
        counter = 0;
    }
}

But, I would like to change the
if(counter === 4){ counter = 0 }
in some way, that reset the counter value depending of the champ.lenght. I tried
if(counter === champ.lenght) { counter = 0; } but it didnt work.

GoToLoop · March 2018

I believe you'd make things much simpler if you simply load & create everything in preload() & setup().

Then use hide() on them all:
https://p5js.org/reference/#/p5.Element/hide

And selectively show() the active p5.Element:
https://p5js.org/reference/#/p5.Element/show

In order to reset your counter's current index variable back to zero when it reaches the array's length, use the modulo (remainder) operator when you increment it:

Like this: counter = (counter + 1) % elementsArray.length;. :ar!

Howdy, Stranger!

Categories

In this Discussion

Loading image in html from javasript

Best Answers

Answers