I want to make like and dislike button with javascript. I'm trying to make toggle function, when clicked the button thumbs up color become dark blue, if clicked thumbs down become dark red. But it seems not working, the color is not fixed. And also I want to count the like, the user only get 1 chance vote, like or dislike.
This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa-thumbs-up:hover{
color:darkblue;
}
.fa-up{
color:darkblue;
}
.fa-thumbs-up:before{
display: flex;
margin-left: 4px;
margin-bottom: 3px;
}
.fa-thumbs-down:hover{
color:darkred;
}
.fa-thumbs-down:before {
display: flex;
margin-left: 4px;
}
</style>
<button name="button1" type="button1" style="font-size:10px">0   | <i onclick ="myFunction()" id = "btn" class="fa fa-thumbs-up"></i></button>
<button name="button2" type="button2" style="font-size:10px">0   | <i onclick ="myFunction2()" class="fa fa-thumbs-down"></i></button>
<script>
var btn = document.getElemetById('btn');
function myFunction(){
if(btn.classList.contains("fa")){
btn.classList.remove("fa");
btn.classList.add("fa-up");
}else{
btn.classList.remove("fa-up");
btn.classList.add("fa");
}
}
</script>
</body> </html>
All help is appreciated. Thank you very much.
Updated your code to work like you want:
<!DOCTYPE html><html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
button i{
transition: .3s all ease;
}
.btn_up.clicked,.btn_up:hover i{
color: darkblue;
}
.btn_down.clicked,.btn_down:hover i{
color: darkred;
}
.fa-thumbs-up:before{
display: flex;
margin-left: 4px;
margin-bottom: 3px;
}
.fa-thumbs-down:before {
display: flex;
margin-left: 4px;
}
</style>
<button class="btn_up" onclick ="myFunction(this)" name="button1" type="button1" style="font-size:10px">0   | <i class="fa fa-thumbs-up"></i></button>
<button class="btn_down" onclick ="myFunction(this)" name="button2" type="button2" style="font-size:10px">0   | <i class="fa fa-thumbs-down"></i></button>
<script>
var btn_up = document.querySelector('.btn_up');
var btn_down = document.querySelector('.btn_down');
function myFunction(elem){
elem.classList.toggle('clicked');
if(elem === btn_up){
btn_down.classList.remove('clicked');
}else{
btn_up.classList.remove('clicked');
}
}
</script>
</body> </html>
Related
I want to add dropdown to my current nav bar. I tried this code but dropdown content disappeared and now I don´t have any ideas to edit code to this be working. After my last edit it´s only show dropdown menu but I don´t click on any link. Dropdown, dropbtn was added to previous code. Can you help me with this? Thanks very much!
Here is code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon" href="menu.png" />
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
height: 100%;
background-image: linear-gradient(orange, red);
}
</style>
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: linear-gradient(orange, red);
min-height: 100%;
background-position: full;
background-size: ;
}
</style>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.header {
overflow: hidden;
background-color: orange;
padding: 20px 10px;
}
.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: red;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn:hover ~ .dropdown-content {display: block;}
</style>
</head>
<body onload="startTime()">
<div class="header">
<a id="txt" hidden></a>
<img src="https://i.ibb.co/6Nkbdb3/dlhemenu-1-1-1.png" class="logo" title="Odhlásiť sa" alt="MENU logo" width="150" height="50" onclick="window.location='/logout.php'">
 
<a class="dropbtn"><i class="fa fa-user"> </i>Dropdown
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="header-right">
<a class="active" href="/welcome.php">Úvodné menu</a>
Online hodiny
Testy na vyplnenie
Známky
Rozvrh hodín
Dochádzka
Učebný materiál
Hry
O mne
</div>
</div>
For this case I would suggest using Bootstrap, it will make life easier for you. It mainly allows people to apply some nice functionalities without leaving their HTML.
Here is the link to the docs of bootstrap v4.6 navbars. And here you can find all the docs.
You could try to integrate something as bellow in your website:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" defer></script>
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
</head>
<body>
<!-- Start of navbar -->
<nav class="navbar navbar-expand-sm navbar-dark" style="background:#FFBD35">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<!-- Section_1 link -->
<li class="nav-item active">
<a class="nav-link" href="#">Úvodné Menu<span class="sr-only">(current)</span></a>
</li>
<!-- Section_2 link -->
<li class="nav-item">
<a class="nav-link" href="#">Online hodiny</a>
</li>
<!-- Section_3 link -->
<li class="nav-item">
<a class="nav-link" href="#">Testy na vyplnenie</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-user"></i> Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- End of navbar -->
</body>
</html>
if i understand your question correctly you are searching for a simple dropdown menu with js?
here is a short excample
HTML:
<html lang="en">
<head>
<!-- your header settings -->
<link rel="stylesheet" href="page.css">
</head>
<body>
<header>
<span id="dropbtn">
<span class="fa fa-user"></span>
<span>Dropdown</span>
<span class="fa fa-caret-down"></span>
</span>
<div id="dropdown-content" class="hidden">
Link 1
Link 2
Link 3
</div>
</header>
<script src="menu.js"></script>
</body>
</html>
First in this excample HTML, CSS and JS in seperated Files. Than you get a better overview and your code perhaps will be reuseable in future ;)
CSS:
.hidden {
display:none;
}
JavaScript:
function clickListener_btn(event){
/** #type {HTMLElement} */
let clickedElement = event.currentTarget();
/** #type {HTMLElement} */
let dropDownMenu = document.querySelector('#dropdown-content');
if(dropDownMenu.classList.has('hidden') {
dropDownMenu.classList.remove('hidden');
} else {
dropDownMenu.classList.add('hidden');
}
}
/** #type {HTMLElement} */
let btn = document.querySelector('#dropbtn');
btn.addEventListener('click', clickListener_btn);
Problem No. 1 with your code. You click on a <a> Tag as button. So a new Link will be forced. That automaticly runs a reload if you have no href set. This is because in the sample a simple <span> element is used as button.
i hope this will be helpfully to you.
And another thing. I'm very sure there are tons of questions for dropdown menus in the database. Try to find samples to fix your code.
Another trick can be to do the dropdown only with css but i think this will be to hard for the beginning. ohterwise use your favorite search engine on look for "css only dropdown"
I am currently working on an app. I have a navigation menu that I can open and close using a button, but whenever I load the app the menu is open. I have tried <div id="navigation" style="display:none;"> but that just stops it from opening. I would prefer that this be in HTML, JavaScript, and/or simple CSS, but no jQuery. Also I would like to change the text in the button (span TogNavTxt) to open or close depending on weather the button would open the menu or close the menu. I tried document.getElementById(TogNavTxt).innerHTML = Close; but it didn't work.
index.html:
<!DOCTYPE html>
<html>
<style>
.btn-group button {
background-color: #3333ff;
width: 100%;
border: 1px solid Black;
color: white;
padding: 2px 10px;
cursor: pointer;
float: left;
}
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
}
.btn-group button:hover {
background-color: #0000b3;
}
</style>
<head>
<link rel="stylesheet" type="text/css" href="Home.css">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
<title>ZcoolUnity</title>
</head>
<body>
<button onclick="ToggleNav('navigation');">Open</button>
<div id="navigation">
<div class="btn-group">
<button><b>Home</b></button>
<button>ZU Games</button>
<button>Community Games</button>
<button>Announcments</button>
<button>Staff</button>
<button>Contact Me</button>
<button>Assets</button>
</div>
</div>
<script type="text/javascript" src="Home.js"></script>
</body>
</html>
Home.js:
function ToggleNav(navigation) {
var e = document.getElementById(navigation);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
Even though you've already accepted an answer, I'm posting this for completeness — it gets rid of the inline styles and inline event handlers, as I mentioned in my comment, and separates the html, css, and javascript (Separation of Concerns — "SoC")
Semantic markup uses classes that describe what something is and/or the state of something, so this describes the navigation block as being either open or closed. What is meant by open or closed is then left up to the style-sheet.
I also changed the <div id="navigation"> to <nav id="navigation"> ... if you're using HTML5 you ought to use the new semantic tags that are available.
I've commented out the <link rel="stylesheet" ...> and the <script src="Home.js"> because a "Stack-snippet" automatically includes them as part of the snippet. Also note that type="text/javascript" is no longer needed in HTML5.
(Stack Snippets! jsfiddles no longer needed!)
function ToggleNav(event) {
let nav = document.getElementById('navigation');
console.log('click triggered');
let navClasses = nav.classList;
if (nav.classList.contains('closed')) {
nav.classList.remove('closed');
nav.classList.add('open');
}
else {
nav.classList.remove('open');
nav.classList.add('closed');
}
}
document.getElementById('toggle-nav')
.addEventListener('click', ToggleNav);
#navigation, #navigation.open {
display: block;
}
#navigation.closed {
display: none;
}
.btn-group button {
background-color: #3333ff;
width: 100%;
border: 1px solid Black;
color: white;
padding: 2px 10px;
cursor: pointer;
float: left;
}
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
}
.btn-group button:hover {
background-color: #0000b3;
}
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="Home.css"> -->
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
<title>ZcoolUnity</title>
</head>
<body>
<button id="toggle-nav">Open</button>
<nav id="navigation" class="closed">
<div class="btn-group">
<button><b>Home</b></button>
<button>ZU Games</button>
<button>Community Games</button>
<button>Announcments</button>
<button>Staff</button>
<button>Contact Me</button>
<button>Assets</button>
</div>
</nav>
<!-- <script src="Home.js"></script> -->
</body>
</html>
Basically your JS misses some " around the "navigation".
To have it closed on start, add display:none and set the new Button text via innerHTML on a element. On an input-tag with type="button", set the value instead.
HTML:
<div id="navigation" style="display: none;">
<div class="btn-group">
<button><b>Home</b></button>
<button>ZU Games</button>
<button>Community Games</button>
<button>Announcments</button>
<button>Staff</button>
<button>Contact Me</button>
<button>Assets</button>
</div>
</div>
<button id="togglebtn" onclick="toggleNav();">Open</button>
<input id="toggleinput" onclick="toggleNav();" value="Open" type="button">
JS:
function toggleNav(){
var e = document.getElementById("navigation");
if(e.style.display == 'none'){
e.style.display = 'block';
document.getElementById("togglebtn").innerHTML = "Close";
document.getElementById("toggleinput").value = "Close";
} else{
e.style.display = 'none';
document.getElementById("togglebtn").innerHTML = "Open";
document.getElementById("toggleinput").value = "Open";
}
}
Watch in action here:
https://codepen.io/anon/pen/BVwVrg
Just add the following css:
#navigation {
display: none;
}
That hides the menu by default.
Here's a jsfiddle with some other changes (not a lot) that works:
https://jsfiddle.net/md8njv2y/8/
I have a div with icon, and a textbox.
this is the code:
<div id="Backtb1">
<i class="fa fa-envelope" id="envelope" aria-hidden="true"></i>
</div>
<asp:TextBox ID="TextBox1" CssClass="TextButtons" runat="server" placeholder="Username" ></asp:TextBox>
and the css for both Backtb1 and textbox1:
.TextButtons {
position: relative;
border: none;
border-radius: 4px;
width: 130%;
height: 30px;
font-family: Calibri;
font-size: 120%;
font-weight: bold;
opacity: 0.6;
border: 1px solid #888;
background-color: #888;
margin-bottom: 2px;
-webkit-transition: width .35s ease-in-out;
transition: width .35s ease-in-out;
}
.TextButtons:focus{
width: 115%;
outline:0;
border: 1px solid;
border-color: orange;
opacity: 1;
}
#Backtb1 {
position: absolute;
top:0;
left:0;
opacity:0;
width: 130%;
color: white;
}
#Backtb1:focus {
background-color: orange;
opacity:1;
}
I am trying to call the Backtb1 events after textbox1 gets focus.
So, the Backtb1 should get the opacity to 1 after I click the textbox1.
how can this be done? just on css or should I use jquery or javascript?
EDIT: since Vishal Kumar Sahu wanted full page code. this is it:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Dope.Login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="assets/CSS/LoginStylesheet.css" rel="stylesheet" />
<link href="assets/fontawesome/css/font-awesome.css" rel="stylesheet" />
<link href="assets/fontawesome/css/font-awesome.min.css" rel="stylesheet" />
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 7000);
}
document.addEventListener("DOMContentLoaded", function (event) {
startTimer();
});
var images = [], x = -1;
images[0] = "assets/Images/Image1.jpg";
images[1] = "assets/Images/Image2.jpg";
images[2] = "assets/Images/Image3.jpg";
images[3] = "assets/Images/Image4.jpg";
$("#textbox1").focus(function () {
$('#Backtb1').css("opacity", "1");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="CenterContents" onload = "changeImage()">
<%-- write everything here --%>
<%-- backgroundimage --%>
<img id="img" src="assets/Images/Image3.jpg">
<div id="Shadows">
</div>
<div id="CenterPanel">
<div id="wot">
<div id="Backtb1">
<i class="fa fa-envelope" id="envelope" aria-hidden="true"></i>
</div>
<asp:TextBox ID="TextBox1" CssClass="TextButtons" runat="server" placeholder="Username" ></asp:TextBox>
<asp:TextBox ID="TextBox2" CssClass="TextButtons" runat="server" placeholder="Password"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</div>
<%-- dont write anything lower than this --%>
</div>
</form>
</body>
</html>
It is possible with CSS-only using the ":focus hack" when you switch the position of the textbox and the backtb1-div in the html code. Because you set an absolute position to backtb1 this should be a possible solution for you.
Run the code snippet and you'll see the backtb1 appearing and disappearing when the textbox gains/loses focus:
#backtb1 {
display: none;
background-color: red; color: white; border-radius: 7px;
max-width: 100px; font-family: sans-serif; font-weight: bold;
text-align: center; margin: 4px 0 0 0;
}
#textbox1:focus ~ #backtb1 {
display: block;
}
<input type="password" id="textbox1">
<div id="backtb1">
<i class="fa fa-envelope" id="envelope" aria-hidden="true">Got focus</i>
</div>
If they would have been adjacent (+) or parent child (>) then it was easy to do with CSS. But this time you need to it with jQuery as below-
jQuery(document).ready(function($) {
$( "#textbox1" ).focus(function() {
$('#Backtb1').css("opacity","1");
});
});
Update
Add this script to link jQuery to make the above code work.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
or better you can utilise jQuery.toggleClass.
Alternate suggestion for your problem is -
Just use
< asp : TextBox ID="TextBox1" CssClass="TextButtons" runat="server" placeholder="Username" >
and have this CSS to make the envelope appear before the text box when input gets focus.
#textbox1:focus:before{
content: "\f003";
font-family: FontAwesome; /* Add relevant CSS */
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
Hope it will reduce few lines of code.
I'm trying to show a bootstrap glyphicon on the rigth side on my link when I am hovering it.
I've tried using both CSS an JS but it just wont work. So i need som help :)
This is what I am trying to do: When i hoover Foo, I want the pencil icon to show. And so on. The same is going to happen when i hoover 'Bar' and 'This is a link' also
I also want it to be a button.
This is how the html looks like:
<div class="nesting">
<span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <div class="pull-right"><span class="glyphicon glyphicon-pencil" area-hidden="true"></div>
<div class="nesting_child">
<span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar
<span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link
Thank you for your help :)
Answer updated:
check this fiddle, hope this is exactly what you are looking for,
//html
<div class="nesting">
<span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <span class="pencil glyphicon glyphicon-pencil"></span>
<div class="nestchild">
<span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar<span class="pencil glyphicon glyphicon-pencil"></span>
<span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link<span class="pencil glyphicon glyphicon-pencil"></span>
</div>
</div>
//javascript
$(document).ready(function(){
$('.nesting a').hover(function(){
$(this).children('span.pencil').css({'display' : 'inline-block'});
},function(){
$(this).children('span.pencil').css({'display' : 'none'});
});
});
//css
.foo-class { float:left; padding : 3px; width:300px; min-width:300px; }
.nesting span.pencil { float:right; }
.nestchild a { clear: both;display : block; }
.nesting { background-color:#ccc; width:300px;}
.nesting a {width:285px;}
.nesting a .pencil {display : none; }
.nestchild { margin-left : 15px; }
Add a "hidden" class and an id to your pencil div and an id to you "Foo" anchor:
<a href="#" class="nesting-item" id="foo">
<span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo
<div id="pencil-glyph" class="pull-right hidden">
<span class="glyphicon glyphicon-pencil" area-hidden="true"></span>
</div>
</a>
CSS:
.hidden { display: none; }
Then add an hover event listener to your anchor (e.g. using jQuery) which adds/removes the hidden class (https://api.jquery.com/hover/):
$('#foo').hover(function () {
$('#pencil-glyph').removeClass('hidden');
}, function () {
$('#pencil-glyph').addClass('hidden');
});
You can use the background-color of the div as glyphicon's color and on hovering the div/glyphicon you can enable the glyphicon.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
button{
font-size: 30px;
background: white;
border: 2px solid blue;
margin-top: 10px;
border-radius: 2px;
box-sizing: border-box;
color: blue;
cursor: pointer;
padding: 10px 24px;
transition: box-shadow 200ms;
}
button:hover{
font-size: 30px;
background:blue;
border: 0;
border-radius: 2px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
padding: 10px 24px;
transition: box-shadow 200ms;
}
span{
color:white;
}
span:hover {
}
</style>
<body>
<div class="container">
<button type="button">
text<span class="glyphicon glyphicon-ok" ></span>
</button>
<button type="button">
text1<span class="glyphicon glyphicon-ok" ></span>
</button>
<button type="button">
text2<span class="glyphicon glyphicon-ok" ></span>
</button>
</div>
</body>
</html>
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Wolf and Rabbit Game</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="wolf&rabbit_game.css">
<script src="wolf&rabbit_game.js"></script>
</head>
<body>
<table>
<tr>
<td id="tableCell"></td>
</tr>
</table>
<input id="button1" type="button" value="I'm red" onclick="setColorRed">
<input id="button2" type="button" value="I'm green" onclick="setColorGreen">
</body>
</html>
My CSS file:
table{
text-align: center;
margin: auto;
}
td{
border: 1px black solid;
width: 25px;
height: 25px;
}
#button1,#button2{
text-align: center;
margin-top: 20px;
font-size: 1em;
font-family: Myriad Pro;
font-weight: semibold;
color: white;
border-radius: 15px;
padding: 1%;
}
#button1{
background: red;
}
#button2{
background: green;
}
body{
text-align: center;
}
img{
width: 25px;
height: auto;
}
My JavaScript file:
function setColor(){
if ("#button1").click {
document.getElementById("#tableCell").style.backgroundColor="red";
};
if ("#button2").click {
document.getElementById("#tableCell").style.backgroundColor="green";
};
};
Check this JS Fiddle
JsFiddle link
There is no need of calling two different methods on two different buttons, a single method to accept the color parameter and change the desired element's color is good enough.
You have to modify your code like this and make sure javascript code comes before your button markup.
<script>
function setColor(color){
document.getElementById("tableCell").style.backgroundColor=color;
};
</script>
<table>
<tr>
<td id="tableCell">test</td>
</tr>
</table>
<input id="button1" type="button" value="I'm red" onclick="setColor('red')">
<input id="button2" type="button" value="I'm green" onclick="setColor('green')">