added styling to my table and it stopped working

added styling to my table and it stopped working - javascript

I have made an order form in java and html css everything was going well until I decided to put some styling in my code and now it doesn't reset post it basically does nothing its probably something small but I cant find it even when I use the javascript console.
It needs to show the amount and I need to add a discount that only works on monday and Friday
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Order Form</title>
<link href="pl.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<h1><span class="blue"><</span>faiz<span class="blue">></span> <span class="yellow">pizza</span></h1>
<form>
<table class="container">
<thead>
<tr>
<th><h1>Pizza</h1></th>
<th><h1>Image</h1></th>
<th><h1>Quantity</h1></th>
<th><h1>Price</h1></th>
<th><h1>Total</h1></th>
</tr>
</thead>
<tbody>
<tr>
<td>margherita</td>
<td><img src="Pizza_Margherita_stu_spivack-removebg-preview.png" alt="margherita" height="400" width="400"></td>
<td><input type="text" id="QtyA"></td>
<td>€3.00</td>
<td id="TotalA"></td>
</tr>
</tr>
<tr>
<td>Tuna</td>
<td><img src="Tuna_Treat-7268.png" alt="Tuna" height="400" width="400"></td>
<td><input type="text" id="QtyB"></td>
<td>€14.00</td>
<td id="TotalB"></td>
</tr>
<tr>
<td>fourcheese</td>
<td><img src="4_Cheese-7262.png" alt="fourcheese"></td>
<td><input type="text" id="QtyC"></td>
<td>€5.50</td>
<td id="TotalC"></td>
</tr>
<tr>
<td>double pepperoni</td>
<td><img src="Double_Pepperoni-7260.png" alt="pep" height="400" width="400"></td>
<td><input type="text" id="QtyD"></td>
<td>€5.50</td>
<td id="TotalD"></td>
</tr>
<tr>
<td>pizza</td>
<td>ef</td>
<td>fwrf</td>
<td>ref</td>
</tr>
<tr>
<td>refe</td>
<td>erf</td>
<td>erf</td>
<td>ref</td>
</tr>
<tr>
<td><input type="button" value="Get Grand Total"></td>
<input type="reset" value="Reset"></td>
</tr>
</tbody>
</table>
</form>
Javascript
<script>
var qtyBoxA = document.getElementById('QtyA');
var qtyBoxB = document.getElementById('QtyB');
var qtyBoxC = document.getElementById('QtyC');
var qtyBoxD = document.getElementById('QtyD');
var totBoxA = document.getElementById('TotalA');
var totBoxB = document.getElementById('TotalB');
var totBoxC = document.getElementById('TotalC');
var totBoxD = document.getElementById('TotalD');
var grandTot = document.getElementById('grandTotal');
var btnGetTot = document.querySelector("input[type=button]");
var btnReset = document.querySelector("input[type=reset]");
qtyBoxA.addEventListener("change", calc);
qtyBoxB.addEventListener("change", calc);
qtyBoxC.addEventListener("change", calc);
qtyBoxD.addEventListener("change", calc);
btnGetTot.addEventListener("click", getGrandTotal);
btnReset.addEventListener("click", reset);
var gt = null;
function calc() {
var priceA = 3;
var priceB = 4;
var priceC = 5.50;
var priceD = 5.50;
gt = 0;
var qtyA = parseInt(qtyBoxA.value, 10);
var qtyB = parseInt(qtyBoxB.value, 10);
var qtyC = parseInt(qtyBoxC.value, 10);
var qtyD = parseInt(qtyBoxD.value, 10);
if (!isNaN(qtyA)) { totBoxA.textContent = qtyA * priceA; gt += +totBoxA.textContent; }
if (!isNaN(qtyB)) { totBoxB.textContent = qtyB * priceB; gt += +totBoxB.textContent; }
if (!isNaN(qtyC)) { totBoxC.textContent = qtyC * priceC; gt += +totBoxC.textContent; }
if (!isNaN(qtyD)) { totBoxD.textContent = qtyD * priceD; gt += +totBoxD.textContent; }
grandTot.textContent = gt.toFixed(2);
}
function getGrandTotal(){
calc();
alert(gt);
}
function reset(){
totBoxA.textContent = "";
totBoxB.textContent = "";
totBoxC.textContent = "";
totBoxD.textContent = "";
grandTot.textContent = "";
}
</script>
</body>
</html>
#charset "UTF-8";
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
line-height: 1.42em;
color:#A7A1AE;
background-color:#1F2739;
}
h1 {
font-size:3em;
font-weight: 300;
line-height:1em;
text-align: center;
color: #4DC3FA;
}
h2 {
font-size:1em;
font-weight: 300;
text-align: center;
display: block;
line-height:1em;
padding-bottom: 2em;
color: #FB667A;
}
h2 a {
font-weight: 700;
text-transform: uppercase;
color: #FB667A;
text-decoration: none;
}
.blue { color: #185875; }
.yellow { color: #FFF842; }
.container th h1 {
font-weight: bold;
font-size: 1em;
text-align: left;
color: #185875;
}
.container td {
font-weight: normal;
font-size: 1em;
-webkit-box-shadow: 0 2px 2px -2px #0E1119;
-moz-box-shadow: 0 2px 2px -2px #0E1119;
box-shadow: 0 2px 2px -2px #0E1119;
}
.container {
text-align: left;
overflow: hidden;
width: 80%;
margin: 0 auto;
display: table;
padding: 0 0 8em 0;
}
.container td, .container th {
padding-bottom: 2%;
padding-top: 2%;
padding-left:2%;
}
/* Background-color of the odd rows */
.container tr:nth-child(odd) {
background-color: #323C50;
}
/* Background-color of the even rows */
.container tr:nth-child(even) {
background-color: #2C3446;
}
.container th {
background-color: #1F2739;
}
.container td:first-child { color: #FB667A; }
.container tr:hover {
background-color: #464A52;
-webkit-box-shadow: 0 6px 6px -6px #0E1119;
-moz-box-shadow: 0 6px 6px -6px #0E1119;
box-shadow: 0 6px 6px -6px #0E1119;
}
.container td:hover {
background-color: #FFF842;
color: #403E10;
font-weight: bold;
box-shadow: #7F7C21 -1px 1px, #7F7C21 2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
transform: translate3d(6px, -6px, 0);
transition-delay: 0s;
transition-duration: 0.4s;
transition-property: all;
transition-timing-function: line;
}
#media (max-width: 800px) {
.container td:nth-child(4),
.container th:nth-child(4) { display: none; }
}

After fixing a lot of things in your code, it works :)
The main issue was within your code logic, you just blindly copied the code without knowing how it works.
You are getting this element but it didn't exists var grandTot = document.getElementById('grandTotal'); and rest of the code in getGrandTotal() didn't work because of the null error.
I Just added this line in html and created that element with id grandTotal
<td id="grandTotal"></td>
var qtyBoxA = document.getElementById('QtyA');
var qtyBoxB = document.getElementById('QtyB');
var qtyBoxC = document.getElementById('QtyC');
var qtyBoxD = document.getElementById('QtyD');
var totBoxA = document.getElementById('TotalA');
var totBoxB = document.getElementById('TotalB');
var totBoxC = document.getElementById('TotalC');
var totBoxD = document.getElementById('TotalD');
var grandTot = document.getElementById('grandTotal');
var btnGetTot = document.querySelector("input[type=button]");
var btnReset = document.querySelector("input[type=reset]");
qtyBoxA.addEventListener("change", calc);
qtyBoxB.addEventListener("change", calc);
qtyBoxC.addEventListener("change", calc);
qtyBoxD.addEventListener("change", calc);
btnGetTot.addEventListener("click", getGrandTotal);
btnReset.addEventListener("click", reset);
var gt = null;
function calc() {
var priceA = 3;
var priceB = 4;
var priceC = 5.50;
var priceD = 5.50;
gt = 0;
var qtyA = parseInt(qtyBoxA.value, 10);
var qtyB = parseInt(qtyBoxB.value, 10);
var qtyC = parseInt(qtyBoxC.value, 10);
var qtyD = parseInt(qtyBoxD.value, 10);
if (!isNaN(qtyA)) {
totBoxA.textContent = qtyA * priceA;
gt += +totBoxA.textContent;
}
if (!isNaN(qtyB)) {
totBoxB.textContent = qtyB * priceB;
gt += +totBoxB.textContent;
}
if (!isNaN(qtyC)) {
totBoxC.textContent = qtyC * priceC;
gt += +totBoxC.textContent;
}
if (!isNaN(qtyD)) {
totBoxD.textContent = qtyD * priceD;
gt += +totBoxD.textContent;
}
grandTot.textContent = gt.toFixed(2);
}
function getGrandTotal() {
calc();
}
function reset() {
totBoxA.textContent = "";
totBoxB.textContent = "";
totBoxC.textContent = "";
totBoxD.textContent = "";
grandTot.textContent = "";
}
#charset "UTF-8";
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
line-height: 1.42em;
color: #A7A1AE;
background-color: #1F2739;
}
h1 {
font-size: 3em;
font-weight: 300;
line-height: 1em;
text-align: center;
color: #4DC3FA;
}
h2 {
font-size: 1em;
font-weight: 300;
text-align: center;
display: block;
line-height: 1em;
padding-bottom: 2em;
color: #FB667A;
}
h2 a {
font-weight: 700;
text-transform: uppercase;
color: #FB667A;
text-decoration: none;
}
.blue {
color: #185875;
}
.yellow {
color: #FFF842;
}
.container th h1 {
font-weight: bold;
font-size: 1em;
text-align: left;
color: #185875;
}
.container td {
font-weight: normal;
font-size: 1em;
-webkit-box-shadow: 0 2px 2px -2px #0E1119;
-moz-box-shadow: 0 2px 2px -2px #0E1119;
box-shadow: 0 2px 2px -2px #0E1119;
}
.container {
text-align: left;
overflow: hidden;
width: 80%;
margin: 0 auto;
display: table;
padding: 0 0 8em 0;
}
.container td,
.container th {
padding-bottom: 2%;
padding-top: 2%;
padding-left: 2%;
}
/* Background-color of the odd rows */
.container tr:nth-child(odd) {
background-color: #323C50;
}
/* Background-color of the even rows */
.container tr:nth-child(even) {
background-color: #2C3446;
}
.container th {
background-color: #1F2739;
}
.container td:first-child {
color: #FB667A;
}
.container tr:hover {
background-color: #464A52;
-webkit-box-shadow: 0 6px 6px -6px #0E1119;
-moz-box-shadow: 0 6px 6px -6px #0E1119;
box-shadow: 0 6px 6px -6px #0E1119;
}
.container td:hover {
background-color: #FFF842;
color: #403E10;
font-weight: bold;
box-shadow: #7F7C21 -1px 1px, #7F7C21 2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
transform: translate3d(6px, -6px, 0);
transition-delay: 0s;
transition-duration: 0.4s;
transition-property: all;
transition-timing-function: line;
}
#media (max-width: 800px) {
.container td:nth-child(4),
.container th:nth-child(4) {
display: none;
}
}
<h1>
<span class="blue"><</span>faiz <span class="blue">></span>
<span class="yellow">pizza</span>
</h1>
<form>
<table class="container">
<thead>
<tr>
<th>
<h1>Pizza</h1>
</th>
<th>
<h1>Image</h1>
</th>
<th>
<h1>Quantity</h1>
</th>
<th>
<h1>Price</h1>
</th>
<th>
<h1>Total</h1>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>margherita</td>
<td>
<img src="Pizza_Margherita_stu_spivack-removebg-preview.png" alt="margherita" height="400" width="400">
</td>
<td>
<input type="text" id="QtyA">
</td>
<td>€3.00</td>
<td id="TotalA"></td>
</tr>
</tr>
<tr>
<td>Tuna</td>
<td>
<img src="Tuna_Treat-7268.png" alt="Tuna" height="400" width="400">
</td>
<td>
<input type="text" id="QtyB">
</td>
<td>€14.00</td>
<td id="TotalB"></td>
</tr>
<tr>
<td>fourcheese</td>
<td>
<img src="4_Cheese-7262.png" alt="fourcheese">
</td>
<td>
<input type="text" id="QtyC">
</td>
<td>€5.50</td>
<td id="TotalC"></td>
</tr>
<tr>
<td>double pepperoni</td>
<td>
<img src="Double_Pepperoni-7260.png" alt="pep" height="400" width="400">
</td>
<td>
<input type="text" id="QtyD">
</td>
<td>€5.50</td>
<td id="TotalD"></td>
</tr>
<tr>
<td>pizza</td>
<td>ef</td>
<td>fwrf</td>
<td>ref</td>
</tr>
<tr>
<td>refe</td>
<td>erf</td>
<td>erf</td>
<td>ref</td>
</tr>
<tr>
<td>
<input type="button" value="Get Grand Total">
</td>
<td>
<input type="reset" value="Reset">
</td>
<td id="grandTotal"></td> <!--- This is the line I added ---->
</tr>
</tbody>
</table>
</form>
Good Luck :)

Related

How to create collapsible content with split button? (HTML/CSS/JS)

With two columns (left indicates name; right provide collapse function(a button)), how would you create collapsible content on the next row with full width (covers both columns)?
I am only able to collapse within a certain column. I tried to collapse a row below by creating a new div, but then the collapsing action no longer seems to work.
It should look like this:
Thank you for your help!
JavaScript is from: https://www.w3schools.com/howto/howto_js_collapsible.asp
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
:root {
--colorbggray: rgb(65,65,65);
--colorlightgray: rgb(150,150,150);
--colorcyan: rgb(0, 229, 255);
--colorgreen: rgb(0, 255, 0);
--colorUpGrey: rgb(135,135,135);
--colorLowGrey: rgb(38,38,38);
--colorMidGrey: rgb(95,95,95);
--colorGreen: rgb(11,69,2);
--colorAmber: orange;
--colorRed: red;
}
.verticalmenu-auto {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.verticalmenu-auto > div {
border-top: 2px solid var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey); color: white;
width: 100px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 16px;
padding-left: 16px;
margin: 0.5px;
text-align: left;
font-size: 16px;
}
.verticalmenu-auto li, {
border-top: 2px solidauto var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey);
}
.collapsible {
background: var(--colorMidGrey); color: white;
cursor: pointer;
width: 100%;
border: none;
text-align: center;
outline: none;
}
.collapsible:after {
content: '\1433';
float: center;
transform: scale(.7, 1);
}
.active:after {
content: "\142F";
transform: scale(1, .7);
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.0s ease-out;
grid-column-start: -1;
grid-column-end: 1;
background-color: gray;
}
<body>
<p>On right side open content which is has the width of both columns combined</p>
<ul style="list-style:none;padding-left:0;">
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
<div class='content'>
<p> content</p>
</div>
</div>
</div>
</li>
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
<div class='content'>
<p> content</p>
</div>
</div>
</div>
</li>

A slight change in your JS toggle and also putting content outside the parent div so that it act as block
$(document).ready(function () {
$('.collapsible').on('click', function(event){
event.preventDefault();
// create accordion variables
var accordion = $(this);
var accordionContent = accordion.closest('.verticalmenu-auto').next('.content');
// toggle accordion link open class
accordion.toggleClass("active");
// toggle accordion content
accordionContent.slideToggle(250);
accordionContent.toggleClass("active");
});
});
:root {
--colorbggray: rgb(65,65,65);
--colorlightgray: rgb(150,150,150);
--colorcyan: rgb(0, 229, 255);
--colorgreen: rgb(0, 255, 0);
--colorUpGrey: rgb(135,135,135);
--colorLowGrey: rgb(38,38,38);
--colorMidGrey: rgb(95,95,95);
--colorGreen: rgb(11,69,2);
--colorAmber: orange;
--colorRed: red;
}
.verticalmenu-auto {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.verticalmenu-auto > div {
border-top: 2px solid var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey); color: white;
width: 100px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 16px;
padding-left: 16px;
margin: 0.5px;
text-align: left;
font-size: 16px;
}
.verticalmenu-auto li, {
border-top: 2px solidauto var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey);
}
.collapsible {
background: var(--colorMidGrey); color: white;
cursor: pointer;
width: 100%;
border: none;
text-align: center;
outline: none;
}
.collapsible:after {
content: '\1433';
float: center;
transform: scale(.7, 1);
}
.collapsible.active:after {
content: "\142F";
transform: scale(1, .7);
}
.content {
display: none;
overflow: hidden;
transition: max-height 0.0s ease-out;
grid-column-start: -1;
grid-column-end: 1;
background-color: #BFBFBF;
padding: 10px;
color: #fff;
}
.content.active {
height: auto;
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p>On right side open content which is has the width of both columns combined</p>
<ul style="list-style:none;padding-left:0;">
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li>
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li>

Are you need like this?
var buttons = document.querySelectorAll('.toggle');
buttons.forEach(function(el) {
el.addEventListener('click', function(event) {
var target = event.target.getAttribute('target');
document.getElementById(target).classList.toggle('expanded');
});
});
table {
width: 100%;
}
table td:nth-child(2) {
width: 100px;
}
.row-detail {
display: none;
}
.expanded {
display: block;
}
<table>
<tr>
<td>Row 1</td>
<td><button class="toggle" target="row-detail-1">Toggle 1</button></td>
</tr>
<tr id="row-detail-1" class="row-detail">
<td colspan="2">This detail from row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td><button class="toggle" target="row-detail-2">Toggle 2</button></td>
</tr>
<tr id="row-detail-2" class="row-detail">
<td colspan="2">This detail from row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td><button class="toggle" target="row-detail-3">Toggle 3</button></td>
</tr>
<tr id="row-detail-3" class="row-detail">
<td colspan="2">This detail from row 3</td>
</tr>
</table>

Select more than one option, and receive them in another php

I have a list of users, and here it's possible to select (Standart/Admin). But when I save my POST, sends all selected options, but I only want to send the changed ones, because I doesn't make sense to send them all. And when I send this, I need to have the ID attached to it, any suggestions on how to do this? the PrintAll(), is just something I was trying to do, but can't make it work..
function printAll() {
var str = "",
i;
for (i = 0; i < myForm.UpdateUsers.options.length; i++) {
if (myForm.UpdateUsers.options[i].selected) {
str = str + i + " ";
}
}
alert("Options selected are " + str);
}
.ChangeEngine
{
font-size: 10px;
text-decoration: none;
}
.content2 {
width: 1000px;
margin: 0 auto;
text-align: center;
}
.content2 h2 {
margin: 0;
padding: 25px 0;
font-size: 22px;
border-bottom: 1px solid #e0e0e3;
color: #4a536e;
}
.content2 > p, .content2 > div {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
margin: 25px 0;
padding: 25px;
background-color: #fff;
}
.content2 > p table td, .content2 > div table td {
padding: 30px;
}
.content2 > p table td, .content2 > div table td {
font-weight: bold;
color: #4a536e;
padding-left: 165px;
}
.content2 > div p {
padding: 5px;
margin: 0 0 10px 0;
}
.content2 table {
border-collapse: collapse;
}
.content2 td {
border: 1px solid #ccc;
}
.content2 tr {
border: none;
border: 1px solid #ccc;
}
.content2 th {
border: 1px solid #ccc;
}
.content2 tr:nth-child(even) {background-color: #f2f2f2;}
<div id="EditUsers" class="content2">
<div>
<table>
<form name="myForm" action="UpdateUsers.php" method="post">
<tr>
<th>Username</th>
<th>Engine</th>
<th>Access</th>
<th>ID</th>
</tr>
<tr>
<td>
username
</td>
<td>
Engine
</td>
<td><select class="data" name="UpdateUsers" placeholder="UpdateUsers" id="UpdateUsers">
<option>Admin</option>
<option>Standart</option>
</select></td>
<td>
id
</td>
</tr>
<br>
<tr>
<td>
username
</td>
<td>
Engine
</td>
<td><select class="data" name="UpdateUsers" placeholder="UpdateUsers" id="UpdateUsers">
<option>Admin</option>
<option>Standart</option>
</select></td>
<td>
id
</td>
</tr>
</table>
<input type="submit" id="ChangeUsers" value="Save" class="btn btn-info ChangeEngine" />
<input type=submit value="Print All" class="btn btn-info ChangeEngine" onClick="printAll()">
<br><br>
</form>
</div>
</div>

Create a basic table with expanded row

I'm using Angular version 6 and want either an Angular solution or pure html/javascript solution for having a table with expanded rows.
So when you click a row it expands.
Note: I don't want to use angular material, jQuery or any third party.
This is my html table:
<table class="ex-table p3">
<thead class="ex-table__head">
<tr class="ex-table__row">
<th class="ex-table__cell">id</th>
<th class="ex-table__cell">First Name</th>
</tr>
</thead>
<tbody>
<tr class="ex-table__row" *ngFor="let item of data">
<td class="ex-table__cell">
{{item.od}}
</td>
<td class="ex-table__cell">
{{item.firstName}}
</td>
</tr>
</tbody>
</table>
I've attempted rowspan and colspan and nested tables but could'nt get that working.

Do you want something like below? . the rows can be expanded. even the whole table can be expanded at once.
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script type="text/javascript">
function toggle(btnID, eIDs) {
// Feed the list of ids as a selector
var theRows = document.querySelectorAll(eIDs);
// Get the button that triggered this
var theButton = document.getElementById(btnID);
// If the button is not expanded...
console.log(theButton.getAttribute("aria-expanded"))
if (theButton.getAttribute("aria-expanded") == "false") {
// Loop through the rows and show them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("shown");
theRows[i].classList.remove("hidden");
}
// Now set the button to expanded
theButton.setAttribute("aria-expanded", "true");
// Otherwise button is not expanded...
} else {
// Loop through the rows and hide them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("hidden");
theRows[i].classList.remove("shown");
}
// Now set the button to collapsed
theButton.setAttribute("aria-expanded", "false");
}
}
function toggle1(btnID, eIDs) {
// Feed the list of ids as a selector
var theRows = document.querySelectorAll(eIDs);
// Get the button that triggered this
var theButton = document.getElementById(btnID);
// If the button is not expanded...
if (theButton.getAttribute("aria-expanded") == "false") {
// Loop through the rows and show them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("shown");
theRows[i].classList.remove("hidden");
}
// Now set the button to expanded
theButton.setAttribute("aria-expanded", "true");
document.getElementById("btnMSb1").setAttribute("aria-expanded", "true");
document.getElementById("btnMSb2").setAttribute("aria-expanded", "true");
document.getElementById("btnMSb3").setAttribute("aria-expanded", "true");
// Otherwise button is not expanded...
} else {
// Loop through the rows and hide them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("hidden");
theRows[i].classList.remove("shown");
}
// Now set the button to collapsed
theButton.setAttribute("aria-expanded", "false");
document.getElementById("btnMSb1").setAttribute("aria-expanded", "false");
document.getElementById("btnMSb2").setAttribute("aria-expanded", "false");
document.getElementById("btnMSb3").setAttribute("aria-expanded", "false");
}
}
</script>
</head>
<style>
body {
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.4;
background: #fefefe;
color: #333;
margin: 0 1em;
}
table {
width: 100%;
margin: 1em 0;
border-collapse: collapse;
}
caption {
text-align: left;
font-style: italic;
padding: 0.25em 0.5em 0.5em 0.5em;
}
th,
td {
padding: 0.25em 0.5em 0.25em 1em;
vertical-align: text-top;
text-align: left;
text-indent: -0.5em;
}
th {
vertical-align: bottom;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
font-weight: bold;
}
.process {
margin-top: 35px;
display: inline-block;
width: 10%;
padding: 5px;
border-top: 3px solid black;
border-bottom: 3px solid black;
color: #fff;
font-style: normal;
font-weight: bold;
}
.row td:nth-of-type(2),
.cell td:nth-of-type(3) {
font-style: italic;
}
.row th:nth-of-type(3),
.row td:nth-of-type(3),
.cell th:nth-of-type(4),
.cell td:nth-of-type(4) {
text-align: right;
}
td[colspan] {
background-color: #f5f5f5;
color: #000;
font-weight: normal;
font-style: italic;
padding: 0;
text-indent: 0;
}
tr.shown,
tr.hidden {
display: table-row;
}
tr.hidden {
display: none;
}
.row button {
background-color: transparent;
border: .1em solid transparent;
font: inherit;
padding: 0.25em 0.5em 0.25em .25em;
width: 100%;
text-align: left;
}
.row button:focus,
.row button:hover {
background-color: #ddd;
outline: .2em solid #00f;
}
.row button svg {
width: .8em;
height: .8em;
margin: 0 0 -.05em 0;
fill: #66f;
transition: transform 0.25s ease-in;
transform-origin: center 45%;
}
.row button:hover svg,
.row button:focus svg {
fill: #00c;
}
/* Lean on programmatic state for styling */
.row button[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.cell button {
font-size: 60%;
color: #000;
background-color: #00f;
padding: 0.3em 0.2em 0 0.2em;
border: 0.2em solid #00f;
border-radius: 50%;
line-height: 1;
text-align: center;
text-indent: 0;
transform: rotate(270deg);
}
.cell button svg {
width: 1.25em;
height: 1.25em;
fill: #fff;
transition: transform 0.25s ease-in;
transform-origin: center 45%;
}
.cell button:hover,
.cell button:focus {
background-color: #fff;
outline: none;
}
.cell button:hover svg,
.cell button:focus svg {
fill: #00f;
}
/* Lean on programmatic state for styling */
.cell button[aria-expanded="true"] svg {
transform: rotate(90deg);
}
/* Proven method to visually hide something but */
/* still make it available to assistive technology */
.visually-hidden {
position: absolute;
top: auto;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE 6/7 */
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
white-space: nowrap;
}
</style>
<table class="cell">
<caption>Dashboard</caption>
<thead>
<tr>
<th><button type="button" id="btnMSb" aria-expanded="false" onclick="toggle1(this.id,'#MS01b,#MS02b,#MS03b');" aria-controls="MS01b MS02b MS03b" aria-label="3 more from" aria-labelledby="btnMSb lblMSb">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button></th>
<th>Batch</th>
<th>Status</th>
<th>Start</th>
<th>End</th>
<th>agreed</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button type="button" id="btnMSb1" aria-expanded="false" onclick="toggle(this.id,'#MS01b');" aria-controls="MS01b" aria-label="3 more from" aria-labelledby="btnMSb1 lblMSb1">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch1</td>
<td>Green</td>
<td>10AM</td>
<td>11AM</td>
<td>11:30AM</td>
</tr>
<tr id="MS01b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #16a085">Step1</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #F1A9A9">Step2</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #E4FFAE">Step3</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #BFC6B9">Step4</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #87FEF8">Step5</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #FF9A9E">Step6</div>
</div>
</td>
</tr>
<tr>
<td>
<button type="button" id="btnMSb2" aria-expanded="false" onclick="toggle(this.id,'#MS02b');" aria-controls="MS02b" aria-label="3 more from" aria-labelledby="btnMSb2 lblMSb2">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch2</td>
<td>Green</td>
<td>2AM</td>
<td>4AM</td>
<td>5AM</td>
</tr>
<tr id="MS02b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #16a085">Step1</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #DB2929">Step2</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #C0FF3E">Step3</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #5A6351">Step4</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #01C5BB">Step5</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #FF9A9E">Step6</div>
</div>
</td>
</tr>
<tr>
<td>
<button type="button" id="btnMSb3" aria-expanded="false" onclick="toggle(this.id,'#MS03b');" aria-controls="MS03b" aria-label="3 more from" aria-labelledby="btnMSb3 lblMSb3">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch3</td>
<td>Amber</td>
<td>10AM</td>
<td>11AM</td>
<td>10:30AM</td>
</tr>
<tr id="MS03b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #1abc9c">Step1</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #3498db">Step2</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #34495e">Step3</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #2ecc71">Step4</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #9b59b6">Step5</div>
<div class='process' style="margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #e74c3c">Step6</div>
</div>
</td>
</tr>
</tbody>
</table>
</html>

How can I add a button that adds the answer to the inputs, next to the button?

I have this code written here but there is something I want to add to it that I would like help with, and not being a master coder I don't know what to do.
Here is my code so far
function calculate() {
var A = document.getElementById("a").value;
var B = document.getElementById("b").value;
var C = document.getElementById("c").value;
var D = document.getElementById("d").value;
var ans = ((A * B) - (C * D)) / (B - C);
alert(ans);
}
* {
font-family: arial;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #05537b;
}
.thisTable td {
line-height: 36px;
font-size: 14px;
}
.container {
background-color: #EEE;
padding: 5px 15px 15px 15px;
border: 1px solid #CCC;
margin-bottom: 25px;
width: 100%;
text-align: left
}
.box {
background-color: #FFF;
border: 1px solid #CCC;
width: 40px;
margin: 0px 4px;
}
.button {
margin-left: 10px;
background-color: #333;
border: 1px solid #CCC;
width: 25px;
color: #FFF;
font-weight: bold;
}
.answer {
padding-left: 10px
}
.answer b {
text-decoration: underline
}
.how {
color: #555;
margin-left: 15px;
font-size: 13px;
background-color: #FFF;
padding: 2px 4px
}
.how b {
color: #D00;
font-weight: bold;
text-decoration: none
}
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px">
<div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">Average Damage Calculator</div>
<div class=container>
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage <input type='number' id='a' /> </td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by <input type='number' id='b' /></td>
<tr>
<td>Type in your current number of battles <input type='number' id='c' /></td>
<tr>
<td>Type in your current average damage <input type='number' id='d' /></td>
</tr>
<tr>
<td>
<button onClick='calculate()'>calculate</button>
</td>
</tr>
</table>
</div>
</div>
Currently I have it, so that when the user types in the information and clicks the "calculate" button, the answer pops up in like a small window. But I don't want that to happen. What I want to happen instead, is that, when you click the "calculate" button, the answer (a number) will appear right below, or next to the button instead of popping up on the screen. I would also like to refine the answer from being so specific, and only have it round the thousandth decimal.

As you tagged the question jQuery, I remade your example to utilise it. Also, there are a few suggested changes: field names/variable names would benefit from being clues to what they contain, and rather than hard-coding the event listeners, attach them programmatically. The comments in my code should show what's happening.
// Rather than an inline click event listener, as the OP has
// tagged the question jQuery, we can simply attach the event
// listener here.
$(".calc-btn").on("click", calculate);
/*****
* function to actually calculate the target value. This gathers
* all the given fields, performs the requisite math, and outputs
* a rounded value to the answer pane.
*****/
function calculate() {
// Note the meaningful names. While not a key part of your
// question, it will help down the line with debugging errors
// if your variables and fields have meaningful names.
var targetDamage = parseInt($("[name='target-damage']").val());
var targetBattles = parseInt($("[name='target-battles']").val());
var currentBattles = parseInt($("[name='current-battles']").val());
var currentDamage = parseInt($("[name='current-damage']").val());
// Given the above fields, we can see what we're actually doing
// rather than simply manipulating A, B, C and D.
var ans = ((targetDamage * targetBattles) - (currentBattles * currentDamage)) / (targetBattles - currentBattles);
var remainingBattles = targetBattles-currentBattles;
// Stick the answer in the answer pane!
$(".calculator-answer-pane").text("You need to average "+Math.round(ans)+" over the next "+remainingBattles+" battles to reach your target.");
}
* {
font-family: arial;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #05537b;
}
.thisTable td {
line-height: 36px;
font-size: 14px;
}
.main-container {
width: 1000px;
background-color: #FFF;
padding: 10px 20px;
text-align: center;
-moz-border-radius: 10px;
}
.calculator-container {
font-size: 30px;
font-weight: bold;
padding-bottom: 20px;
padding-top: 8px;
}
.calculator-main-pane {
background-color: #EEE;
padding: 5px 15px 15px 15px;
border: 1px solid #CCC;
margin-bottom: 25px;
width: 100%;
text-align: left
}
.box {
background-color: #FFF;
border: 1px solid #CCC;
width: 40px;
margin: 0px 4px;
}
.button {
margin-left: 10px;
background-color: #333;
border: 1px solid #CCC;
width: 25px;
color: #FFF;
font-weight: bold;
}
.answer {
padding-left: 10px
}
.answer b {
text-decoration: underline
}
.how {
color: #555;
margin-left: 15px;
font-size: 13px;
background-color: #FFF;
padding: 2px 4px
}
.how b {
color: #D00;
font-weight: bold;
text-decoration: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<center>
<div class="calculator-container">Average Damage Calculator</div>
<div class="calculator-main-pane">
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage</td>
<td>
<input type='number' name='target-damage' />
</td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by</td>
<td>
<input type='number' name='target-battles' />
</td>
</tr>
<tr>
<td>Type in your current number of battles</td>
<td>
<input type='number' name='current-battles' />
</td>
</tr>
<tr>
<td>Type in your current average damage</td>
<td>
<input type='number' name='current-damage' />
</td>
</tr>
<tr>
<td>
<button class="calc-btn">calculate</button>
</td>
<td class="calculator-answer-pane"></td>
</tr>
</table>
</div>
</center>
</div>

I've added a span next to the button. Instead of showing an alert after calculating a score, the answer is placed in the span.
function calculate(){
// The value property returns a string, use parseInt to convert it to an integer.
var targetAvgDamage = parseInt(document.getElementById("a").value, 10),
numberOfBattles = parseInt(document.getElementById("b").value, 10),
battlesFought = parseInt(document.getElementById("c").value, 10),
currentAvgDamage = parseInt(document.getElementById("d").value, 10);
var answer = ((targetAvgDamage * numberOfBattles) - (battlesFought * currentAvgDamage)) / (numberOfBattles - battlesFought);
// Get the element from the DOM to place the answer in.
var answerCell = document.getElementById('answer-cell');
// Set the text content of the element.
answerCell.textContent = 'The answer is: ' + Math.ceil(answer);
}
var
// Get the button element from the DOM.
calculateTrigger = document.getElementById('calculate-btn');
// Attach an event handler for the visitor clicks on the button.
calculateTrigger.addEventListener('click', calculate);
* { font-family:arial; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { margin:40px; background-color:#05537b; }
.thisTable td { line-height:36px; font-size:14px; }
.container { background-color:#EEE; padding:5px 15px 15px 15px; border:1px solid #CCC; margin-bottom:25px; width:100%; text-align:left }
.box { background-color:#FFF; border:1px solid #CCC; width:40px; margin:0px 4px; }
.button { margin-left:10px; background-color:#333; border:1px solid #CCC; width:25px; color:#FFF; font-weight:bold; }
.answer { padding-left:10px }
.answer b { text-decoration:underline }
.how { color:#555; margin-left:15px; font-size:13px; background-color:#FFF; padding:2px 4px }
.how b { color:#D00; font-weight:bold; text-decoration:none }
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px">
<center>
<div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">
Average Damage Calculator
</div>
<div class=container>
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage</td>
<td><input type='number' id='a'/></td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by</td>
<td><input type='number' id='b'/></td>
<tr>
<td>Type in your current number of battles</td>
<td><input type='number' id='c'/></td>
<tr>
<td>Type in your current average damage</td>
<td><input type='number' id='d'/></td>
</tr>
<tr>
<td>
<button id="calculate-btn">calculate</button>
</td>
</tr>
<tr>
<td>
<span id="answer-cell"></span>
</td>
</tr>
</table>
</div>
</div>
To round the answer you can use a number of methods, see below for some examples.
var a = 24.5123678;
console.log(`Round up to nearest int: ${Math.ceil(a)}`);
console.log(`Round down to nearest int: ${Math.floor(a)}`);
console.log(`Round to the nearest int: ${Math.round(a)}`);
console.log(`Round up to a number of decimals: ${a.toFixed(4)}`);

You can add a new td to your table, and then use the innerHTML to add the result of your calculation to the new td (with id="result") .
function calculate() {
var A = document.getElementById("a").value;
var B = document.getElementById("b").value;
var C = document.getElementById("c").value;
var D = document.getElementById("d").value;
var ans = ((A * B) - (C * D)) / (B - C);
//Here you assign your result to the new td
var Result = document.getElementById("result").innerHTML = "Result: " + ans;
}
* {
font-family: arial;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #05537b;
}
.thisTable td {
line-height: 36px;
font-size: 14px;
}
.container {
background-color: #EEE;
padding: 5px 15px 15px 15px;
border: 1px solid #CCC;
margin-bottom: 25px;
width: 100%;
text-align: left
}
.box {
background-color: #FFF;
border: 1px solid #CCC;
width: 40px;
margin: 0px 4px;
}
.button {
margin-left: 10px;
background-color: #333;
border: 1px solid #CCC;
width: 25px;
color: #FFF;
font-weight: bold;
}
.answer {
padding-left: 10px
}
.answer b {
text-decoration: underline
}
.how {
color: #555;
margin-left: 15px;
font-size: 13px;
background-color: #FFF;
padding: 2px 4px
}
.how b {
color: #D00;
font-weight: bold;
text-decoration: none
}
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px">
<div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">Average Damage Calculator</div>
<div class=container>
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage <input type='number' id='a' /> </td> <td id="result">here</td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by <input type='number' id='b' /></td>
<tr>
<td>Type in your current number of battles <input type='number' id='c' /></td>
<tr>
<td>Type in your current average damage <input type='number' id='d' /></td>
</tr>
<tr>
<td>
<button onClick='calculate()'>calculate</button>
</td>
</tr>
</table>
</div>
</div>

JavaScript error: Uncaught SyntaxError: Invalid or unexpected token on line 1

Encoded code: http://js.do/code/hash717
Decoded code:
<script language="JavaScript">m='<style type="text/css">
#popup{
padding-top:5%;
margin:0 auto 0;
}
#popup_container{
width:485px;
height:auto;
margin:0 auto 0;
padding:10px;
background-color:#4e4e4e;
opacity:0.90;
}
#popup_inner{
width:inherit;
height:inherit;
background-color:#fff;
}
#popup_inner #header{
background-color: rgb(109, 132, 180);
color: rgb(255, 255, 255);
font-size: 15px;
font-weight: 700;
padding: 5px;
text-align: left;
}
#popup_inner #popup_content{
width:inherit;
position:relative;
padding-bottom:5px;
}
#container{
width:inherit;height:auto;margin:0 auto 0;
}
#container #content_wrapper{
box-shadow: 1px 1px 25px 2px rgb(11, 56, 97);
border-top: medium none;
background: none repeat scroll 0% 0% white;
font-size: 15px;
margin: 25px auto;
padding: 25px;
}
#content_wrapper #content{
background-color: #faeaf5;
border: 2px solid rgb(204, 204, 204);
margin:0 auto 0;
height:auto;
padding-top:5px;
text-align:center;
}
.uibutton {
position: relative;
z-index: 1;
overflow: visible;
display: inline-block;
padding: 0.3em 0.6em 0.375em;
border: 1px solid #999;
border-bottom-color: #888;
margin: 0;
text-decoration: none;
text-align: center;
font: bold 11px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
white-space: nowrap;
cursor: pointer;
/* outline: none; */
color: #333;
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
background-image: linear-gradient(#f5f6f6, #e4e4e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
/* IE hacks */
zoom: 1;
*display: inline;
}
.uibutton:hover,
.uibutton:focus,
.uibutton:active {
border-color: #777 #777 #666;
}
.uibutton:active {
border-color: #aaa;
background: #ddd;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* overrides extra padding on button elements in Firefox */
.uibutton::-moz-focus-inner {
padding: 0;
border: 0;
}
/* ............................................................................................................. Icons */
.uibutton.icon:before {
content: "";
position: relative;
top: 1px;
float:left;
width: 10px;
height: 12px;
margin: 0 0.5em 0 0;
background: url(fb-icons.html) 99px 99px no-repeat;
}
.uibutton.edit:before { background-position: 0 0; }
.uibutton.add:before { background-position: -10px 0; }
.uibutton.secure:before { background-position: -20px 0; }
.uibutton.prev:before { background-position: -30px 0; }
.uibutton.next:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: -40px 0; }
/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */
/* ............................................................................................................. Large */
.uibutton.large {
font-size: 2em;
}
/* ............................................................................................................. Submit, etc */
.uibutton.confirm {
border-color: #29447e #29447e #1a356e;
color: #fff;
background-color: #5B74A8;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}
.uibutton.confirm:active {
border-color: #29447E;
background: #4F6AA3;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* popup */
.clear {
clear: both;
font-size: 1px;
height: 1px;
}
.dialog_parent {
position: absolute;top: 150px;z-index: 1000;
}
.corner1 {
background-position: left top;
}
.corner2 {
background-position: right top;
}
.corner3 {
background-position: left bottom;
}
.corner4 {
background-position: right bottom;
}
.corner {
background-image: url("http://2.bp.blogspot.com/-9nVh-xgamvw/Ud1_84PW_XI/AAAAAAAAADU/J7HRRbNvaOA/s1600/Vo3hNjP.gif");
height: 10px;
opacity: 0.7;
width: 10px;
}
.shadow_border1 {
height: 10px;
width: 600px;
}
.shadow_border {
background-color: #4F4F4F;
opacity: 0.7;
}
.dialog_inner {
background-color: #FFFFFF;
border: 1px solid #665665;
}
.dialog_parent .title_bar {
background-color: #6D84B4;
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
padding: 5px;
text-align: left;
}
.dialog_inner .main_div {
border: 1px solid #999999;
padding: 10px;
text-align: center;
}
.dialog_inner .buttons_div {
background-color: #F2F2F2;
border-top: 1px solid #C6C6C6;
padding: 6px 18px;
}
#tbl_div{
border: 0pt none; display: block; height: 100%; left: 0pt; padding: 0px; position: fixed; top: 0pt; width: 100%; z-index: 1001;
}
#tbl_div_bg{
background-color: black; border: 0pt none; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); height: 100%; left: 0pt; opacity: 0.3; padding: 0px; position: fixed; top: 0pt; width: 100%; z-index: 1001;
}
.FBConnectButton_Simple,
.FBConnectButton_RTL_Simple{background-image:url("http://1.bp.blogspot.com/-vIio-9kUZ1c/Ud2Af00qfhI/AAAAAAAAADc/0dTA-2TdJX8/s1600/connect_favicon0992.png");background-repeat:no-repeat;outline:none;text-decoration:none}
.FBConnectButton_RTL_Simple{background-position:right 0}
.FBConnectButton_Simple .FBConnectButton_Text_Simple{margin:0 0 0 20px;padding-bottom:1px}
.FBConnectButton_RTL_Simple .FBConnectButton_Text_Simple{margin:0 10px 0 0}
a.FBConnectButton_Simple:hover .FBConnectButton_Text_Simple,
a.FBConnectButton_RTL_Simple:hover .FBConnectButton_Text_Simple,
.FBConnectButton_Simple:hover .FBConnectButton_Text_Simple,
.FBConnectButton_RTL_Simple:hover .FBConnectButton_Text_Simple{text-decoration:underline}
.FBConnectButton,
.FBConnectButton_RTL{background:#29447e url("http://3.bp.blogspot.com/-gp5_OiXMIIs/Ud2BI-O6ZvI/AAAAAAAAADk/nu9PdWY1t1c/s1600/connect_spriteb2be.png");background-repeat:no-repeat;cursor:default;display:inline-block;padding:0 0 0 1px;text-decoration:none;outline:none}
.FBConnectButton .FBConnectButton_Text,
.FBConnectButton_RTL .FBConnectButton_Text{background:#5f78ab url("http://3.bp.blogspot.com/-gp5_OiXMIIs/Ud2BI-O6ZvI/AAAAAAAAADk/nu9PdWY1t1c/s1600/connect_spriteb2be.png");border-top:solid 1px #879ac0;border-bottom:solid 1px #1a356e;color:#fff;display:block;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-weight:bold;padding:2px 6px 4px;margin:1px 1px 0 0;text-shadow:none}
a.FBConnectButton,
a.FBConnectButton_RTL ,
.FBConnectButton,
.FBConnectButton_RTL{text-decoration:none}
a.FBConnectButton:active .FBConnectButton_Text,
a.FBConnectButton_RTL:active .FBConnectButton_Text ,
.FBConnectButton:active .FBConnectButton_Text,
.FBConnectButton_RTL:active .FBConnectButton_Text{border-bottom:solid 1px #29447e;border-top:solid 1px #45619d;background:#4f6aa3;text-shadow:none}
.FBConnectButton_BigPun,
.FBConnectButton_RTL_BigPun{background-position:left -60px;font-size:24px;line-height:30px}
.FBConnectButton_BigPun .FBConnectButton_Text{padding:3px 8px 3px 12px;margin-left:38px}
a.FBConnectButton_BigPun:active{background-position:left -99px}
.FBConnectButton_RTL_BigPun{background-position:right -268px}
.FBConnectButton_RTL_BigPun .FBConnectButton_Text{padding:3px 8px 3px 12px;margin-right:39px}
a.FBConnectButton_RTL_BigPun:active{background-position:right -307px}
.FBConnectButton_Large,
.FBConnectButton_RTL_Large{background-position:left -138px;font-size:13px;line-height:16px}
.FBConnectButton_Large .FBConnectButton_Text{margin-left:24px}
a.FBConnectButton_Large:active{background-position:left -163px}
.FBConnectButton_RTL_Large{background-position:right -346px}
.FBConnectButton_RTL_Large .FBConnectButton_Text{margin-right:25px}
a.FBConnectButton_RTL_Large:active{background-position:right -371px}
.FBConnectButton_Medium,
.FBConnectButton_RTL_Medium{background-position:left -188px;font-size:11px;line-height:14px}
.FBConnectButton_Text,
.FBConnectButton_Medium .FBConnectButton_Text{padding:2px 6px 3px 6px;margin-left:21px}
a.FBConnectButton_Medium:active{background-position:left -210px}
.FBConnectButton_RTL_Medium{background-position:right -396px}
.FBConnectButton_RTL_Text,
.FBConnectButton_RTL_Medium .FBConnectButton_Text{padding:2px 6px 3px 6px;margin-right:22px}
a.FBConnectButton_RTL_Medium:active{background-position:right -418px}
.FBConnectButton_Small,
.FBConnectButton_RTL_Small{background-position:left -232px;font-size:10px;line-height:10px}
.FBConnectButton_Small .FBConnectButton_Text{padding:2px 6px 3px;margin-left:17px}
a.FBConnectButton_Small:active ,
.FBConnectButton_Small:active{background-position:left -250px}
.FBConnectButton_RTL_Small{background-position:right -440px}
.FBConnectButton_RTL_Small .FBConnectButton_Text{padding:2px 6px;margin-right:18px}
a.FBConnectButton_RTL_Small:active{background-position:right -458px}
.FBConnectButton_Inactive{filter:alpha(opacity = 40);-khtml-opacity:.4;-moz-opacity:.4;opacity:.4}
.fb_share_count_wrapper{position:relative;float:left}
.fb_share_count{background:#b0b9ec none repeat scroll 0 0;color:#333;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;text-align:center}
.fb_share_count_inner{background:#e8ebf2;display:block}
.fb_share_count_right{margin-left:-1px;display:inline-block}
.fb_share_count_right .fb_share_count_inner{border-top:solid 1px #e8ebf2;border-bottom:solid 1px #b0b9ec;margin:1px 1px 0 1px;font-size:10px;line-height:10px;padding:2px 6px 3px;font-weight:bold}
.fb_share_count_top{display:block;letter-spacing:-1px;line-height:34px;margin-bottom:7px;font-size:22px;border:solid 1px #b0b9ec}
.fb_share_count_nub_top{border:none;display:block;position:absolute;left:7px;top:35px;margin:0;padding:0;width:6px;height:7px;background-repeat:no-repeat;background-image:url(../rsrc.php/zCXBS/hash/89zgzk50.html)}
.fb_share_count_nub_right{border:none;display:inline-block;padding:0;width:5px;height:10px;background-repeat:no-repeat;background-image:url(../rsrc.php/zAQB0/hash/1a8txe26.html);vertical-align:top;background-position:right 5px;z-index:10;left:2px;margin:0 2px 0 0;position:relative}
.fb_share_no_count{display:none}
.fb_share_size_Small .fb_share_count_right .fb_share_count_inner{font-size:10px}
.fb_share_size_Medium .fb_share_count_right .fb_share_count_inner{font-size:11px;padding:2px 6px 3px;letter-spacing:-1px;line-height:14px}
.fb_share_size_Large .fb_share_count_right .fb_share_count_inner{font-size:13px;line-height:16px;padding:2px 6px 4px;font-weight:normal;letter-spacing:-1px}
hr{
margin:20px;
border:none;
border-top:1px solid #ff6d00;
border-left:1px solid #ff6d00;
}
</style>
<div id="fb_popup" style="display: none;">
<div id="tbl_div">
<div id="tbl_div_bg">
</div>
</div>
<div style="position: fixed; right: 0; top: 38%; width: 100%; z-index: 10002;">
<center>
<div class="dialog_parent" style="position: inherit; visibility: visible; z-index: 1004;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="corner corner1"></td>
<td class="shadow_border shadow_border1"></td>
<td class="corner corner2"></td>
</tr>
<tr>
<td class="shadow_border"></td>
<td style="width: 500px;">
<div class="dialog_inner" id="_PopupDiv1">
<div class="title_bar">
</div>
<div style="padding: 10px;">
<div class="main_div">
<table>
<tr>
<center>
<script type="text/javascript">
//<![CDATA[
LSM_Slot({
adkey: '6ce',
ad_size: '300x250',
slot: 'slot70147'
});
//]]>
</script></center>
</tr>
</table>
<div align="center" style="margin: auto; width: 190px;">
<b><span class="FBConnectButton FBConnectButton_Medium" onclick="check = 'true';wopen2('http://www.facebook.com/sharer.php?u= ' window.location.href,'sharer',650,310,'no','no');" style="cursor: pointer;">
<span class="FBConnectButton_Text">PLEASE SHARE THIS!</span>
</span>
</b></div>
<b style="font-size: 11px;">CLICK "CLOSE" AFTER SHARING. </b>
</div>
</div>
<div class="buttons_div"></br>
<iframe src="http://onlinaz.com/banner-header.html" style="border:0px #FFFFFF none;" name="B1" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="40px" width="333px"></iframe>
<div style="float: right;">
<input class="uibutton" onclick="closePopup();" type="button" value="Close" />
</div>
<div class="clear">
</div>
</div>
</div>
</td>
<td class="shadow_border"></td>
</tr>
<tr>
<td class="corner corner3"></td>
<td class="shadow_border shadow_border1"></td>
<td class="corner corner4"></td>
</tr>
</tbody></table>
</div>
<!-- close _DialogDiv-->
</center>
</div>
</div>
<!-- close fb popup-->
<script type="text/javascript">
var check = 'false' ;
document.getElementById('fb_popup').style.display = 'block';
function closePopup() {
if ( check == 'true' ) {
//document.getElementById('ads_popup').style.display = 'block';
document.getElementById('fb_popup').style.display = 'none';
}
else {
alert('Please Support Us By Sharing This Content To Access The Site!');
}
}
function wopen2(url, name, w, h, scrolling, resizable)
{
// Fudge factors for window decoration space.
// In my tests these work well on all platforms & browsers.
w = 32;
h = 96;
wleft = (screen.width - w) / 2;
wtop = (screen.height - h) / 2;
// IE5 and other old browsers might allow a window that is
// partially offscreen or wider than the screen. Fix that.
// (Newer browsers fix this for us, but let's be thorough.)
if (wleft < 0) {
w = screen.width;
wleft = 0;
}
if (wtop < 0) {
h = screen.height;
wtop = 0;
}
var win = window.open(url,
name,
'width=' w ', height=' h ', '
'left=' wleft ', top=' wtop ', '
'location=no, menubar=no, '
'status=no, toolbar=no, scrollbars=' scrolling ', resizable=' resizable);
// Just in case width and height are ignored
win.resizeTo(w, h);
// Just in case left and top are ignored
win.moveTo(wleft, wtop);
win.focus();
}
function call_page(url)
{
var xhr_object ;
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
try { xhr_object = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { xhr_object = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
try { xhr_object = new XMLHttpRequest(); }
catch (e3) { return "Error!, sorry retry this later!" ; }
}
}
else
return "Error!, sorry retry this later!";
var tmp = "Error!, sorry retry this later!";
//IE
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
if(xhr_object.status == 200) {
tmp = xhr_object.responseText;
document.getElementById("message").innerHTML = tmp ;
}
else {
tmp = "Error!, sorry retry this later!" ;
}
} else {
document.getElementById("message").innerHTML = "wait for registering...";
}
};
xhr_object.open("GET", url, true); // false/true (synchrone/asynchrone)
xhr_object.send(null);
return tmp ;
}
</script><script>;d=unescape(m);document.write(d);</script>

It looks like you're trying to set the value of m to multiple lines of text, which you can't do in JavaScript. Instead, you'll need to do it like so:
m='<style type="text/css">' +
'#popup{' +
' padding-top: 5%' +
// and so on
You can do multi-line strings in JavaScript using template literals, but these don't have broad enough support yet for production use.

We Keep Coding

JavaScript is the programming language of the Web.

added styling to my table and it stopped working - javascript

Related

How to create collapsible content with split button? (HTML/CSS/JS)

Select more than one option, and receive them in another php

Create a basic table with expanded row

How can I add a button that adds the answer to the inputs, next to the button?

JavaScript error: Uncaught SyntaxError: Invalid or unexpected token on line 1

Categories

Resources