Random picture with corresponding data from database on a dynamic page

Ask the community
,
4
  1. First lesson!
    The shown code of you is (NOT) the right format! That was not, what Kristof was asking for.

Here an example, how to do it right…

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(function () {console.log("CODE-STARTED")
 let myQuery = wixData.query("vocabulary")
 
    myQuery.find()
    .then((res) => {console.log(res)
 let randomNumber =  Math.floor((Math.random() * res.items.length)); 
 let randomItem = res.items[randomNumber];
        console.log("randomNumber = ", randomNumber)
        console.log("randomItem = ", randomItem)

 if (wixWindow.rendering.renderCycle === 1) {console.log("Render-Cycle = 1")
 let items = res.items;
 let count = items.length;   
 let rnd = Math.floor(Math.random() * count);

            console.log("items: ", items)
            console.log("count: ", count)
            console.log("rnd: ", rnd)

            $w('#image1').src = items[rnd].image;} 
        }
    })
});


function check_answer(inputVal, answerVal, resultEl) {
 if (inputVal.toLowerCase() === answerVal.toLowerCase()) {
        resultEl.text = "correcto";
    } 
 else {resultEl.text = "incorrecto";}
}

export function button1_click(event) {   
    check_answer($w("#input1").value, $w("#text2").text, $w("#text1"));
}

  1. Second lesson! If you want to understand your own CODE, try to use much more CONSOLE-LOGs! This little console-helper, will show you the right way to code!

  2. Last lesson!
    Just to put some parts of CODE together, found somewhere in the world-wide-web, will not solve your problem —> you will have to understand your own CODE.

To do it the best way, you should do a plan, of your CODE, something like a little overview…

  1. Starting CODE with —> onReady()
  2. Quering the database
  3. using the results of the found items to define some variables and sonstants
  4. which step next ?
  5. what to do next?
  6. what do i want to have as end-result…
  7. and so on…

As you can see, i already have tried to modify your code. This shall not be the end-code, of course you have to modify and correct it even more.

In every of your CODES, you have to set the imports to the very top of your CODE!!!

import wixWindow from 'wix-window';
import wixData from 'wix-data';

following by “global-variables”, for example or constants…(if you use some)

var myGlobalVariable
const myGlobalConst

and then directly after these two, you should start with —> $w.onReady().
This will be the starting point of your CODE.
And of course you should use just —> ONE <— onReady()-function in your page!

$w.onReady(function() {console.log("CODE-STARTED")}

I think, Kristof will do the rest of lessons to learn :wink:

Good luck!

(And remember —> use more console-logs! You can see all logs in the Wix-Editor on the very bottom, or you can do the same, when you press F-12 in GOOGLE-CHROME for example.)