Jump to content

Image chooser


Thunderforge

Recommended Posts

Hi, can anyone help me with this - I keep drawing blanks!

 

A button which throws up a random word from an array, which is fine, I've got that.

 

But I want it to also display an image based on that result, i.e.; from var colourPicker('red','blue','green'); then if, for example, text=='red' then the image displayed is Red.gif

 

I'm sure it's simple to do but I can't get it to work! Any help would very much be appreciated.

 

Thanks,

Thunderforge

Link to comment
Share on other sites

The easiest way would probably be to have an array of objects where you can store multiple pieces of information, so you pick a random object and then use the various parts of it.

 

var ar = [
  {
    text: 'red',
    image: 'red.jpg'
  },
  {
    text: 'cyan',
    image: 'verdigris.jpg'
  },
  ...
];
Link to comment
Share on other sites

I didn't know you could combine different types of thing in a variable!

 

Of course I don't know how to separate the parts again afterwards...

 

This is my code, presumably I need a function to id the image as well?

 

<html>
<button onclick="someFunction()">COLOUR</button>
<br>
<text id="chooseColour"></text>
<img id="chooseColour"></img>
<script>
var colourText = [
{text: 'RED', image: 'Images/Red.gif'},
{text: 'GREEN', image: 'Images/Green.gif'},
{text: 'BLUE', image: 'Images/Blue.gif'},
];
function someFunction() {
var pickColour = colourText [Math.floor(Math.random()*colourText .length)];
document.getElementById("chooseColour").innerHTML = pickColour; }
</script></html>
Edited by Thunderforge
Link to comment
Share on other sites

 

<text id="chooseColour"></text>
<img id="chooseColour"></img>

You have two elements with the same ID. That's not going to work.

<text> is not a valid HTML element, either, try <div> or <span> depending on if you want a block or an inline element.

<img> does not have a closing tag. It should have a src and alt attribute even if they're blank, those can be changed later with Javascript if necessary.

Link to comment
Share on other sites

html

        <button onclick="someFunction()">COLOUR</button>
        <span id="chooseColour"></span><img id="chooseImage" src=""  alt="">

In its simplest form all you require is the colour names

var colourText = ['RED', 'GREEN', 'BLUE'];

Folder path to avoid duplication

var imgFolder = "images/"

A random number which will represent the index ref starting from Zero, 0 = 'RED', 1='GREEN' and so on.. This random number is produced with

var pickColour = Math.floor(Math.random() * colourText.length);

Then using random value apply index ref to get value from colourText to element with id 'chooseColor' as is

document.getElementById("chooseColour").innerHTML = colourText[pickColour];

Then manipulate same result to add image file folder path, and change value to lowercase so 'RED' will become 'red', 'GREEN' will become 'green' and finally add image file extension '.gif' , then add to src of img element with id 'chooseImage'

document.getElementById("chooseImage").src = imgFolder + colourText[pickColour].toLowerCase() + ".gif";

Just make sure all image names are lowercase.

Link to comment
Share on other sites

Haha! You guys are awesome!! :-D

 

I haven't exactly done what you each suggested but I've got what I wanted and needed everything you all said!

 

[@dsonesuk - that is a very eloquent way of condensing it, which I like very much; but in the bigger project this is all going into would probably be too restricting for me.]

 

Here is my final code;

 

<html>
<button onclick="justTextFunc()">COLOUR</button><br>
<span id="justChoseText"></span><br>
<img id="justChosePic" src="" alt="Click the button!">
<script>
var justText = [{text: 'RED', image: 'Red.gif'}, {text: 'GREEN', image: 'Green.gif'}, {text: 'BLUE', image: 'Blue.gif'}, ];
function justTextFunc() {
var pickText = justText [Math.floor(Math.random()*justText.length)];
document.getElementById("justChoseText").innerHTML = pickText.text;
document.getElementById("justChosePic").src = pickText.image;
}
</script></html>
Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...