Passing a HTML element with ID - javascript

my question is about a code combining HTML5 features ContentEditable and localStorage.
Here is my two JS function, one for storing the user edit in the table cell, another for getting the value and pass it to the table cell.
<script type="text/javascript">
function storeUserEdit(id) {
var pre_value = document.getElementById(id).innerHTML;
localStorage.setItem("userEdit",pre_value);
}
function applyUserEdit() {
if (localStorage.getItem("userEdit")){
var new_value = localStorage.getItem("userEdit");
}
document.getElementById('prjSch_row1_col1').innerHTML = localStorage.getItem("userEdit");
}
</script>
and here these two functions embedded in body content:
...
<td id="prjSch_row1_col1" contenteditable="true" onkeyup="storeUserEdit(this.id)" >
</td>
<script>applyUserEdit()</script>
...
I want to use this to many table cells in my HTML page and how I can replace prjSch_row1_col1 with id and pass it to function getUserEdit();
thanks a lot!

Are you trying to do something like this. because what you mention in the question is not enough to me to think about an answer. When do you need to fire applyUserEdit() function, on page load or ...
Please let me know enough details.
16/08/2013 >
Very sorry for the delay! Please find the below code which I tested in Firefox. Is this the behavior you want. Please don't test in fiddler. It's not working there, I don't know why.
`
<head>
<script type="text/javascript">
function storeUserEdit(id) {
var pre_value = document.getElementById(id).innerHTML;
localStorage.setItem("userEdit",pre_value);
localStorage.setItem('userEditControl', id);
}
function applyUserEdit(id) {
var new_value = '';
if (localStorage.getItem("userEdit")){
new_value = localStorage.getItem("userEdit");
}
if(localStorage.getItem('userEditControl') === id){
document.getElementById(id).innerHTML = localStorage.getItem("userEdit");
}
//this is just to check whether the code is working
document.getElementById('log').value = document.getElementById('log').value + '\n' + localStorage.getItem("userEdit");
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>User Name:</td>
<td id="uname" contenteditable="true" onkeyup="storeUserEdit(this.id)" onblur="applyUserEdit(this.id)">value...</td>
</tr>
<tr>
<td>Password:</td>
<td id="pword" contenteditable="true" onkeyup="storeUserEdit(this.id)" onblur="applyUserEdit(this.id)">value...</td>
</tr>
</table>
<textarea multiline="true" id="log"></textarea>
</body>
`
Please let me know if you have any issues...

Related

Make table data collapsible

I am trying to make each heading part which is a table collapsible. The user should be able to click on the heading and view the table and click again to hide it. Something as simple as possible. I found something here: https://www.w3schools.com/howto/howto_js_collapsible.asp that seems like a lot of coding for such a simple thing. Is there a simple way to do it in HTML? I am using it in Thymeleaf as part of spring boot, so if it's done in HTML it should be easily doable in Thymeleaf too. Following is the sample HTML that I am using.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1> Concepts only in L1</h1>
<table>
<tr>
<th>missing-con</th>
<th>parent-con</th>
</tr>
<tr>
<td>{missing-con}</td>
<td>{parent-con}</td>
</tr>
</table>
<h1> Concepts only in M1</h1>
<table>
<tr>
<th>missing-con</th>
<th>parent-con</th>
</tr>
<td>{missing-con}</td>
<td>{parent-con}</td>
<td>{missing-con}</td>
<td>{parent-con}</td>
</table>
</body>
</html>
And I am looking to collapse each table. Any suggestions?
Here is one aproach you can addapt your way. I would advise you to add an ID/class name to the table element so you can reference it better. In this example I'm considering the first table on the document. You can also use getElementById or getelementByClassName
var table = document.getElementsByTagName("table")[0];
var th = table.getElementsByTagName("th");
for (var i = 0; i < th.length; i++) {
th[i].onclick = function() {
var td = this.parentNode.parentNode.getElementsByTagName("td");
for (var j = 0; j < td.length; j++) {
if (td[j].style.display == "none") {
td[j].style.display = "";
} else {
td[j].style.display = "none";
}
}
}
}

JS - TableDragger is not a function

I'm trying to import the table-dragger to my front-end, but I get the error-message, that tableDragger is not a function. I tried to go with the tutorial and initialized the table-dragger like this
<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>
<script type="text/javascript">
var el = document.getElementById("table");
var dragger = tableDragger(el, {
dragHandler: ".handle"
});
</script>
With this, the error-message occurs. Anyone had the same problem or has an idea on how to fix this?
After going through table-dragger plugins I found that tableDragger is an object instead of a function. You cannot directly get its instance, instead there is a property "default" which actually create instances.
If you are using node then may be "table-dragger.min.js" path is incorrect. The path should be "node_modules/table-dragger/dist/table-dragger.js"
Kindly find below code for reference.
var el = document.getElementById('table');
var dragger = tableDragger.default(el, {
dragHandler: ".handle"
})
dragger.on('drop',function(from, to){
console.log(from);
console.log(to);
});
<script src="https://cdn.jsdelivr.net/npm/table-dragger#1.0.3/dist/table-dragger.js"></script>
<body>
<table id="table">
<thead>
<tr>
<th class='handle'>header1<i class="handle"></i></th>
<th class='handle'>header2</th>
</tr>
</thead>
<tbody>
<tr>
<td>conten1</td>
<td>conten2</td>
</tr>
<tr>
<td>conten3</td>
<td>conten4</td>
</tr>
</tbody>
</table>
</body>
Good Day :)

live calculate script not working

so first of all im kinda new to javascript and i cant make my script work when i put it on my site but it works in fiddle(because onload) i have the script in seperate file so here is how i have it now
script.js
var start = $('#calcstart'),
end = $('#calcend'),
brk = $('#calcbreak'),
total = $('#calcadded'),
timespan;
$('input').keyup(function () {
var e = toMins(end.val()),
s = toMins(start.val()),
b = toMins(brk.val());
if (!s || !e)
return;
var output = (e - s - b) / 60;
total.html(Math.floor(output) + ':' + toDouble(Math.round((output % 1) * 60)));
});
function toMins(val) {
if (!val)
return 0;
val = val.split(':');
return (Number(val[0]) * 60) + Number(val[1] || 0);
}
function toDouble(n) {
return n < 10 ? ('0' + n) : n;
}
livecalc.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Start:</td>
<td><input id="calcstart" placeholder="hh:mm"></td>
</tr>
<tr>
<td>end:</td>
<td><input id="calcend" placeholder="hh:mm"></td>
</tr>
<tr>
<td>break:</td>
<td><input id="calcbreak" placeholder="hh:mm"></td>
</tr>
<tr>
<td>Total:</td>
<td><span id="calcadded"></span></td>
</tr>
</table>
https://jsfiddle.net/frilleee/3brha920/1/
so the question is how do i make this script work? how do i put it onload? or what should i do?
Edit1 Okey i dont know how but it started work now dident change anything :S i have tested it for 2 days with the same code and not working :S
Use script tag like this
<script src="script.js"></script>
In your HTML. Save your script as 'script.js' and put script tag at the end inside body tag.
Like this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
<tr><td>Start:</td><td><input id="calcstart" placeholder="hh:mm"></td></tr>
<tr><td>slut:</td><td><input id="calcend" placeholder="hh:mm"></td></tr>
<tr><td>rast:</td><td><input id="calcbreak" placeholder="hh:mm"></td></tr>
<tr><td>Total:</td><td><span id="calcadded"></span></td></tr>
</table>
<script src="script.js"></script>
Or
Put your whole script code inside script tag.
<script>
// Your script here.
</script>
For jQuery, you need to wrap your codes inside
$(document).ready(function(){
// js and jquery codes in here
});
Read: https://learn.jquery.com/using-jquery-core/document-ready/
Also, do you include your script.js file inside your HTML?
Check the Developer Tool > Console to find any other error related to javascript.

How to initialize a function within an HTML file in a JavaScript file? (Chrome Apps)

I am working with a Scoring Board Chrome App. (I am new to Chrome Apps)
index.html - (just a part of the code) where user inputs the number of players for the scoring board, submits and opens another html file where a table and a number of rows are displayed based on the user input.
<form class="pure-form">
<fieldset>
<legend>Enter number of Players:</legend>
<input type="text" id="users" placeholder="Input Number">
<button type="submit" id="btn1" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
<script>
function(){
//localStorage.setItem('value', document.getElementById("users").value);
localStorage.value = document.getElementById("users").value;
}
</script>
<script type="text/javascript" src="js/main-sheet.js"></script>
<script type="text/javascript" src="js/alert.js"></script>
main-sheet.html - (also just a part of the code)
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Score</th>
<th>Baluts</th>
</tr>
</thead>
<tbody>
<script type="text/javascript">
function addMoreRows(){
//var val = localStorage.getItem('value');
var val = localStorage.value;
document.getElementById("value").value = val;
for(var x=0; x<val; x++) {
var newRow = document.getElementById('pure-table').insertRow();
var newCell = newRow.insertCell();
newCell.innerHTML="<tr><td><input type='text' name='code'></td></tr>";
newCell = newRow.insertCell();
newCell.innerHTML="<tr><td><input type='text' name='name'></td></tr>";
newCell = newRow.insertCell();
newCell.innerHTML="<tr><td><input type='text' name='score'></td></tr>";
newCell = newRow.insertCell();
newCell.innerHTML="<tr><td><input type='text' name='baluts'></td></tr>";
}
}
</script>
The table head is displayed but rows aren't. Though I see why because function addMoreRows() hasn't really been called, and I don't know how.
And here is for the main-sheet.js
document.getElementById("btn1").addEventListener("click", function() {
if (!document.getElementById('users').value.trim()) {
//alert("Please enter the remarks");
chrome.app.window.create('../alert.html',{
'bounds': {
'width': 200,
'height': 200
},
'resizable': false,
});
}
else{
chrome.app.window.create('../main-sheet.html', {
'bounds': {
'width': 1000,
'height': 1000
},
'resizable': false,
});
}});
How do I call the function addMoreRows() to add Rows??
I would appreciate the help and corrections. Thank you.
Inline JavaScript will not be executed. This restriction bans both inline blocks and inline event handlers. You have to include a script file containing your javascript in your page
<script src="script.js" type="text/javascript"></script">
instead of using your javascript code (addMoreRows()) as inline JS within the page.
You will find more info on the Chrome Content-Security-Policy.
Hope it helps.
Looks like reading the documentation would really help, particularly Content Security Policy and Disabled Web Features. This means you cannot use localstorage and inline script.

This as a parameter in javascript

Hey guys am new to javascript development ..I have seen some come in javascript ..The code is
html code
<table>
<tr>
<td style="width:70px;height:70px;background-color:white;" class="white" onclick="place(this,2,1)"></td>
<td style="width:70px;height:70px;background-color:black;" class="black" onclick="someone(this,2,2)"></td>
</tr>
</table>
the js code
<script type="text/javascript">
function someone(domobject,number,column){
if(domobject.style.backgroundColor=="black"||domobject.style.backgroundColor=="white")
domobject.style.backgroundColor="red";
else if(domobject.style.backgroundColor=="red")
domobject.style.backgroundColor=domobject.className;
}
</script>
The thing is that
function someone(number,column){
if(this.style.backgroundColor=="black"||this.style.backgroundColor=="white")
this.style.backgroundColor="red";
else if(this.style.backgroundColor=="red")
this.style.backgroundColor=this.className;
}
when i write the code like this and call it with onclick="someone(2,2)..its doesnt work for me..why is it like that..Hope you guys can help me out ..Thanks in advance
this refers to the parent.
So:
var Bacon = function(){
this.tasty = true;
this.burnt = false;
};
var b = new Bacon();
console.log(b.tasty); //True
The best place to get your head around this is with this tutorial: http://ejohn.org/apps/learn/

Categories

Resources