I want to add a class to body in HTML using Javascript using a button that executes a function, then remove it using another button. But I want to save that class, until the other button is pressed, using LocalStorage.
I can do that without LocalStorage
$$('body').addClass('Class here');
But how with LocalStorage?
By using Storage.setItem to save, then Storage.getItem to retrieve, like this:
var className = "theclass";
// Put the class name into storage
localStorage.setItem('className', className);
// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');
$('body').addClass(retrievedClassName);
Here a working code with jquery:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body class="">
<div class="form-group">
<button class="button">your button</button>
</div>
<script>
var className = "theclass";
jQuery('.button').on( 'click', function(){
localStorage.setItem('className', className);
jQuery('body').addClass(className);
});
// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');
jQuery('body').addClass(retrievedClassName);
</script>
</body>
</html>
And here without:
<html>
<head></head>
<body id="mybigbody" class="">
<div class="form-group">
<button id="button">your button</button>
</div>
<script>
var className = "theclass";
var body = document.getElementById("mybigbody");
document.getElementById('button').onclick = function(e) {
localStorage.setItem('className', className);
body.setAttribute("class", className);
e.stopPropagation();
}
// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');
if(retrievedClassName)
body.setAttribute("class", retrievedClassName);
</script>
</body>
</html>
Related
Hi i am creating a small web application where if i click create element it should create new button using variable x. When i click the remove element it should delete from the last element until no new element should be there.
But the problem is when i click create element i am not able to add id to the newly created element dynamically.At the same time how can i delete using variable as id to delete new element.
Here element means Button
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
var x=1;
var fd,d;
$(document).ready(function(){
$("#r").click(function(){
$("#fd").remove();
});
$("#c").click(function(){
var txt="<div id='fd"+x+"'><button > New Button </button></div>";
x++;
$("#d").after(txt);
});
});
</script>
</head>
<body>
<button id="c">Create Element</button>
<button id="r">Remove Element</button>
<br> <br>
<div id="fd">
<button id="d">First Element</button>
</div>
<br>
</body>
</html>
I have included the image where i am able to create new element but not able to delete it
Thanks in advance.
Add a common class to each new element and then use last() filter with that class to remove the last one
var x = 1;
var fd, d;
$(document).ready(function() {
$("#r").click(function() {
$(".button").last().remove();
});
$("#c").click(function() {
var txt = "<div class='button' id='fd" + x + "'><button > New Button </button></div>";
x++;
$("#d").after(txt);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="c"> Create Element </button>
<button id="r"> Remove Element </button> <br>
<br>
<div id="fd">
<button id="d"> First Element </button>
</div>
<br>
i am trying to use JavaScript where i can click on a button and it will generate a button above it so for example i have the first button called add additional:
<a href"#"><button type="button">Add Additional</button></a>
When this button is clicked and it will generate another button where i want it to be displayed the below:
<td>
Name
</td>
<td>
<button type="button">Choose another thing</button>
</td>
and is it possible to repeat this process like generating more of the 2nd button "Choose Another thing"
i hope this ins't too confusing
I think you are looking for something like this!! Just add a script so that whenever you click on the button it will execute it and create more buttons.
<!DOCTYPE html>
<html>
<body>
<p>Click the "Add Additional" button to create a BUTTON element with a "Choose Another Thing" text.</p>
<button onclick="myFunction()" type="button">Add Additional</button>
<script>
function myFunction() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("Choose another thing");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>
I think this is the elegant way.
function appendButton(textContent, selector) {
var button = document.createElement('button');
button.classList.add('any');
button.innerHTML = textContent;
var selectedElement = document.querySelector(selector);
return selectedElement.appendChild(button);
}
// Call this function from wherever u like
// appendButton('click here', '.container');
<div class="container">
<button onclick="appendButton('click here', '.container')">
Click me
</button>
</div>
Run this you will get your solution
<html>
<head>
<script type="text/javascript">
function myFunction()
{
var a=document.createElement("a");
a.setAttribute("href","secondpage.html");
var btn=document.createElement("BUTTON");
var text=document.createTextNode("Choose another thing");
btn.appendChild(text);
a.appendChild(btn);
document.body.appendChild(a);
}
</script>
</head>
<body>
<a href"#"><button type="button" onclick="myFunction()">Add
Additional</button></a>
</body>
</html>
Give an id/class for a division append to it.
<div id='my_id' >
<td>Name</td>
<td><button>click</button></td>
</div>
When you click on addMore button write a function to append it to my_id
function onclickforaddbutton(){
id = document.getElementById('my_id');
var data = prompt("Enter something"); //where you can get data from user
id.innerHTML+="<td>"+data+"</td><td><button>Something</button></td>";
}
You need to first decide (container) where to add a new row. Then on click of add button, you can create a row with two columns, for the name and the new button, and append that row as a child of the container.
Here's how you can do it.
var count = 1;
var name = 'Generated Name';
function addNewRow() {
var container = document.getElementById('container');
var newRow = document.createElement('tr');
newRow.innerHTML = "<td>" + name + (count++) + "</td><td><button>Choose another thing</button></td>"
container.appendChild(newRow);
}
<html>
<head></head>
<body>
<div style="padding: 2rem;">
<table id="container">
</table>
</div>
<button onclick="addNewRow();">Add Additional</button>
</body>
</html>
i need find all images from textarea value and then replaces with inputs text elements
and the value of those with the src of the img was reemplace
after that the final string is output on a new div ('#newDiv')
my script dont replace nothing i dont know why
here is what i have done so far,
<html>
<head></head>
<body>
<textarea id="caja"></textarea>
<input type="button" onClick="parsingHtml()" value="read">
<div id="newDiv"></div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
function parsingHtml()
{
var content = $('#caja').val();
var newContent = $(content).find("img").replaceWith('<input type="text">');
alert(newContent)
$('#newDiv').html(newContent);
};
</body>
</html>
any ideas? thanks in advance!
There are 2 problems that I can see
newContent is referring to only the img elements, not the complete content
Since you are passing the value to jQuery, if the value does not start with < it will be considered as a selector not as a element creation command
So
//dom ready handler
jQuery(function($) {
//click event handler registration
$('#read').click(parsingHtml);
})
function parsingHtml() {
var content = $('#caja').val();
var newContent = $('<div />', {
html: content
});
newContent.find("img").replaceWith('<input type="text">');
console.log(newContent)
$('#newDiv').html(newContent.contents());
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="caja"></textarea>
<input type="button" id="read" value="read">
<div id="newDiv"></div>
I have an html file, in which, i want to edit the fields.
Following is my html code :
<body>
<div class= "table">
<div class = "thead">
<div class = "tr">
<div class = "td">ID</div>
<div class = "td">GROUP NAME</div>
<div class = "td">GROUP DESCRIPTION</div>
<div class = "td">IS ACTIVE</div>
<div class = "td"></div>
<div class = "td"></div>
</div>
</div>
<div class= "tbody">
<form class = "tr">
<div class = "td">1</div>
<div class = "td">hello</div>
<div class = "td">hwryou</div>
<div class = "td">y</div>
<div class = "td action" ><button type="button "onclick="edit(this);">edit</button> </div>
<form>
</div>
</div>
</body>
following is my javascript code :
<script language="javascript" type="text/javascript" src="serialize-0.2.min.js">
function edit(element){
var tr = jQuery(element).parent().parent();
if(!tr.hasClass("editing")) {
tr.addClass("editing");
tr.find("DIV.td").each(function(){
if(!jQuery(this).hasClass("action")){
var value = jQuery(this).text();
jQuery(this).text("");
jQuery(this).append('<input type="text" value="'+value+'" />');
} else {
jQuery(this).find("BUTTON").text("save");
}
});
} else {
tr.removeClass("editing");
tr.find("DIV.td").each(function(){
if(!jQuery(this).hasClass("action")){
var value = jQuery(this).find("INPUT").val();
jQuery(this).text(value);
jQuery(this).find("INPUT").remove();
} else{ jQuery(this).find("BUTTON").text("edit");
}}); }
}</script>
while creating the out put, when i click the edit button, it is showing the reference error edit is not defined.what may be reason for that?
updated :
i have an other requirement that, on clicking the save button, the changed content should be saved in the database.How can and where i should write the update query? also i required a delete button so that on clicking the delete button, an update command should run.HOw can i achieve this ?/
A script can be inline or external, it cannot be both.
The presence of the src attribute causes the text node children of the script node to be ignored.
If you want inline and external scripts, use two script elements.
<script src="serialize-0.2.min.js"></script>
<script>
function edit(element){
// etc
<script type="text/javascript" src="serialize-0.2.min.js"></script>
<script type="text/javascript">
function edit(element){
// Your Code
}
</script>
Try this.
In html I am having the following tags:
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
On Clicking on 2011-2012 or on 2012-2013 I want to set display property of div tag.
I am using the following Javascript code for this and I am calling the Javascript function in body tag. The output is showing style and display is not an object or property.
<script language="javascript">
function clickHnadler()
{
var xid= document.getElementsByTagName("span");
var xsp= xid[0].id;
alert("Span id is "+xsp);
if(xsp.charAt(0)=="M")
{
var oC = document.all("C"& xsp.substring(1,2));
if(oC.STYLE.display == "none")
{
oC.Style.Display = "";
}
else{
oC.Style.Display = "none";
}
}
}
</script>
use jquery:
you can pass in the function the element or the Id:
ex:
<span id=M26>2011-2012</span>
function clickHnadler(element)
{
var id = $(element > span).attr(id);
id[0] = 'c'; //not the nicest way, maybe use a replace or something like that
$(id).show(); //or $(id).css('display','list');
}
You may use clickHandler has following way,
function clickHandler(e) {
window.document.links[0].handleEvent(e);
}
You need to bind event spacifically to elements you want to handle click for. for more information please refer following link,
http://docs.oracle.com/cd/E19957-01/816-6409-10/evnt.htm#1009606
Based on what i understand from your question, I come up with this.
<script type="text/javascript" src="jquery1.8.js"></script>
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
2011-2012 details</div>
<br />
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
2012-2013 details
</div>