Here is the code. You are supposed to get from the left square to the right one without exiting the blue div or entering the red one. The problem is that both the red div and its child, the right square have the same event listener, but one ends the game in a loss and the other one in a victory. Is there a way to fix this without redoing everything?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
text-align: center;
}
.outer {
width: 500px;
height: 500px;
border-style: solid;
border-color: black;
border-width: 1px;
position: absolute;
left: 36%;
right: 50%;
margin-top: 100px;
background-color: lightskyblue;
}
.mid {
width: 440px;
height: 440px;
border-style: solid;
border-color: black;
border-width: 1px;
margin-left: 30px;
margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
background-color: #ffbcbc;
}
.inner {
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 1px;
display: inline-block;
margin-top: 170px;
background-color: rgb(134, 255, 134);
}
#in1 {
float: left;
border-left: none;
}
#in2 {
float: right;
border-right: none;
}
</style>
</head>
<body>
<div class="outer" id="outer">
<div class="mid" id="mid">
<div class="inner" id="in1">
</div>
<div class="inner" id="in2">
</div>
</div>
</div>
<script>
let out = document.getElementById("outer")
let mid = document.getElementById("mid")
let in1 = document.getElementById("in1")
let in2 = document.getElementById("in2")
in1.addEventListener("mouseover", GameStart)
function GameOver() {
alert("Pokušajte ponovno")
out.removeEventListener("mouseleave", GameOver)
mid.removeEventListener("mouseenter", GameOver)
in2.removeEventListener("mouseenter", GameWon)
return
}
function GameWon() {
alert("Pobijedili ste")
out.removeEventListener("mouseleave", GameOver)
mid.removeEventListener("mouseenter", GameOver)
in2.removeEventListener("mouseenter", GameWon)
return
}
function GameStart() {
in1.addEventListener("mouseleave", Game)
}
function Game() {
in1.removeEventListener("mouseleave", Game)
out.addEventListener("mouseleave", GameOver)
mid.addEventListener("mouseover", GameOver)
in2.addEventListener("mouseenter", GameWon)
}
</script>
</body>
</html>
You need to do event capture in this case. And explicitly look for the e.target (the element which was clicked) from which the event was fired and handle that logic seperately.
In the demo example, I have mimicked your game example : Try this
document.querySelector(".parent").addEventListener("click",(e)=>{
if(e.target.className === "child1"){
console.log("Continue the game")
}
if(e.target.className === "child2"){
console.log("Game Over !!!")
}
})
.child1,.child2{
background:teal;
height:100px;
width:300px;
}
.child1{
margin-bottom:2rem;
}
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
Related
I am creating a Kanban Board in HTML/JS/CSS and am close to finishing my MVP here. Everything is working as expected, except for one thing. When I create a new task, I am able to drag it (seemingly) but not DROP it into any other columns. The sample tasks I have do not have this problem and I am ripping my hair out trying to figure out what the issue is. When I attempt to drag and drop newly created tasks into other columns, I get this error:
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at drop (/script.js:31:13)
at HTMLDivElement.ondrop (/:45:112)
I am using basic drag and drop API stuff for HTML and JS and literally only need to make this work in order to finish my MVP. Any help is appreciated. NOTE: The line numbers in the above error change based on what column I try to drop the new task into but the error itself stays the same.
Here is my code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Christopher's Kanban Board</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="new-task-window" id="new_task_form">
<div class="header">
<div class="title">New Task</div>
<button class="btn-close-window" data-target="#new_task_form">X</button>
</div>
<div class="body">
<input type="text" id="new-task-name" />
<input type="submit" value="New Task" id="new-task-submit" />
</div>
</div>
<!--Kanban Board-->
<div class="kanban-container">
<div class="kanban-container-section" id="todo" ondrop="drop(event)" ondragover="allowDrop(event)">
<strong>To Do</strong>
<div class="task-button-block">
<button class="task-button" id="task-button" data-target="#new_task_form">+ New Task</button>
</div>
<div class="task" id="task1" draggable="true" ondragstart="drag(event)">
<span contenteditable="true">Task #1</span>
<!--<button class="edit_button" id="edit_button">Edit</button>-->
</div>
<div class="task" id="task2" draggable="true" ondragstart="drag(event)">
<span contenteditable="true">Task #2</span>
</div>
<div class="task" id="task3" draggable="true" ondragstart="drag(event)">
<span contenteditable="true">Task #3</span>
</div>
<div class="task" id="task4" draggable="true" ondragstart="drag(event)">
<span contenteditable="true">Task #4</span>
</div>
</div>
<div class="kanban-container-section" id="inprogress" ondrop="drop(event)" ondragover="allowDrop(event)">
<strong>In Progress</strong>
</div>
<div class="kanban-container-section" id="done" ondrop="drop(event)" ondragover="allowDrop(event)">
<strong>Done</strong>
</div>
<div class="kanban-container-section" id=" blocked" ondrop="drop(event)" ondragover="allowDrop(event)">
<strong>Blocked</strong>
</div>
</div>
<div id="overlay"></div>
<script src="script.js"></script>
</body>
</html>
script.js:
const task = document.querySelector('.task');
const buttons = document.querySelectorAll("[data-target]");
const close_buttons = document.querySelectorAll(".btn-close-window");
//Allow the New Task Button to open the New Task Creation Window.
buttons.forEach(btn => {
btn.addEventListener('click', () => {
document.querySelector(btn.dataset.target).classList.add("active");
overlay.classList.add("active");
});
});
close_buttons.forEach((btn) => {
btn.addEventListener('click', () => {
document.querySelector(btn.dataset.target).classList.remove("active");
overlay.classList.remove("active");
});
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
const new_task_submit = document.getElementById("new-task-submit");
if(new_task_submit) {
new_task_submit.addEventListener('click', createTask);
}
function createTask() {
const task_div = document.createElement("div");
const input_value = document.getElementById("new-task-name").value;
//Take the text from the above input and create a task with that text.
const text = document.createTextNode(input_value);
task_div.appendChild(text);
//Add the proper class (task in this case) to the newly created task.
task_div.classList.add("task");
//Add the draggable attribute to the newly created task and set it to true to allow drag and drop.
if(task_div){
task_div.setAttribute("draggable", "true");
task_div.setAttribute("contenteditable", "true");
}
//task_div.innerHTML += `
//<div class="task" id="${input_value.toLowerCase().split(" ").join("")}"
//draggable="true" ondragstart="drag(event)>
//<span contenteditable="true">${input_value}</span>
//</div>
//`
//Add the new task to the To Do section of the Kanban Board.
const todo = document.getElementById("todo");
todo.appendChild(task_div);
document.getElementById("new-task-name").value = "";
new_task_form.classList.remove("active");
overlay.classList.remove("active");
}
style.css (the error would indicate that this file is not the problem):
.kanban-container {
display: grid;
grid-auto-columns: 250px;
grid-auto-flow: column;
grid-gap: 8px;
height: 100vh;
overflow: auto;
}
.kanban-container-section {
background: #EBEBEB;
border-radius: 3px;
display: grid;
grid-auto-rows: max-content;
grid-gap: 10px;
padding: 10px;
}
.kanban-container-section strong {
background: #2C89BF;
font-size: 16px;
margin: 0 0 12px 0;
padding: 10px;
}
.task {
background: #FFFFFF;
box-shadow: 0 1px 0 rgba(9,30,66,.25);
border-radius: 3px;
padding: 10px;
}
.task-button {
width: 40%;
background: #FFFFFF;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(9,30,66,.25);
border: 0.1rem;
cursor: pointer;
}
.task.button:active {
transform: scale(0.9);
}
.btn-close-window {
padding: 0.5rem 1rem;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
}
.new-task-window {
width: 450px;
position: fixed;
top: -50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
z-index: 2;
background-color:#FFFFFF;
}
.new-task-window.active {
top: 15%;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid #ccc;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
#overlay.active {
display: block;
}
#new-task-name, #new-task-submit {
padding: 1rem 1rem;
width: 90%;
margin: 0.25rem;
align-items: center;
}
#new-task-submit {
background-color: #2C89BF;
border: none;
color: #FFFFFF;
align-items: center;
}
Again, if anyone knows what my issue is here, the help is greatly appreciated. Thanks!
So I am having a couple of issues when using the voice library Artyom.js.
I have tried adding my own commands, and in theory, that should work. But the major issue is that the voice recognition stops immediately after enabling it. The following are the javascript, css and html files:
var five = require("johnny-five");
var keypress = require("keypress");
const artyom = new Artyom();
function startArtyom() {
artyom.initialize({
lang:"en-GB",
continous:true,
debug:true,
listen:true,
speed:1,
mode:"normal"
}).then(function(){
console.log("ready!");
})
}
var commandHello = {
indexes:["hello","good morning","hey"], // These spoken words will trigger the execution of the command
action:function(){ // Action to be executed when a index match with spoken word
artyom.say("Hey buddy ! How are you today?");
}
};
artyom.addCommands([commandHello]);
/*keypress(process.stdin);*/
/*var board = new five.Board();*/
body {
font-family: ebrima;
}
#body{
transition: all 3s ease-in-out;
}
#speech-cont {
background-color: gray;
height: 500px;
width: 90%;
margin-left: auto;
margin-right: auto;
border-radius: 0.5vh;
padding: 10px;
}
#speech-cont h3 {
text-align: center;
color: white;
font-family: ebrima;
font-weight: lighter;
}
#speech-cont #box {
border-style: solid;
border-color: black;
border-radius: 0.5vh;
background-color: white;
height: 70%;
width: 90%;
margin-left: auto;
margin-right: auto;
border-width: 1px;
}
#recognizeButton {
height: auto;
line-height: 30px;
width: 200px;
margin-left: 50%;
transform: translateX(-50%);
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="body">
<div id="speech-cont">
<h3>Speech to text recognition</h3>
<div id="box">
<h4 id="result">
</h4>
</div>
<button id="recognizeButton" onclick="startArtyom();">Recognize!</button>
</div>
<script src="artyom.win.min.js"></script>
<script src="main.js"></script>
</body>
</html>
As you see, I even straight up copy & pasted the example from Atryom.js' site to see if I had written a typo. Which turned out to not be the case.
I have absolutely no idea as to why artyom.js immediately stops voice recognition.
Thanks in advance :)
LTLFTP here.
I finally have a problem seemingly only you can solve. I'm trying to create an accordion style menu and I would like a transition effect. The problem is, whenever I change the max-height property, the transitions happen in the wrong order, the transition durations are not the same, and a mysterious delay shows up.
Any insight into this little problem would be wonderful. Thanks in advance. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css\default.css">
<style>
.content {
margin-top: 50px;
width: 1024px;
margin-left: auto;
margin-right: auto;
background-color: #fefefe;
border: 1px solid #888;
padding: 1em;
}
.title {
text-align: center;
}
.dresser {
border: 1px solid #888;
padding: auto 1em;
}
.dresser h2 {
margin: 0px;
padding: 2px;
background-color: #888;
color: #fefefe;
cursor: pointer;
}
.drawer {
padding: 0em 1em;
overflow-y: hidden;
max-height: 0px;
transition-property: max-height;
transition-duration: 2s;
}
</style>
</head>
<body onload="enableDresser();">
<div class="content">
<div class="title">
<h1>Dashboard</h1>
</div>
<div class="dresser">
<h2 class="drawerLabel"> <span>▸</span> Contact</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Links</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Documents</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<!-- <h2 class="drawerLabel"> <span>▸</span> Guides</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>-->
</div>
</div>
<script type="text/javascript">
var drawerLabels = document.getElementsByClassName("drawerLabel");
//console.log(drawerLabels);
function enableDresser() {
for (var i = 0; i < drawerLabels.length; i++) {
drawerLabels[i].onclick = function() {
openDrawer(this);
}
}
openDrawer(drawerLabels[1]);
}
function closeDresser() {
for (i=0; i<drawerLabels.length; i++) {
drawerLabels[i].firstElementChild.innerHTML = "▸";
drawerLabels[i].nextElementSibling.style.maxHeight = "0px";
}
}
function openDrawer(labelElement) {
closeDresser();
labelElement.firstElementChild.innerHTML = "▾";
labelElement.nextElementSibling.style.maxHeight = "1000px";
}
</script>
</body>
</html>
Went through a few questions on stackoverflow but could not solve the error.
The intention is to modify and add html to the main document reading a JSON structure.
Uncaught TypeError: Cannot read property 'appendChild' of undefined
Update 1:-
Typo was corrected, marked in code.
Defer was introduced at script load in head section, this makes sure the entire document is loaded before the script starts execution.
Here I am trying to read a JSON, and then looping across its content to add to my main html document.
var json={
"fruit":[
{
"fruitname":"Apple",
"location":"data/png/apple.png",
"quantity":"25",
"price":"2"
},
{
"fruitname":"Mango",
"location":"data/png/mango.png",
"quantity":"35",
"price":"3"
}
]
};
//var cards = document.getElementsByClassName("content"); -- corrected typo
var cards = document.getElementById("content");
var fruits = json.fruit;
//alert(fruits.length);
//alert(fruits[1].fruitname);
for (var i = 0; i < fruits.length; i++) {
var cardelement=document.createElement('div');
cardelement.className = 'card';
// alert(cardelement);
cards.appendChild(cardelement);
var object = document.createElement('div');
object.className = 'object';
// alert(object);
cardelement.appendChild(object);
var image = document.createElement('img');
image.setAttribute("src", fruits[i].location);
object.appendChild(image);
var objectback = document.createElement('div');
objectback.className = 'object-back';
cardelement.appendChild(objectback);
var backfruit = document.createElement('div');
backfruit.className = 'back-fruit';
backfruit.innerHTML = fruits[i].fruitname;
objectback.appendChild(backfruit);
var backprice = document.createElement('div');
backprice.className = 'back-price';
backprice.innerHTML = fruits[i].price + "$ per unit";
objectback.appendChild(backprice);
var backquantity = document.createElement('div');
backquantity.className = 'back-quantity';
backquantity.innerHTML = "In Stock " + fruits[i].quantity + " units";
objectback.appendChild(backquantity);
}
*
{
margin: 0 0;
border: none;
text-align:center
}
#header
{
background-color: #F44336;
font-family: 'Bungee Shade', cursive;
font-size: 30px;
height: 20%
}
#footer
{
font-family: 'Roboto', sans-serif;
position: fixed;
height: 80%;
width: 100%
}
#content
{
width: 75%;
height: 100%;
border-right: thick solid #F44336;
float: left;
text-align: left;
overflow: scroll
}
#cart
{
background-color:#3F51B5;
width: 25%;
border-bottom: thick dashed #F44336;
float: right
}
.card
{
display:inline-block;
width: 100px;
height: 100px;
margin: 40px;
padding: 20px;
box-shadow: -1px 9px 20px 4px #000000;
border: 5px solid #F44336;
border-radius: 26px 26px 26px 26px;
transition: all .2s ease-in-out
}
.object .object-back
{
display:block;
position:static
}
.object-back
{
display: none
}
.object img
{
height: 100px;
width: 100px
}
.back-fruit
{
font-size: 20px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: thin solid
}
.back-price
{
font-size: 12px;
padding-bottom: 5px
}
.back-quantity
{
font-size: 10px;
padding-bottom: 10px
}
.back-pluscart
{
font-size: 15px;
background-color: #F44336;
width: auto
}
.back-pluscart img
{
height: 30px;
width: 30px
}
.card:hover
{
box-shadow: -1px 9px 46px 11px #000000
}
.card:hover .object
{
display: none
}
.card:hover .object-back
{
display:inline-block;
opacity: 1
}
<!DOCTYPE html>
<html>
<head>
<title> The Shopkeeper </title>
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "style/style.css" />
<script type="text/javascript" src="logic/core.js" defer></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="base">
<div id="header">
<h1> Fruitkart </h1>
</div>
<div id="footer">
<div id="content">
<!--
<div class="card">
<div class="object">
<img src="data/png/apple.png" />
</div>
<div class="object-back">
<div class="back-fruit">Apple</div>
<div class="back-price">2$ per unit</div>
<div class="back-quantity">In Stock 25 pieces </div>
<div class="back-pluscart"> <img src="data/png/cart.png" /> </div>
</div>
</div>
-->
</div>
<div id="cart">
django
is a big boy
</div>
</div>
</div>
</body>
</html>
Why was content undefined
You try to get content by ClassName
var cards = document.getElementsByClassName("content")[0];
But find content in your html:
<div id="content">
Notice that the ID is content. Either change it to class="content" or change the previous code to document.getElementByID("content");
Two issues:
There is no element with class content. On the other hand there is an element with that id. So you probably want to do:
document.getElementById("content");
The script runs too soon -- the elements are not loaded yet when it runs. Either put the script just before the closing </body> tag, or put the code inside an event handler, like
window.addEventListener('DOMContentLoaded', function() {
// your code
});
You are trying to access an element with class name content var cards =document.getElementsByClassName("content")[0]; & there is no class named content
You can modify your code like this ,
var cards = document.getElementById("content");
var json={
"fruit":[
{
"fruitname":"Apple",
"location":"data/png/apple.png",
"quantity":"25",
"price":"2"
},
{
"fruitname":"Mango",
"location":"data/png/mango.png",
"quantity":"35",
"price":"3"
}
]
};
var cards = document.getElementById("content");
var fruits = json.fruit;
//alert(fruits.length);
//alert(fruits[1].fruitname);
for (var i = 0; i < fruits.length; i++) {
var cardelement=document.createElement('div');
cardelement.className = 'card';
// alert(cardelement);
cards.appendChild(cardelement);
var object = document.createElement('div');
object.className = 'object';
// alert(object);
cardelement.appendChild(object);
var image = document.createElement('img');
image.setAttribute("src", fruits[i].location);
object.appendChild(image);
var objectback = document.createElement('div');
objectback.className = 'object-back';
cardelement.appendChild(objectback);
var backfruit = document.createElement('div');
backfruit.className = 'back-fruit';
backfruit.innerHTML = fruits[i].fruitname;
objectback.appendChild(backfruit);
var backprice = document.createElement('div');
backprice.className = 'back-price';
backprice.innerHTML = fruits[i].price + "$ per unit";
objectback.appendChild(backprice);
var backquantity = document.createElement('div');
backquantity.className = 'back-quantity';
backquantity.innerHTML = "In Stock " + fruits[i].quantity + " units";
objectback.appendChild(backquantity);
}
*
{
margin: 0 0;
border: none;
text-align:center
}
#header
{
background-color: #F44336;
font-family: 'Bungee Shade', cursive;
font-size: 30px;
height: 20%
}
#footer
{
font-family: 'Roboto', sans-serif;
position: fixed;
height: 80%;
width: 100%
}
#content
{
width: 75%;
height: 100%;
border-right: thick solid #F44336;
float: left;
text-align: left;
overflow: scroll
}
#cart
{
background-color:#3F51B5;
width: 25%;
border-bottom: thick dashed #F44336;
float: right
}
.card
{
display:inline-block;
width: 100px;
height: 100px;
margin: 40px;
padding: 20px;
box-shadow: -1px 9px 20px 4px #000000;
border: 5px solid #F44336;
border-radius: 26px 26px 26px 26px;
transition: all .2s ease-in-out
}
.object .object-back
{
display:block;
position:static
}
.object-back
{
display: none
}
.object img
{
height: 100px;
width: 100px
}
.back-fruit
{
font-size: 20px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: thin solid
}
.back-price
{
font-size: 12px;
padding-bottom: 5px
}
.back-quantity
{
font-size: 10px;
padding-bottom: 10px
}
.back-pluscart
{
font-size: 15px;
background-color: #F44336;
width: auto
}
.back-pluscart img
{
height: 30px;
width: 30px
}
.card:hover
{
box-shadow: -1px 9px 46px 11px #000000
}
.card:hover .object
{
display: none
}
.card:hover .object-back
{
display:inline-block;
opacity: 1
}
<!DOCTYPE html>
<html>
<head>
<title> The Shopkeeper </title>
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "style/style.css" />
<script type="text/javascript" src="logic/core.js" ></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="base">
<div id="header">
<h1> Fruitkart </h1>
</div>
<div id="footer">
<div id="content">
<!--
<div class="card">
<div class="object">
<img src="data/png/apple.png" />
</div>
<div class="object-back">
<div class="back-fruit">Apple</div>
<div class="back-price">2$ per unit</div>
<div class="back-quantity">In Stock 25 pieces </div>
<div class="back-pluscart"> <img src="data/png/cart.png" /> </div>
</div>
</div>
-->
</div>
<div id="cart">
django
is a big boy
</div>
</div>
</div>
</body>
</html>
I'm trying to change colour of a button to show which images is displayed with JavaScript. Something similar to :Active in CSS. I've been looking for hours, I've managed to change just about every other element on the page except for the one I actually want to change, all I need is to change the background color of the clicked button and then revert back to original color a different button is clicked. Any help would be much appreciated.
<! doctype html>
<html>
<head>
<title>Task 2</title>
<!--styles-->
<style>
body {
margin: 0;
background-color: mediumpurple;
}
header {
margin: auto;
width: 90%;
background-color: orangered;
height: 50px;
text-align: center;
}
#content {
width: 80%;
background-color: green;
margin: auto;
}
nav {
float: left;
background-color: greenyellow;
width: 30%;
height: 750px;
text-align: center;
}
#pictureFrame {
float: left;
width: 70%;
height: 750px;
background-color: deeppink;
}
footer {
margin: auto;
width: 90%;
background-color: orangered;
height: 50px;
text-align: center;
clear: both;
}
.button {
margin-top: 100px;
background-color: white;
border-radius: 20px;
width: 70%;
height: 75px;
}
#img {
margin-top: 19%;
margin-left: 35%;
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
function pic1() {
document.getElementById("img").src = "images/starbucks.png";
}
function pic2() {
document.getElementById("img").src = "images/muffin.png";
}
function pic3() {
document.getElementById("img").src = "images/costa.png";
}
</script>
</head>
<body>
<header>
<h1>Coffee</h1>
</header>
<section id="content">
<div id="pictureFrame">
<img src="" id="img" />
</div>
<nav>
<button id="button1" class="button" onclick="pic1()">Starbucks</button>
<br/>
<br/>
<button id="button2" class="button" onclick="pic2()">Muffin Break</button>
<br/>
<br/>
<button id="button3" class="button" onclick="pic3()">Costa</button>
</nav>
</section>
<footer>
<h1>This is a footer</h1>
</footer>
</body>
</html>
By clicking on each button simply change the background of that button with style.background='color'. Also reset the color of other two buttons. Simply create a function to reset the background color.
<script type="text/javascript">
function reset(){
document.getElementById("button1").style.background='white';
document.getElementById("button2").style.background='white';
document.getElementById("button3").style.background='white';
}
function pic1() {
document.getElementById("img").src = "images/starbucks.png";
reset();
document.getElementById("button1").style.background='red';
}
function pic2() {
document.getElementById("img").src = "images/muffin.png";
reset();
document.getElementById("button2").style.background='red';
}
function pic3() {
document.getElementById("img").src = "images/costa.png";
reset();
document.getElementById("button3").style.background='red';
}
</script>
Fiddle : https://jsfiddle.net/tintucraju/6dkt0bs2/