JavaScript boolean if statement problems - javascript

I have a button that, when clicked, makes an alert window pop up. When the button is clicked, a variable called "master" changes from false to true. Then, I have an if statement that checks if the variable is true. If it is, then it alerts the value of the variable. Here's the problem: the last part isn't happening. It's like the if statement isn't executing, then it stops the rest of the program. I did check to see if the "master" variable is registering as true, and it is, so I don't really know what's wrong.
<!DOCTYPE html>
<html>
<head>
<title>Tic-Tac-Toe Game</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style type="text/css">
#buttons{
margin-top: 50px;
}
#x{
margin-left: 10px;
}
#table{
margin-top: 15px;
background: gray;
table-layout: fixed;
width: auto;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div class="container" id="buttons">
<h2 id = "h2" >Choose your team!</h2>
<button onclick = "myFunctions()" type = "button" class="btn btn-default"><span style = "font-weight: bold; font-size: 110%;">O</span></button>
<button type = "button" id = "x" class="btn btn-default"><span class = "glyphicon glyphicon-remove"></span></button>
<table id = "table" class="table table-bordered">
<tbody>
<tr>
<td id = "td" onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var master = false;
var servant = false;
function myFunction(){
alert('hi');
}
function myFunctions(){
master = true;
}
if (master == true) {
alert(master);
}
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>


Refer the corrected code below.
<!DOCTYPE html>
<html>
<head>
<title>Tic-Tac-Toe Game</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style type="text/css">
#buttons{
margin-top: 50px;
}
#x{
margin-left: 10px;
}
#table{
margin-top: 15px;
background: gray;
table-layout: fixed;
width: auto;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div class="container" id="buttons">
<h2 id = "h2" >Choose your team!</h2>
<button onclick = "myFunctions()" type = "button" class="btn btn-default"><span style = "font-weight: bold; font-size: 110%;">O</span></button>
<button type = "button" id = "x" class="btn btn-default"><span class = "glyphicon glyphicon-remove"></span></button>
<table id = "table" class="table table-bordered">
<tbody>
<tr>
<td id = "td" onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var master = false;
var servant = false;
function myFunction(){
alert('hi');
master = true;
if (master == true) {
alert(master);
}
}
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Reason is was not executing is you had function called as myFunctions but actually you were calling myFunction() for onclick event


First you set master to false, then you declare two functions: 'myFunction' and 'myFunctions', then you check if master == true. As master is false, so you won't see the alert.
When you click the buttons, only the function myFunction or myFunctions gets executed. The test 'master == true' does not get executed again, it is not part of the functions

Related

How to add button google search in this form?

Hi there can someone help me, I want every keyword list, there is a google search button, and when I click on it, it will open a new browser tab, can anyone help me, I don't understand coding at all, so I ask for help here, I'm attaching a screenshot, thank you
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>TRENDING</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- <style type="text/css"> -->
<!-- h3 span { -->
<!-- font-size: 22px; -->
<!-- margin-left: auto; -->
<!-- } -->
<!-- h3 input.search-input { -->
<!-- width: 100px; -->
<!-- margin-left: auto; -->
<!-- float: right -->
<!-- } -->
<!-- .mt32 { -->
<!-- margin-top: 32px; -->
<!-- } -->
<!-- </style> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body class="mt32">
<!-- <div class="container"> -->
<!-- <h3> -->
<!-- <span>RESULT</span> -->
<!-- </h3> -->
<!-- </div> -->
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>horse</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
</tbody></table>
</body>
</html>

Here is an example -
note I cannot use the drawCallback but need to use on("draw" PLUS a draw() to make sure the buttons are also added on the next page of the pagination
drawCallback is called for EACH row, so this code is not useful
$table = $('table').DataTable({"drawCallback": addButtons})
The opening of the window is blocked here at SO but works in the
jsfiddle
const addButtons = settings => {
$('#dt1 tr td:nth-child(1)').html(function() {
return `<button type="button" title="google search" class="py-0 btn btn-dark btn-sm search">${this.innerText}</button>`
})
$('#dt1 tr td:nth-child(4)').html(function() {
return `<button type="button" title="google trends" class="py-0 btn btn-secondary btn-sm trends">${this.innerText}</button>`
})
};
$(document).ready(function() {
$table = $('table').DataTable();
$table.on("draw", addButtons)
$table.rows().invalidate().draw(); // not sure WHY I need to do this to have the FIRST draw trigger
$table.on("click", ".search", function() {
window.open(`https://google.com/search?q=${this.innerText}`, '_blank');
})
$('tbody').on("click", ".trends", function() {
window.open(`https://trends.google.com/trends/explore?date=now 7-d&geo=US&q=${this.innerText}`, '_blank');
})
});
.search, .trends {
width: 70%;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>BACKUP</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script>
</script>
</head>
<table id="dt1" class="table table-striped mt32 customers-list">
<thead><tr><th title="Field #1">Keyword</th>
<th title="Field #2">Products</th>
<th title="Field #3">Date</th>
<th title="Field #4">Google Trends</th>
</tr></thead>
<tbody><tr>
<td>golf just play it</td>
<td align="right">302</td>
<td align="right">1642887886267</td>
<td>golf just play it</td>
</tr>
<tr>
<td>go little rockstar tiktok</td>
<td align="right">980</td>
<td align="right">1642888240211</td>
<td>go little rockstar tiktok</td>
</tr>
<tr>
<td>gorila</td>
<td align="right">709</td>
<td align="right">1642888326752</td>
<td>gorila</td>
</tr>
<tr>
<td>google arts and culture</td>
<td align="right">23</td>
<td align="right">1642888331842</td>
<td>google arts and culture</td>
</tr>
<tr>
<td>goat case</td>
<td align="right">1099</td>
<td align="right">1642888338561</td>
<td>goat case</td>
</tr>
<tr>
<td>goth youtuber</td>
<td align="right">334</td>
<td align="right">1642888346327</td>
<td>goth youtuber</td>
</tr>
<tr>
<td>goots</td>
<td align="right">56</td>
<td align="right">1642888351273</td>
<td>goots</td>
</tr>
<tr>
<td>godlike</td>
<td align="right">360</td>
<td align="right">1642888743165</td>
<td>godlike</td>
</tr>
<tr>
<td>very good very nice</td>
<td align="right">3257</td>
<td align="right">1642889189771</td>
<td>very good very nice</td>
</tr>
<tr>
<td>navy blue and gold</td>
<td align="right">2613</td>
<td align="right">1642889973714</td>
<td>navy blue and gold</td>
</tr>
<tr>
<td>its a good day to read a book bookworm book dragon</td>
<td align="right">66</td>
<td align="right">1642889988276</td>
<td>its a good day to read a book bookworm book dragon</td>
</tr>
<tr>
<td>peach and goma teddy</td>
<td align="right">918</td>
<td align="right">1642889994665</td>
<td>peach and goma teddy</td>
</tr>
<tr>
<td>i paused the golden girls to be here</td>
<td align="right">91</td>
<td align="right">1642890006415</td>
<td>i paused the golden girls to be here</td>
</tr>
</tbody></table>
</html>

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>TRENDING</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- <style type="text/css"> -->
<!-- h3 span { -->
<!-- font-size: 22px; -->
<!-- margin-left: auto; -->
<!-- } -->
<!-- h3 input.search-input { -->
<!-- width: 100px; -->
<!-- margin-left: auto; -->
<!-- float: right -->
<!-- } -->
<!-- .mt32 { -->
<!-- margin-top: 32px; -->
<!-- } -->
<!-- </style> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body class="mt32">
<!-- <div class="container"> -->
<!-- <h3> -->
<!-- <span>RESULT</span> -->
<!-- </h3> -->
<!-- </div> -->
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator <a target="_blank" style="font-size:70%" class="py-0 btn btn-primary btn-sm" href="//www.google.com/search?q=smooth operator">Google search</a></td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>horse <a target="_blank" style="font-size:70%" class="py-0 btn btn-primary btn-sm" href="//www.google.com/search?q=horse" >Google search</a></td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
</tbody></table>
</body>
</html>

Add / Subtract operations using HTML and Javascript

I'm trying to create a simple HTML Add/Subtract table where the value doesn't go above 10 or below 0. I've setup two functions additionalAdd & additionalSub both setup using onclick to call them. But I keep getting the error saying totalAddtions not defined. Which is the variable I'm using to store the overall value.
function additionalSub() {
var totalAdditions = document.getElementById("additionalExpenses").innerHTML;
if (totalAddtions > 0) {
totalAdditions--;
document.getElementById("additionalExpenses").innerHTML = totalAdditions;
}
}
function additionalAdd() {
var totalAdditions = document.getElementById("additionalExpenses").innerHTML;
if (totalAddtions < 10) {
totalAdditions++;
document.getElementById("additionalExpenses").innerHTML = totalAdditions;
}
}
.btn {
font-size: 30px;
width: 50%;
cursor: pointer;
}
.value {
font-size: 30px;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th colspan="2">Additional Expenses</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" class="value" id="additionalExpenses">0</td>
</tr>
<tr>
<td class="btn" onclick="additionalSub()">
<center>-</center>
</td>
<td class="btn" onclick="additionalAdd()">
<center>+</center>
</td>
</tr>
</tbody>
</table>
</div>
</div>

You are using spelling of totalAddtions wrong. And define it outside the function not inside it.
var totalAddtions=0;
function additionalSub() {
totalAddtions = document.getElementById("additionalExpenses").innerHTML;
if (totalAddtions > 0) {
totalAddtions--;
document.getElementById("additionalExpenses").innerHTML = totalAddtions;
}
}
function additionalAdd() {
totalAddtions = document.getElementById("additionalExpenses").innerHTML;
if (totalAddtions < 10) {
totalAddtions++;
document.getElementById("additionalExpenses").innerHTML = totalAddtions;
}
}
.btn {
font-size: 30px;
width: 50%;
cursor: pointer;
}
.value {
font-size: 30px;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th colspan="2">Additional Expenses</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" class="value" id="additionalExpenses">0</td>
</tr>
<tr>
<td class="btn" onclick="additionalSub()">
<center>-</center>
</td>
<td class="btn" onclick="additionalAdd()">
<center>+</center>
</td>
</tr>
</tbody>
</table>
</div>
</div>

You have a typo in the if block
var totalAdditions = document.getElementById("additionalExpenses").innerHTML;
if (totalAddtions > 0)

Javascript onclick pick random html element and style it

Hello I am need some help with javascript
I am newbie self-taught
How can i code - I have a table and 2 buttons, when i press button I want to pick random table data (from 1 to 9) and change it background color
and when i press second button - change table data from 1 to 9 in order.
// my javascript knowledge is very low but i understand that i need to
give id for my each table data,
a button with onclick="random()",
function random () - but i dont know how to pick random ID i gave for my td
<script type="text/javascript">
//function random() {
// var myArray = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9");
// var x = Math.floor((Math.random() * 9) + 1);}
document.getElementById("random").onclick = function () {
document.getElementById("1").style.backgroundColor = "red";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Javascript homework</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
table {
border: 1px solid black;
}
th, td {
height: 150px;
width: 150px;
text-align: center;
color: black;
background-color: white;
font-size: 35px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<table>
<tr>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
</tr>
<tr>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
</tr>
<tr>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
</tr>
</table>
<button id="random" type="button" onclick="random()">Random</button>
<button id="next" type="button" onclick="next()">Next</button>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>

Edited:
See comments inside js:
function random(){
//make a collection with all td elements
var items = document.getElementsByTagName("td");
for( i=0; i < items.length; i++ ){
//that delete old backgroundColor style
items[i].style.backgroundColor = '';
};
//choose a random id between 1 and 9
var random_id = Math.floor((Math.random()*9)+1);
//aply the red style color to this random element
document.getElementById(random_id).style.backgroundColor = "#ff0000";
};
<!DOCTYPE html>
<html>
<head>
<title>Javascript homework</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
table {
border: 1px solid black;
}
th, td {
height: 50px;
width: 50px;
text-align: center;
color: black;
background-color: white;
font-size: 15px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<table>
<tr>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
</tr>
<tr>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
</tr>
<tr>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
</tr>
</table>
<button id="random" type="button" onclick="random()">Random</button>
<button id="next" type="button" onclick="next()">Next</button>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>

Just return a random number between 1 and 9 (See random function). Use document.getElementById to select that element, and set it to red.
See below:
function random() {
return Math.floor((Math.random() * 9) + 1);
}
document.getElementById("random").onclick = function () {
document.getElementById(random()).style.backgroundColor = "red";
}
<!DOCTYPE html>
<html>
<head>
<title>Javascript homework</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
table {
border: 1px solid black;
}
th, td {
height: 50px;
width: 50px;
text-align: center;
color: black;
background-color: white;
font-size: 15px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<table>
<tr>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
</tr>
<tr>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
</tr>
<tr>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
</tr>
</table>
<button id="random" type="button" onclick="random()">Random</button>
<button id="next" type="button" onclick="next()">Next</button>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>

how to put a marker on progress bar

I am having some table data and using angular UI bootstrap and bootstrap classes. i want to show a bar in a graph tab with a data whatever i am showing on table tab. if i use progress bar for this requirement, its not showing me marker for expected value.click here for bar design . how can we put that marker (it can be a triangle or vertical line or anything which can be differentiated?
var app = angular.module('app', ['ui.bootstrap']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.data =
[{"transactionName":"Store Document GDR","actualVolume":251.0,"expectedVolume":500.0,"actualResponseTime":96.0,"expectedRT1":150.0,"expectedRT2":200.0},{"transactionName":"Submit Staging Doc","actualVolume":36.0,"expectedVolume":50.0,"actualResponseTime":86.0,"expectedRT1":200.0,"expectedRT2":250.0},{"transactionName":"Get Documents","actualVolume":7.0,"expectedVolume":50.0,"actualResponseTime":1293.0,"expectedRT1":1300.0,"expectedRT2":1500.0}];
}]);
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller='MainCtrl'>
<div class="panel-body">
<uib-tabset>
<uib-tab>
<uib-tab-heading><b> table </b></uib-tab-heading>
<div class="col-md-12">
<table class="table table-bordered table-striped text-center" style="font-size:130%;font-weight: bold;" >
<thead>
<tr bgcolor="#00008b" ; style="color: #bce8f1">
<th class ="text-center" rowspan="2" style="vertical-align:middle">Transaction Name</th>
<th class ="text-center" colspan="2">Volume</th>
</tr>
<tr>
<td class ="text-center"><b>Actual</b></td>
<td class ="text-center"><b>Expected</b></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in data">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td>{{"0 - "}}{{record.expectedVolume}}</td>
</tr>
</tbody>
</table>
</div>
</uib-tab>
<uib-tab>
<uib-tab-heading><b> graph </b></uib-tab-heading>
<div class="col-md-12">
<table class="table table-bordered table-striped text-center" style="font-size:130%;font-weight: bold;" >
<thead>
<tr bgcolor="#00008b" ; style="color: #bce8f1">
<th class ="text-center" style="vertical-align:middle">Transaction Name</th>
<th class ="text-center">graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in data">
<td>{{record.transactionName}}</td>
<td>
</tr>
</tbody>
</table>
</div>
</uib-tab>
</uib-tabset>
</div>
</body>
</html>

For put a bar progress you can use tag
W3School Tag Progress
This is an examples:
progress {
background: #000;
}
<progress value="22" max="100">

The progress bar lies inside a relative positioned container, where the arrow is also inside with position:absolute. So you just need to set left:expected% minus the half of the arrowimage width.
var currentvalue = document.getElementById("value1").innerHTML;
var currentexpected = document.getElementById("expected1").innerHTML;
var thetarget = document.getElementById("theprogress");
thetarget.setAttribute("aria-valuenow", currentvalue);
thetarget.style.width = currentvalue + "%";
thetarget.innerHTML = currentvalue + "%";
document.getElementById("arrow").style.left = currentexpected + "%";
body {
background-color: lavender !important;
}
.progress {
position: relative !important;
}
#arrow {
position: absolute;
margin-left: -16px;
}
table tr td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
background-color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<table>
<tr><td>value</td><td>expected</td></tr>
<tr><td id=value1>70</td><td id=expected1>90</td></tr>
</table><br>
<div class="progress">
<div id=theprogress class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<img src="http://i.imgur.com/q2BqI65.png" id=arrow alt=arrow>
</div>
codepen

Changing style of unknown element in JavaScript

I'm trying to build a tic-tac-toe game where the user first clicks which player he wants to be, then clicks on the square in the board where he wants to play. The issue I'm having is changing the background of the square that the user clicks. Because I don't know which square the user will click, I can't figure out how to change the style of the background, because the square's id/class is unknown.
I can't say:
document.getElementById("randomId").style.backg round
because I don't know which square the user will click. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Tic-Tac-Toe Game</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style type="text/css">
#buttons{
margin-top: 50px;
}
#x{
margin-left: 10px;
}
#table{
margin-top: 15px;
background: gray;
table-layout: fixed;
width: auto;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div class="container" id="buttons">
<h2 id="h2">Choose your team!</h2>
<button onclick="myFunctions()" type="button" class="btn btn-default"><span
style="font-weight: bold; font-size: 110%;">O</span></button>
<button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>
</button>
<table id="table" class="table table-bordered">
<tbody>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var master = false;
var servant = false;
function myFunctions(){
master = true;
}
function myFunction() {
if (master == true) {
}
}
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Well, you could either do it like this, where you add an argument when you call the function, in this case the this keyword would point to the html element (td).
By adding a css class, you can handle the changes relatively easily and check if it wasn't clicked before.
var master = true;
// clickedElement = your dom element you want to update
function myFunction(clickedElement) {
// if a dom element was given and it doesn't have a className yet
if (clickedElement && !clickedElement.className) {
// set a class on the element
clickedElement.className = master ? 'master' : 'servant';
// change the player (if it's not a master it's a servant)
master = !master;
}
}
#buttons {
margin-top: 50px;
}
#x {
margin-left: 10px;
}
#table {
margin-top: 15px;
background: gray;
table-layout: fixed;
width: auto;
width: 250px;
height: 250px;
}
.master {
background-color: green;
}
.servant {
background-color: red;
}
<div class="container" id="buttons">
<h2 id="h2">Choose your team!</h2>
<button onclick="myFunctions()" type="button" class="btn btn-default"><span style="font-weight: bold; font-size: 110%;">O</span>
</button>
<button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>
</button>
<table id="table" class="table table-bordered">
<tbody>
<tr>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
</tr>
<tr>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
</tr>
<tr>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
</tr>
</tbody>
</table>
</div>
There is of course no reason to only store this information on the DOM, you would still have to evaluate if there were 3 cells of the same color. You might want to choose to keep a data structure that checks which block was clicked and who clicked it and if there are diagonally, vertically or horizontally 3 in a row for the person who just clicked.
and if you want some more inspiration, you can check this jsfiddle

Categories

Resources