...

View Full Version : How do you make a button do multiple tasks?



robe01
04-01-2012, 08:34 PM
I'm trying to create a button where I can click on it and it changes the colour of text. When I click the same button again, it will change the text to another colour. It would be helpful if someone could show me how to do it please.:thumbsup:

Philip M
04-01-2012, 09:52 PM
Is this what you mean?


<span id = "mytext">Some text in here</span><br><br>
<input type = "button" value= "Change Text Color" onclick = "changeIt()">

<script type = "text/javascript">

var colnumber = 0;
var colors = ["red", "blue","green","yellow"];

function changeIt() {
var s = document.getElementById("mytext");
s.style.color = colors[colnumber];
colnumber ++;
if (colnumber > (colors.length-1)) {colnumber = 0}
}

</script>


"When large numbers of men are unable to find work, unemployment results." - Calvin Coolidge

Mishu
04-02-2012, 02:24 AM
It would be helpful if someone could show me how to do it please.:thumbsup:

(I am assuming you are teaching yourself javascript and so this is not assesable homework since pm has provided an option)

What you are trying to do lends itself very nicely to using a ternary. If you haven't seen ternaries before, this easy tutorial (http://javascript.about.com/od/byexample/a/ternary-example.htm) shows what they are and how they work.

And this is how a ternary could be used for your task.



<p id="par1">The cow jumped over the moon</p>
<div>
<button onclick="changeTextColor('par1')">Change text color</button>
</div>

<script type="text/javascript">
var colours = ['black','red','green'];
var curColor = 0;

function changeTextColor(elemID){
curColor = (++curColor == colours.length)? 0 : curColor; //this is the ternary that toggles the current color
document.getElementById(elemID).style.color = colours[curColor];
}
</script>or if you don't want to use a ternary you could just have


function changeTextColor(elemID){
if(++curColor == colours.length) {curColor = 0;}
document.getElementById(elemID).style.color = colours[curColor];
}

Logic Ali
04-02-2012, 04:08 AM
I'm trying to create a button where I can click on it and it changes the colour of text. When I click the same button again, it will change the text to another colour.

In case you need to do it in multiple places (and it's not a homework question).

<!DOCTYPE html>
<html>
<head>
<title>Colour Cycler</title>
</head>
<body style='background-color:#ccc'>
<p id='p1'><b>Cycle Colours</b> <input type='button' id='b1' value='->'>
<p id='p2'><b>Cycle Colours</b> <input type='button' id='b2' value='->'>

<script type='text/javascript'>

function cycleColour( btnId, elemId, table )
{
var control = document.getElementById( btnId ),
elem = document.getElementById( elemId );

control.onclick = function()
{
table.push( table.shift() );
elem.style.color = table[ 0 ];
}

elem.style.color = table[ 0 ];
}

cycleColour( 'b1', 'p1', [ 'red', 'lightgreen', 'black', 'blue' ] );

cycleColour( 'b2', 'p2', [ '#f84', '#d0d', '#ff0', '#0ee', '#fff' ] );

</script>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum