Thunderforge Posted October 26, 2016 Share Posted October 26, 2016 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 More sharing options...
justsomeguy Posted October 26, 2016 Share Posted October 26, 2016 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 More sharing options...
Thunderforge Posted October 27, 2016 Author Share Posted October 27, 2016 (edited) 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 October 27, 2016 by Thunderforge Link to comment Share on other sites More sharing options...
justsomeguy Posted October 27, 2016 Share Posted October 27, 2016 You can access those properties using pickColour.text and pickColour.image. Link to comment Share on other sites More sharing options...
Ingolme Posted October 27, 2016 Share Posted October 27, 2016 <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 More sharing options...
dsonesuk Posted October 27, 2016 Share Posted October 27, 2016 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 More sharing options...
Thunderforge Posted October 27, 2016 Author Share Posted October 27, 2016 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 More sharing options...
johnniewalk Posted December 15, 2016 Share Posted December 15, 2016 All you have to do his write a perfect html code including css.. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 15, 2016 Share Posted December 15, 2016 Thanks again for stating the b obvious, the problem is this is a javascript issue Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now