Show only 1 image and it’s phrase

Hello, it’s been long time we discussed here 🙂

I want to create a simple calculator, where you click the button and you get the phrase of the day + picture of that phrase. I need the help of the CFF Master 🙂

My results appear in HTML content field with name: fieldname5 with class:
<div class=”result-here”></div>

I added 5 images with ‘hide’ class in these fields: fieldname6; fieldname7; fieldname8; fieldname9; fieldname10.

My function don’t work correctly with images, I think I don’t understand about the data type of the fieldname6; fieldname7; fieldname8; fieldname9; fieldname10. So the function is bad when I talk about images in it 🙂

Now, only phrase appears and image don’t appear.
The thing should be that only 1 random phrase appear and the image of that phrase appears with the phrase too. Other images remains hidden.

My function looks like this:

jQuery('#fbuilder').on('click', function() {
(function() {
var result = Math.floor(Math.random() * 5) + 1;

var phrases = [
"Phrase No. 1",
"Phrase No. 2",
"Phrase No. 3",
"Phrase No. 4",
"Phrase No. 5"
];

var phrase = phrases[result - 1];
jQuery('.result-here').html(phrase);

fieldname6.style.display = 'none';
fieldname7.style.display = 'none';
fieldname8.style.display = 'none';
fieldname9.style.display = 'none';
fieldname10.style.display = 'none';

if (result === 1) {
fieldname6.style.display = 'block';
} else if (result === 2) {
fieldname7.style.display = 'block';
} else if (result === 3) {
fieldname8.style.display = 'block';
} else if (result === 4) {
fieldname9.style.display = 'block';
} else if (result === 5) {
fieldname10.style.display = 'block';
}

return result;
})();
});

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer