Reputation:
I'm having trouble changing the color of a button with a simple function, the color doesn't change at all.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript">
function changeColor(){
document.getElementsByTagName('button').style.backgroundColor="green";
}
</script>
</head>
<body >
<form action="/action_page.php" method="get" name="form1">
<input type="text" id="campoDeFlores">
<button type="button" onclick="changeColor()" name="1">1</button>
<button type="button" name="2">2</button>
<button type="button" name="3">3</button>
</form>
</body>
</html>
Why does it not work?
Upvotes: 7
Views: 35243
Reputation: 1
im testing *thisfunction randomcolour(){ document.getElementsByTagName('button').style.backgroundColor=
${ var num = Math.floor(Math.random() * Math.pow(2, 24));
return '#' + ('00000' + num.toString(16)).substr(-6);}`;
}`*
Upvotes: 0
Reputation: 151
If you have a lot of button and you want to color and uncolor it by clicking it.you can use if statement inside event listener.This feature is used specific in booking something.
HTML
<button class="btnco">1</button>
<button class="btnco">2</button>
CSS
.btnco{
background-color: green;
}
JS
document.querySelectorAll('.btnco').forEach(function(e) {
e.addEventListener('click', function() {
if (this.style.backgroundColor=="red"){
this.style.backgroundColor="green"
}else{
this.style.backgroundColor = "red";
}
})
});
Upvotes: 0
Reputation: 2469
Make following changes:
changeColor
function to accept a HTMLElement as
parameter. changeColor()
. Change
onclick="changeColor()"
in button
element to
onclick="changeColor(this)"
function changeColor (htmlEl) {
htmlEl.style.backgroundColor="green";
}
<form action="/action_page.php" method="get" name="form1">
<input type="text" id="campoDeFlores">
<button type="button" onclick="changeColor(this)" name="1">1</button>
<button type="button" name="2">2</button>
<button type="button" name="3">3</button>
</form>
Upvotes: 0
Reputation: 3898
You are better off using id="myButton"
and document.getElementById('myButton')
to specifically select a button instead of every button
.
Upvotes: 1
Reputation: 6060
Try this:
<form action="/action_page.php" method="get" name="form1">
<input type="text" id="campoDeFlores">
<button type="button" onclick="changeColor(this)" name="1">1</button>
<button type="button" name="2">2</button>
<button type="button" name="3">3</button>
</form>
function changeColor(btn) {
btn.style.backgroundColor = "green";
}
At first I thought you were trying to change the color of all the buttons because you were using getElementsByTagName
but it looks like you just want to change the color of the button that was pressed. In that case you don't need to use an array. Just pass the element that was clicked to the function and then change that specific button's color.
Upvotes: 1
Reputation: 1370
document.getElementsByTagName
returns an list of elements not a single element. You need to convert it to an array with Array.from
and then iterate over the buttons with Array.map
function changeColor(){
Array.from(document.querySelectorAll('button')).map(function(button) {
button.style.backgroundColor="green";
})
}
Upvotes: 6