How can I save three variables using function and button? - javascript

(https://i.stack.imgur.com/T11l5.png)(https://i.stack.imgur.com/KTAmO.png)(https://i.stack.imgur.com/Aimnc.png)
I was trying to save the first number of an operation on a variable "num1", then the operation sign on another variable "sign" and then the other number in other variable "num2" for later calculate them. Is that possible considering there is only one function?
I've tried using if/else for solving this problem but it didn't work. So now I need another solution. I know there is other solutions for this problem, but I need this way: work with 3 variables or more.
function soma(){
let numero1 = document.getElementById("numero1").value;
let numero2 = document.getElementById("numero2").value;
let soma = numero1+numero2;
alert(soma)
}
// function exibir(){
// let nome = prompt("Qual o seu nome?")
// alert("Bem vindo, " + nome + "!")
// }
function idade(){
let anoAtual = 2023
let idade = 2023 - (prompt("Qual o ano do seu nascimento? "))
alert("Sua idade: " + idade)
}
function hello(){
alert("Seja bem-vindo!")
// console.log("Seja bem-vindo!")
}
function exibir(){
let primeiro = document.getElementById("primeiro").value;
let segundo = document.getElementById("segundo").value;
alert(primeiro + " " + segundo);
}
function inserir(num) {
let numero = document.getElementById('resultado').innerHTML;
document.getElementById('resultado').innerHTML = numero + num;
}
function limpar(){
document.getElementById('resultado').innerHTML = "";
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.principal {
text-align: center;
width: 100%;
text-decoration: none;
color: black;
background-color: rgb(198, 226, 43);
padding-bottom: 30px;
padding-top: 30px;
}
#primeiro {
height: 37.6px;
border-radius: 25px;
text-align: center;
padding-bottom: 5px;
}
#segundo {
height: 37.6px;
border-radius: 25px;
text-align: center;
padding-bottom: 5px;
}
button a {
color: black;
text-decoration: none;
}
.calculadora {
background-color: rgb(136, 142, 148);
padding: 7px;
margin: 3px;
border-radius: 25px;
}
.calculadora button {
margin: 3px;
width: 40px;
height: 40px;
border-radius: 15px;
}
.calculadora p {
background-color: white;
border-radius: 15px;
height: 40px;
text-align: right;
margin: 3px;
padding: 5px;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aula 1</title>
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body onload="hello()">
<div class="principal">
<h1>Aula 1</h1>
<button class="btn btn-secondary" onclick="exibir()">Bem-vindo</button>
<button class="btn btn-info" onclick="idade()">Idade</button>
<button class="btn btn-light">Acessar</button>
<input id="primeiro" type="text" placeholder="Nome">
<input id="segundo" type="text" placeholder="Sobrenome">
</div>
<div class="calculadora">
<table>
<p id="resultado"></p>
<tr>
<td><button class="botao" onclick="inserir('7')">7</button></td>
<td><button class="botao" onclick="inserir('8')">8</button></td>
<td><button class="botao" onclick="inserir('9')">9</button></td>
<td><button class="botao" onclick="inserir('*')">X</button></td>
</tr>
<tr>
<td><button class="botao" onclick="inserir('4')">4</button></td>
<td><button class="botao" onclick="inserir('5')">5</button></td>
<td><button class="botao" onclick="inserir('6')">6</button></td>
<td><button class="botao" onclick="inserir('-')">-</button></td>
</tr>
<tr>
<td><button class="botao" onclick="inserir('1')">1</button></td>
<td><button class="botao" onclick="inserir('2')">2</button></td>
<td><button class="botao" onclick="inserir('3')">3</button></td>
<td><button class="botao" onclick="inserir('+')">+</button></td>
</tr>
<tr>
<td><button class="botao" onclick="inserir('/')">/</button></td>
<td><button class="botao" onclick="inserir('0')">0</button></td>
<td><button class="botao" onclick="limpar()">C</button></td>
<td><button class="botao" onclick="calcular()">=</button></td>
</tr>
</table>
</div>
<p id="mostraNum1">Num1</p>
<script src="javascript/script.js" type="text/javascript"></script>
</body>
</html>


Declare the variables outside the function
Example:
var hi = ‘hi’;
function sayHi(){
console.log(hi);
}
>>> hi

Related

Iframe head's script only working when pasted in the console

I have a calculator that is inside of an iframe.
<iframe id="tool_iframe" scrolling="no" height="750" srcdoc="
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;600;700&display=swap');
body{
height:100vh;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
font-family: 'Poppins', sans-serif;
background-position:center center;
}
.container {
width: 520px;
background-color: #ffffff20;
margin: 120px auto;
}
table {
width: 100%;
border-color: transparent;
font-family: 'Poppins', sans-serif;
border-radius:20px;
}
td {
width: 25%;
}
button {
width: 100%;
height: 90px;
font-size: 32px;
background-color: white;
border: none;
color:#273342;
}
#inputLabel {
height:100px;
font-size: 60px;
vertical-align: bottom;
text-align: right;
background-color: #27334210;
color:white;
padding:0 10px 0 0;
font-family: 'Poppins', sans-serif;
border-top-radius:20px;
}
</style>
<script>
var inputLabel = document.getElementById('inputLabel');
function pushBtn(obj) {
var pushed = obj.innerHTML;
if (pushed == '=') {
//Calculate
inputLabel.innerHTML = eval(inputLabel.innerHTML);
} else if (pushed == 'AC') {
//All clear
inputLabel.innerHTML = '0';
} else {
if (inputLabel.innerHTML == '0') {
inputLabel.innerHTML = pushed;
} else {
inputLabel.innerHTML += pushed;
}
}
}
</script>
</head>
<body>
<html>
<body>
<div class="container">
<table border="1" cellspacing="0">
<tr>
<td colspan="4" id="inputLabel">0</td>
</tr>
<tr>
<td colspan="3"><button onclick="pushBtn(this);">AC</button></td>
<td><button onclick="pushBtn(this);">/</button></td>
</tr>
<tr>
<td><button onclick="pushBtn(this);">7</button></td>
<td><button onclick="pushBtn(this);">8</button></td>
<td><button onclick="pushBtn(this);">9</button></td>
<td><button onclick="pushBtn(this);">*</button></td>
</tr>
<tr>
<td><button onclick="pushBtn(this);">4</button></td>
<td><button onclick="pushBtn(this);">5</button></td>
<td><button onclick="pushBtn(this);">6</button></td>
<td><button onclick="pushBtn(this);">-</button></td>
</tr>
<tr>
<td><button onclick="pushBtn(this);">1</button></td>
<td><button onclick="pushBtn(this);">2</button></td>
<td><button onclick="pushBtn(this);">3</button></td>
<td><button onclick="pushBtn(this);">+</button></td>
</tr>
<tr>
<td colspan="2"><button onclick="pushBtn(this);">0</button></td>
<td><button onclick="pushBtn(this);">.</button></td>
<td><button onclick="pushBtn(this);">=</button></td>
</tr>
</table>
</div>
</body>
</html>
</body>
</html> "></iframe>
The actual website is https://tropical.team/tool/calculator/ if you want to take a look for yourself. You can see when you load in everything loads fine but the calculator just doesn't work, i know the code is valid because when i copy the script from the head of the iframe and paste it into the consxole it workks. This must mean that it's a problem with the document.reference not working inside the iframe. The calculkator code is user made which means i can only modify it automaticaly in minor ways, like changing all document references to something else. What could i chage them to that would generally fix this?

How to populate modals individually from input in every row?

Adding new info input changes the previous modal contents.
$(document).ready(function() {
$('#mainTable').DataTable({});
var dataTable = $("#mainTable").dataTable().api();
$("#add").click(function() {
var fname = $('#fname').val();
lname = $('#lname').val();
var info = $('.info').val();
tr = document.createElement("tr");
tr.innerHTML = "<tr><td>" + fname + "</td><td>" + lname + "</td><td><div><button id='showInfo' class='showInfo' type='button'>&plus;</button></div></td></tr>";
dataTable.row.add(tr);
dataTable.draw();
$(document).on("click", '.showInfo', function() {
$('.modalinfo').text(info);
$(".modal").css("display", "block");
});
$(".close").click(function() {
$(".modal").css("display", "none");
});
});
});
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
Result Size: 753 x 671
color: #000;
text-decoration: none;
cursor: pointer;
}
<head>
<link rel="stylesheet" type="text/css" href="{% static '//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css' %}">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div id="inputlines">
<table>
<tr>
<td>First Name:</td>
<td><input type="text" onfocus="this.value=''" id="fname"></td>
<td>Last Name:</td>
<td><input type="text" onfocus="this.value=''" id="lname"></td>
<td>Info:</td>
<td><input type="text" onfocus="this.value=''" id="info" class="info"></td>
<td><input type="button" id="add" value="Add"></td>
</tr>
</table>
</div>
<table id="mainTable">
<thead id="myTableData">
<tr>
<th><b>First Name</b></th>
<th><b>Last Name</b></th>
<th> </th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="modalinfo"></p>
</div>
</div>
<input type="button" id="showInfo" class='showInfo' style="display:none;">
</body>
https://jsfiddle.net/averola/b4p0zu6q/3/

The issue is because you add a new event to every pre-existing .showInfo element when a new one is added to the DOM. This overwrites the info value with the latest one for each instace.
To fix this you could add the info value as a data attribute on each new button you append, and this can then be read back out of the DOM in a single delegated event handler which applies to all buttons. Try this:
$(document).ready(function() {
$('#mainTable').DataTable({});
var dataTable = $("#mainTable").dataTable().api();
$("#add").click(function() {
let fname = $('#fname').val();
let lname = $('#lname').val();
let info = $('.info').val();
let $tr = $(`<tr><td>${fname}</td><td>${lname}</td><td><div><button class="showInfo" type="button" data-info="${info}">&plus;</button></div></td></tr>`);
dataTable.row.add($tr);
dataTable.draw();
});
$(document).on("click", '.showInfo', function() {
$('.modalinfo').text($(this).data('info'));
$(".modal").css("display", "block");
});
$(".close").click(function() {
$(".modal").css("display", "none");
});
});
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<link rel="stylesheet" type="text/css" href="{% static '//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css' %}">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<div id="inputlines">
<table>
<tr>
<td>First Name:</td>
<td><input type="text" onfocus="this.value=''" id="fname"></td>
<td>Last Name:</td>
<td><input type="text" onfocus="this.value=''" id="lname"></td>
<td>Info:</td>
<td><input type="text" onfocus="this.value=''" id="info" class="info"></td>
<td><input type="button" id="add" value="Add"></td>
</tr>
</table>
</div>
<table id="mainTable">
<thead id="myTableData">
<tr>
<th><b>First Name</b></th>
<th><b>Last Name</b></th>
<th> </th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="modalinfo"></p>
</div>
</div>
<input type="button" id="showInfo" class='showInfo' style="display:none;">

Adding table row for only specific table

I have a table of two for different exercise and my goal is to be able to add new row for each exercise. Below I have a working snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
color: #404E67;
background: #F5F7FA;
font-family: 'Open Sans', sans-serif;
}
.table-wrapper {
width: 40%;
margin: 30px auto;
background: transparent;
padding: 20px;
border-style: solid;
height: 50%;
}
.table-title {
padding-bottom: 10px;
margin: 0 0 10px;
}
.table-title h2 {
margin: 6px 0 0;
font-size: 22px;
}
table.table {
margin-left: em;
}
table.table tr th,
table.table tr td {
border-color: #e9e9e9;
position: relative;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table th:last-child {
width: 100px;
}
table.table td a {
cursor: pointer;
display: inline-block;
margin: 0 5px;
min-width: 24px;
}
table.table td a.add {
color: #27C46B;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #E34724;
}
table.table td i {
font-size: 19px;
}
table.table td a.add i {
font-size: 24px;
margin-right: -1px;
position: relative;
top: 3px;
}
table.table .form-control {
height: 32px;
line-height: 32px;
box-shadow: none;
border-radius: 2px;
position: absolute;
width: calc(100% - 24px);
padding: 0px;
}
table.table .form-control.error {
border-color: #f50000;
}
table.table td .add {
display: none;
}
table th {
width: auto !important;
color: white;
text-align: center;
vertical-align: middle;
}
td {
color: white;
text-align: center;
vertical-align: middle;
}
.head {
background-color: #4D4F5C;
border-bottom: 3px solid white;
}
#body {
background-color: #4D4F5C;
}
#add_button {
margin-left: 9.5em;
}
h4 {
text-align: center;
}
#name {
text-align: center;
}
#reps {
text-align: center;
}
#weight {
text-align: center;
}
#edit {
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function() {
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row =
'<tr>' +
'<td><input type="text" class="form-control" name="name" id="name"></td>' +
'<td><input type="text" class="form-control" name="weight" id="weight"></td>' +
'<td><input type="text" class="form-control" name="reps" id="reps"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function() {
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function() {
if (!$(this).val()) {
$(this).addClass("error");
empty = true;
} else {
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if (!empty) {
input.each(function() {
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function() {
$(this).parents("tr").find("td:not(:last-child)").each(function() {
$(this).html('<input type="text" class="form-control w-2" id="edit" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function() {
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
});
</script>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<table class="table table-borderless">
<thead>
<tr class="head">
<th>Set</th>
<th>Weight(Kg)</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>30</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>30</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<button id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<table class="table table-borderless">
<thead>
<tr class="head">
<th>Set</th>
<th>Weight(Kg)</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>20</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>15</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<button id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
</div>
</body>
</html>
As you can see, if you try to add a new set to one exercise, it will also add a new line for the other exercise, which is not what I wanted. What I want is to be able to add a new set for specific exercise, without a new row being automatically added to another exercise.
How can I achieve this?

You have to uniquely identify each table and button in order to accomplish this. The easiest way is to add an unique id attribute to each table, then add that same value to a name attribute on the respective button.
Meaning, if we call the first table "table1" it needs an id attribute that equals "table1".. then the 'Add Set' button for that table needs to have a name attribute that is also "table1"..(keep in mind I am just using the value "table1" as an example - "table1" could be any value you want, just as long as they match... they have to match due to how I coded the function) For example:
<table id="table1"> ...
<button name="table1">...
This is just one way to do it.. You can do it differently.. the trick is just making sure you can uniquely identify each table and the button on that table..
I have made comments in the code below to make things more legible/understandable..
Demo:
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function () {
$(this).attr("disabled", "disabled");
//
// ** Get the unique value we are using from the button **
//
let tableName = $(this).attr('name');
//
// ** Use the unique value on that button, to find the table **
//
var index = $(`#${tableName} tbody tr:last-child`).index();
var row =
'<tr>' +
'<td><input type="text" class="form-control" name="name" id="name"></td>' +
'<td><input type="text" class="form-control" name="weight" id="weight"></td>' +
'<td><input type="text" class="form-control" name="reps" id="reps"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
//
// ** Use the unique value to append row to correct table **
//
$(`#${tableName}`).append(row);
$(`#${tableName} tbody tr`).eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function () {
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function () {
if (!$(this).val()) {
$(this).addClass("error");
empty = true;
} else {
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if (!empty) {
input.each(function () {
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function () {
$(this).parents("tr").find("td:not(:last-child)").each(function () {
$(this).html('<input type="text" class="form-control w-2" id="edit" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function () {
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
});
body {
color: #404E67;
background: #F5F7FA;
font-family: 'Open Sans', sans-serif;
}
.table-wrapper {
width: 40%;
margin: 30px auto;
background: transparent;
padding: 20px;
border-style: solid;
height: 50%;
}
.table-title {
padding-bottom: 10px;
margin: 0 0 10px;
}
.table-title h2 {
margin: 6px 0 0;
font-size: 22px;
}
table.table {
margin-left: em;
}
table.table tr th,
table.table tr td {
border-color: #e9e9e9;
position: relative;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table th:last-child {
width: 100px;
}
table.table td a {
cursor: pointer;
display: inline-block;
margin: 0 5px;
min-width: 24px;
}
table.table td a.add {
color: #27C46B;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #E34724;
}
table.table td i {
font-size: 19px;
}
table.table td a.add i {
font-size: 24px;
margin-right: -1px;
position: relative;
top: 3px;
}
table.table .form-control {
height: 32px;
line-height: 32px;
box-shadow: none;
border-radius: 2px;
position: absolute;
width: calc(100% - 24px);
padding: 0px;
}
table.table .form-control.error {
border-color: #f50000;
}
table.table td .add {
display: none;
}
table th {
width: auto !important;
color: white;
text-align: center;
vertical-align: middle;
}
td {
color: white;
text-align: center;
vertical-align: middle;
}
.head {
background-color: #4D4F5C;
border-bottom: 3px solid white;
}
#body {
background-color: #4D4F5C;
}
#add_button {
margin-left: 9.5em;
}
h4 {
text-align: center;
}
#name {
text-align: center;
}
#reps {
text-align: center;
}
#weight {
text-align: center;
}
#edit {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<!--
==========================================================================
** Give each table an id **
** this id must match the NAME attribute on the 'Add Set' button
==========================================================================
-->
<table id="table1" class="table table-borderless">
<thead>
<tr class="head">
<th>Set</th>
<th>Weight(Kg)</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>30</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>30</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<!--
=============================================================================
** Give each button a name attribute **
** this name attribute must match the ID attribute on the correct Table **
=============================================================================
-->
<button name="table1" id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<!--
==========================================================================
** Give each table an id **
** this id must match the NAME attribute on the 'Add Set' button **
==========================================================================
-->
<table id="table2" class="table table-borderless">
<thead>
<tr class="head">
<th>Set</th>
<th>Weight(Kg)</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>20</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>15</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<!--
=============================================================================
** Give each button a name attribute **
** this name attribute must match the ID attribute on the correct Table **
=============================================================================
-->
<button name="table2" id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
</div>
</body>
</html>

Cant save content editable to localstorage?

I want to save the content editable data to local storage.
Right now if you try to edit the stock table it changes, then when you refresh the page, it goes back to initial value.
Is there a way to do this automatically, without requiring a button to save it? Just by exiting the text box, it should save automatically.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Inventory</title>
<link href="https://fonts.googleapis.com/css?family=Anton|Titan+One" rel="stylesheet">
<style type="text/css">
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#hewrap{
text-align: center;
}
#he {
font-family: 'Titan One', cursive;
font-family: 'Anton', sans-serif;
color: white;
background-color: black;
font-size: 32px;
}
.fi {
border-radius:5px;
height: 30px;
}
#btn {
border-radius: 5px;
height: 30px;
background-color: blue;
color:white;
}
#ftr {
background-color: black;
}
</style>
</head>
<body>
<a class="c-link" href='' onclick='javascript:clearLocal();'>Clear storage</a>
<div id="hewrap">
<h1 id="he">Inventory</h1>
</div>
<table id="inventory">
<thead>
<tr>
<th>Description</th>
<th>Part-#</th>
<th>Required</th>
<th>Stock</th>
<th>Price</th>
<th>N/A</th>
</tr>
<tr id="ftr">
<td><input class="fi" type="text" id="one" placeholder="Description"></td>
<td><input class="fi" type="text" id="two" placeholder="Part-#"></td>
<td><input class="fi" type="text" id="three" placeholder="Required"></td>
<td><input class="fi" type="text" id="four" placeholder="Stock"></td>
<td><input class="fi" type="text" id="five" placeholder="Price"></td>
<td><button id="btn" onclick="addRow()">ADD</button></td>
</tr>
</thead>
<tbody id="screen">
</tbody>
</table>
</body>
<script>
//scribble data
//save
$( document ).ready(function(){
$('#screen').html(localStorage.getItem("data"));
});
function addRow(){
var str = '<tr class = "boxType"><td>'+$('#one').val()+'</td>\
<td>'+$('#two').val()+'</td>\
<td>'+$('#three').val()+'</td>\
<td id="scribble" contenteditable="true" onkeyup="storeUserScribble(this.id);">'+$('#four').val()+'</td>\
<td>'+$('#five').val()+'</td>\
</tr>'
$('#screen').append(str);
localStorage.setItem("data", $('#screen').html());
}
</script>
<script type="text/javascript">
getUserScribble();
</script>
</html>

Function for AddRow & Popup not working as expected

I am new to the development field.
There are two problem with this code.
First when I click button for add_Row then a row gets added on screen but it disappears after 1-2 seconds and same thing happens with group_Create() popup.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Inventory Expert</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../../Bootstrap-3.3.2-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../../CSS/ProductMaster/ProductMaster.css"/>
<link rel="stylesheet" href="../../CSS/ProductMaster/RawMaterialGroup.css"/>
<script src="../../JAVASCRIPT/ProductMaster/ProductMaster.js"></script>
<script src="../../JAVASCRIPT/ProductMaster/RawMaterialGroup.js"></script>
<script src="../../jquery-1.11.2.js"></script>
<script src="../../jquery-ui-1.11.2.custom/jquery-ui.js"></script>
<script src="../../jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
</head>
<body>
<img id="top" src="../../Images/shaddow_line_top.png" alt=""/>
<div class="container">
<h1><a>Product Master</a></h1>
<form id="productmasterForm">
<table class="table" id="productmasterTable">
<tr>
<td class="W45">Product Code <input id="productid" type="text"/></td>
<td class="W45">Product Name <input id="productname" type="text"/></td>
<td class="W10"></td>
</tr>
<tr>
<td class="W45">Basic Raw Material <input id="basicraw" type="text"/></td>
<td class="W45">Group Name <input id="groupname" type="text"/></td>
<td class="W10">
<div class="btn-group">
<button class="btn btn-info btn-sm" id="groupcreate" onclick="group_Create()">C</button>
<button class="btn btn-info btn-sm" id="groupedit" onclick="group_Edit()">E</button>
</div>
</td>
</tr>
<tr>
<td class="W40">Raw Material <input id="rm1" type="text"/></td>
<td class="W30">Size <input id="s1" type="text"/></td>
<td class="W20">Qty. <input id="q1" type="text"/></td>
<td class="W10">
<div class="btn-group">
<button class="btn btn-info btn-sm" onclick="maprawNsize()">C</button>
<button class="btn btn-info btn-sm" onclick="maprawNsize_Edit()">E</button>
<button class="btn btn-info btn-sm" id="pma" onclick="add_Row()">A</button>
</div>
</td>
</tr>
<tr>
<td class="W45">VAT Rate <input id="vat" type="text"/></td>
<td class="W45">Unit Of Measure <input id="uom" type="text"/></td>
<td class="W10"></td>
</tr>
<tr>
<td class="W45">Manufacturing Cost <input id="menucost" type="text"/></td>
<td class="W45">Sale Rate <input id="salerate" type="text"/></td>
<td class="W10"></td>
</tr>
<tr>
<td class="W45">Maximum Retail Price <input id="mrp" type="text"/></td>
<td class="W45">Default Discount <input id="defdisc" type="text"/></td>
<td class="W10"></td>
</tr>
<tr>
<td class="W45">Rate List Date <input id="listdate" type="text"/></td>
<td class="W45">Kit Reference <input id="kitref" type="text"/></td>
<td class="W10"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
JavaScript File ProductMaster.js
var rowCount = 1;
var rowPosition = 3;
var id = 2;
function add_Row() {
if (rowCount < 11) {
var table = document.getElementById("productmasterTable");
var row = table.insertRow(rowPosition);
rowPosition++;
for (i = 0; i < 1; i++) {
var td1 = document.createElement("td");
td1.innerHTML = 'Raw Material <input id="rm' + id + '" type="text"/>';
row.appendChild(td1);
td1.setAttribute("class", "W40");
}
for (i = 0; i < 1; i++) {
var td2 = document.createElement("td");
td2.innerHTML = 'Size <input id="s' + id + '" type="text"/>';
row.appendChild(td2);
td2.setAttribute("class", "W30");
}
for (i = 0; i < 1; i++) {
var td3 = document.createElement("td");
td3.innerHTML = 'Qty. <input id="q' + id + '" type="text"/>';
row.appendChild(td3);
td3.setAttribute("class", "W20");
}
id++;
rowCount++;
}
else {
alert("Only 10 Allowed");
}
}
JavaScript File RawMaterialGroup.js
function group_Create(){
document.getElementById('rawgroup').style.display = "block";
}
function group_Hide(){
document.getElementById('rawgroup').style.display = "none";
}
function group_Edit(){
alert("I Am Clicked");
}
var rowCount = 5;
var rowPosition = 7;
var id = 2;
function add_rawMaterial() {
if (rowCount < 16) {
var table = document.getElementById("groupTable");
var row = table.insertRow(rowPosition);
rowPosition++;
for (i = 0; i < 1; i++) {
var td1 = document.createElement("td");
td1.innerHTML = 'Raw Material <input id="rmgrm' + id + '" type="text"/>';
row.appendChild(td1);
td1.setAttribute("class", "W40");
}
for (i = 0; i < 1; i++) {
var td2 = document.createElement("td");
td2.innerHTML = 'Qty. <input id="rmgq' + id + '" type="text"/>';
row.appendChild(td2);
td2.setAttribute("class", "W20");
}
for (i = 0; i < 1; i++) {
var td3 = document.createElement("td");
td3.innerHTML = 'UOM <input id="rmguom' + id + '" type="text"/>';
row.appendChild(td3);
td3.setAttribute("class", "W20");
}
id++;
rowCount++;
}
else {
alert("Only 15 Allowed");
}
}
CSS File ProductMaster.css
body{
text-align: center;
overflow: hidden;
}
td{
float: left;
text-align: left
}
#rm1,#rm2,#rm3,#rm4,#rm5,#rm6,#rm7,#rm8,#rm9,#rm10{
width: 250px;
height: 30px
}
#s1,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9,#s10{
width: 250px;
height: 30px;
}
#q1,#q2,#q3,#q4,#q5,#q6,#q7,#q8,#q9,#q10{
width: 100px;
height: 30px;
}
.W45{
width: 45%;
}
.W10{
width: 10%;
}
.W15{
width: 15%;
}
.W20{
width: 20%;
}
.W30{
width: 30%;
}
#productid{
width: 100px;
height: 30px;
}
#productname{
width: 300px;
height: 30px;
}
#basicraw{
width: 259px;
height: 30px;
}
#groupname{
width: 315px;
height: 30px;
}
#productmasterForm{
font-size: 20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#vat{
width: 80px;
height: 30px;
}
#uom{
width: 80px;
height: 30px;
}
#menucost{
width: 80px;
height: 30px;
}
#salerate{
width: 80px;
height: 30px;
}
#mrp{
width: 80px;
height: 30px;
}
#defdisc{
width: 80px;
height: 30px;
}
#listdate{
width: 120px;
height: 30px;
}
#kitref{
width: 100px;
height: 30px;
}
CSS File RawMaterialGroup.css
h2 {
background-color:#00a2e2;
padding:20px 20px;
margin:-10px -10px;
text-align:center;
border-radius:10px 10px 0 0;
border: 1px solid #313131;
}
#rawgroup{
width: 100%;
height: 100%;
opacity: 0.95;
top: 0;
bottom: 0;
display: none;
position: fixed;
background-color: #313131;
overflow: hidden;
alignment-adjust: central;
}
div#groupPopup{
position: fixed;
left: 18%;
top: 17%;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
img#close_group{
position: absolute;
right: -7px;
top: -7px;
cursor: pointer;
}
#groupForm{
max-width: 900px;
min-width: 900px;
padding: 10px 10px;
border: 2px solid gray;
border-radius: 10px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #fff;
margin:-10px -11px;
text-align:center;
border-radius:10px 10px 10px 10px;
}
.W40{
width: 40%;
}
.W20{
width: 20%;
}
.W10{
width: 10%;
}
#rmgrm1,#rmgrm2,#rmgrm3,#rmgrm4,#rmgrm5,#rmgrm6,#rmgrm7,#rmgrm8,#rmgrm9,#rmgrm10,#rmgrm11,#rmgrm12,#rmgrm13,#rmgrm14,#rmgrm15{
width: 215px;
height: 30px;
}
#rmgq1,#rmgq2,#rmgq3,#rmgq4,#rmgq5,#rmgq6,#rmgq7,#rmgq8,#rmgq9,#rmgq10,#rmgq11,#rmgq12,#rmgq13,#rmgq14,#rmgq15{
width: 80px;
height: 30px;
}
#rmguom1,#rmguom2,#rmguom3,#rmguom4,#rmguom5,#rmguom6,#rmguom7,#rmguom8,#rmguom9,#rmguom10,#rmguom11,#rmguom12,#rmguom13,#rmguom14,#rmguom15{
width: 50px;
height: 30px;
}
#rmggn{
width: 200px;
height: 30px;
}
#rmggi{
width: 100px;
height: 30px;
}

You need to add type="button" since the default action in some browsers is a submit
<button type="button" ....>C</button>
<button type="button" ....>E</button>
Alternatively add ;return false to your onclick events like this:
onclick="add_Row(); return false"
to not submit the page
Better would be to assign the event handlers in an onload event but still you need to preventDefault the button's click event if it is not type="button"

Categories

Resources