Javascript Change DIV background color onclick
33,368
Solution 1
<? $message="dd"; ?>
<script>
function change(col) {
document.getElementById('col').style.backgroundColor=col;
}
</script>
<form action="" method="post">
<input type='search' name='keywords' value='' style="width:100%;">
<a href='#col'>
<input type=submit value='Submit' name='doSearch' style="visibility: hidden;" onclick="enter(this.href)" />
</a>
</form>
<div style="width:50px; height:50px;" id="col" onclick="location.href='index2.php';" >
<br/>
<?php echo $message ?>
</div>
<? if(isset($_POST['keywords'])){ ?>
<script>
change('<?=$_POST['keywords']?>');
</script>
<? } ?>
test it, it works by inserting the color on the keywords input
Solution 2
You could do this easily with jQuery:
$("#yourID").click(function(){
$(this).css("background-color","yellow");
});
Solution 3
have a look here: http://jsfiddle.net/TeFYV/
code
var colors = ["red", "blue", "yellow", "green", "orange", "black", "cyan", "magenta"]
function changeColor() {
//you can as well pass col reference as you do in your code
var col = document.getElementById("changecolor");
col.style.backgroundColor = colors[Math.floor((Math.random()*8)+1)];
}
Adapt to your needs, hope it helps
Author by
user1190466
Updated on July 05, 2022Comments
-
user1190466 almost 2 years
I'm trying to change the colour of a div after a form has been submitted. The div on the new page should be in the colour selected.
JS
function change(col) { col.style.backgroundColor = '<?php echo $colour ?>'; }
HTML
<form action="" method="post"> <input type='search' name='keywords' value='' style="width:100%;"> <a href='#col'> <input type=submit value='Submit' name='doSearch' style="visibility: hidden;" onclick="change(this.href)" /> </a> </form> <div id="col" onclick="location.href='index2.php';"> <br/> <?php echo $message ?> </div>