Luciano
Reputation: 21
Changing value of var when clicking button
I have been trying to figure out how to change the value of a var when clicking different buttons. I should be able to change between "Green" and "Yellow" to then set that background color when an element of the table is clicked. I dont know why when i click the GREEN button it works but not on the other one. Thank you very much in advance!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Table Highlighting</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
var color = 'blue';
$('button').click(function (){
color='#33FF36';
});
$('button2').click(function (){
color='#F0FF00';
});
$('td').toggle( function() {
$(this).css('background', color);
},function(){
$(this).css('background', 'white');
});
} );
</script>
<style>
table
{
border-collapse: collapse;
}
td
{
padding: 5px;
border: 1px solid #666666;
cursor: pointer;
}
</style>
</head>
<body>
<table width="160">
<tr>
<td width="40" height="40" align="center">11</td>
<td width="40" height="40" align="center">12</td>
<td width="40" height="40" align="center">13</td>
<td width="40" height="40" align="center">14</td>
</tr>
<tr>
<td width="40" height="40" align="center">21</td>
<td width="40" height="40" align="center">22</td>
<td width="40" height="40" align="center">
23</td>
<td width="40" height="40" align="center">24</td>
</tr>
<tr>
<td width="40" height="40" align="center">31</td>
<td width="40" height="40" align="center">32</td>
<td width="40" height="40" align="center">33</td>
<td width="40" height="40" align="center">34</td>
</tr>
<tr>
<td width="40" height="40" align="center">41</td>
<td width="40" height="40" align="center">42</td>
<td width="40" height="40" align="center">43</td>
<td width="40" height="40" align="center">44</td>
</tr>
</table>
<button id="button" >Green</button>
<button id="button2" >Yellow</button>
</body>
</html>Upvotes: 0
Views: 69
Answers (4)
Mojtaba Nava
Reputation: 878
You can use from this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Table Highlighting</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
var bgcolor = 'blue';
$('button').click(function (){
var x = document.getElementsByTagName('td');
x[0].style.backgroundColor = "#FF0000";
});
$('button2').click(function (){
var y = document.getElementsByTagName('tr');
y[1].style.backgroundColor = "#FF0040";
});
$('td').toggle( function() {
$(this).css('background', bgcolor);
}
,
function(){
$(this).css('background', 'white');
});
} );
</script>
<style>
table
{
border-collapse: collapse;
}
td
{
padding: 5px;
border: 1px solid #666666;
cursor: pointer;
}
</style>
</head>
<body>
<table width="160">
<tr>
<td width="40" height="40" align="center">11</td>
<td width="40" height="40" align="center">12</td>
<td width="40" height="40" align="center">13</td>
<td width="40" height="40" align="center">14</td>
</tr>
<tr>
<td width="40" height="40" align="center">21</td>
<td width="40" height="40" align="center">22</td>
<td width="40" height="40" align="center">
23</td>
<td width="40" height="40" align="center">24</td>
</tr>
<tr>
<td width="40" height="40" align="center">31</td>
<td width="40" height="40" align="center">32</td>
<td width="40" height="40" align="center">33</td>
<td width="40" height="40" align="center">34</td>
</tr>
<tr>
<td width="40" height="40" align="center">41</td>
<td width="40" height="40" align="center">42</td>
<td width="40" height="40" align="center">43</td>
<td width="40" height="40" align="center">44</td>
</tr>
</table>
<button id="button" >Green</button>
<button id="button2" >Yellow</button>
</body>
</html>Upvotes: 0
MichaelvE
Reputation: 2578
There were a few things wrong with your code, like no # in your id identifiers. I'm not too sure what you were trying to achieve with your toggle, but try the code out below and see if it's what you were looking for:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Table Highlighting</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var color = 'blue';
$(function() {
$('#button').on("click", function() {
color = '#33FF36';
changeBg();
});
$('#button2').on("click", function() {
color = '#F0FF00';
changeBg();
});
});
function changeBg() {
$('td').css('background', color);
}
</script>
<style>
table {
border-collapse: collapse;
}
td {
padding: 5px;
border: 1px solid #666666;
cursor: pointer;
}
</style>
</head>
<body>
<table width="160">
<tr>
<td width="40" height="40" align="center">11</td>
<td width="40" height="40" align="center">12</td>
<td width="40" height="40" align="center">13</td>
<td width="40" height="40" align="center">14</td>
</tr>
<tr>
<td width="40" height="40" align="center">21</td>
<td width="40" height="40" align="center">22</td>
<td width="40" height="40" align="center">
23</td>
<td width="40" height="40" align="center">24</td>
</tr>
<tr>
<td width="40" height="40" align="center">31</td>
<td width="40" height="40" align="center">32</td>
<td width="40" height="40" align="center">33</td>
<td width="40" height="40" align="center">34</td>
</tr>
<tr>
<td width="40" height="40" align="center">41</td>
<td width="40" height="40" align="center">42</td>
<td width="40" height="40" align="center">43</td>
<td width="40" height="40" align="center">44</td>
</tr>
</table>
<button id="button">Green</button>
<button id="button2">Yellow</button>
</body>
</html>Upvotes: 0
user9019817
Reputation:
You're not using an id selector on the buttons, they need changing from:
$('button').click(function (){
color='#33FF36';
});
$('button2').click(function (){
color='#F0FF00';
});
to:
$('#button').click(function (){
color='#33FF36';
});
$('#button2').click(function (){
color='#F0FF00';
});
Here's a working example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Table Highlighting</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
var color = 'blue';
$('#button').click(function (){
color='#33FF36';
});
$('#button2').click(function (){
color='#F0FF00';
});
$('td').toggle( function() {
$(this).css('background', color);
},function(){
$(this).css('background', 'white');
});
} );
</script>
<style>
table
{
border-collapse: collapse;
}
td
{
padding: 5px;
border: 1px solid #666666;
cursor: pointer;
}
</style>
</head>
<body>
<table width="160">
<tr>
<td width="40" height="40" align="center">11</td>
<td width="40" height="40" align="center">12</td>
<td width="40" height="40" align="center">13</td>
<td width="40" height="40" align="center">14</td>
</tr>
<tr>
<td width="40" height="40" align="center">21</td>
<td width="40" height="40" align="center">22</td>
<td width="40" height="40" align="center">
23</td>
<td width="40" height="40" align="center">24</td>
</tr>
<tr>
<td width="40" height="40" align="center">31</td>
<td width="40" height="40" align="center">32</td>
<td width="40" height="40" align="center">33</td>
<td width="40" height="40" align="center">34</td>
</tr>
<tr>
<td width="40" height="40" align="center">41</td>
<td width="40" height="40" align="center">42</td>
<td width="40" height="40" align="center">43</td>
<td width="40" height="40" align="center">44</td>
</tr>
</table>
<button id="button" >Green</button>
<button id="button2" >Yellow</button>
</body>
</html>Upvotes: 1
Esko
Reputation: 4207
Your selectors are wrong, if you want to select with id, use #id:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Table Highlighting</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
var color = 'blue';
$('#button').click(function() {
color = '#33FF36';
});
$('#button2').click(function() {
color = '#F0FF00';
});
$('td').toggle(function() {
$(this).css('background', color);
}, function() {
$(this).css('background', 'white');
});
});
</script>
<style>
table {
border-collapse: collapse;
}
td {
padding: 5px;
border: 1px solid #666666;
cursor: pointer;
}
</style>
</head>
<body>
<table width="160">
<tr>
<td width="40" height="40" align="center">11</td>
<td width="40" height="40" align="center">12</td>
<td width="40" height="40" align="center">13</td>
<td width="40" height="40" align="center">14</td>
</tr>
<tr>
<td width="40" height="40" align="center">21</td>
<td width="40" height="40" align="center">22</td>
<td width="40" height="40" align="center">
23</td>
<td width="40" height="40" align="center">24</td>
</tr>
<tr>
<td width="40" height="40" align="center">31</td>
<td width="40" height="40" align="center">32</td>
<td width="40" height="40" align="center">33</td>
<td width="40" height="40" align="center">34</td>
</tr>
<tr>
<td width="40" height="40" align="center">41</td>
<td width="40" height="40" align="center">42</td>
<td width="40" height="40" align="center">43</td>
<td width="40" height="40" align="center">44</td>
</tr>
</table>
<button id="button">Green</button>
<button id="button2">Yellow</button>
</body>
</html>Upvotes: 0
Related Questions
- Changing variable by html button
- Javascript - change value of variable on button click
- Change value when click a button
- Use Js to change a buttons onclick value
- Jquery .val() change the variable value by pressing the button
- how to change value of a button on click
- Change value of a button when clicked
- Javascript change variable using buttons
- setting var as clicked button value and using var
- Javascript: Changing variable on button click