We Keep Coding

How to extract all html text excluding what's inside the script tag?

For a project I want to create a variable that stores all the text within the html, so pretty much everything between tags, titles, paragraphs, everything visible for a user on a webpage. However I don't want my javascript code that's between the script tag to show up in this output too.
I was trying with something like this:
var content = $("html").remove("script").text()
But this is not working.

Here it is:
First use this:
var r = document.getElementsByTagName('script');
for (var i = (r.length-1); i >= 0; i--) {
if(r[i].getAttribute('id') != 'a'){
r[i].parentNode.removeChild(r[i]);
}
}
And then:
var txt = document.body.innerText;
OR
var txt = $('body').text();

var contentDiv = $('<div/>', {
html: $('body').clone()
});
contentDiv.find('script').remove()
return contentDiv.text()

Issues in setting cookies for store form input values in javascript

I took below code from online,
var myValues = [];
for(i=0;i<inputs.length;i++) {
validateEmail(inputs[i]);
myValues.push(inputs[i].value);
}
// Save them fot later use
localStorage.myValues = JSON.stringify(myValues);
// After clicking the button you can retrieve them back
var oldValues = JSON.parse(localStorage.myValues);
I created simple asp page,
Now, If i click the next after after enter some input value, it will go to next page, and again i click back, it doesn't show entered input values.
I need to show that values, may i know, how can i achieve this one thanks in advance.
Here is the worked jsfiddle
I need to add with my existing javascript code for achieving my need.
But i just confused, how to add code?
Can anyone help me? Thanks in advance.

On page load, you must add the following code:
var $inputs = $(".input");
var myValues = localStorage.getItem("myValues") ? JSON.parse( localStorage.getItem("myValues") ) : [];
for(var i = 0; i < myValues.length; i++) {
$inputs[i].value = myValues[i];
}
This will make sure that on page load, if any data is present in the localStorage it will be populated in the respective input fields.
Now when you click on next button:
$("#nextbutton").click(function () {
var myValues = [],
$inputs = $('.input');
for (i = 0; i < $inputs.length; i++) validateEmail($inputs[i]);
if ($('.invalid').length !== 0) return false;
for (i = 0; i < $inputs.length; i++) {
myValues.push($inputs[i].value)
}
localStorage.myValues = JSON.stringify(myValues);
});
This is used to store the data into the localStorage after validation.

Turn a div into a button dynamically

i don't seem to find any way to work this out..so i guess i m going to need some help..
i m making a phonegap application in which i have an sqlite database.I perform a query and get the results in a dynamically created div from the database, the thing is that i want for each record that i extract to make the div that contains it, as a button with an editable role..
for instance lets say that i have a db with these columns id option1 option2 and i have three records..
this means that i will have three divs
i want, each div to be a button so that if user clicks on it to be able to perform a delete (or edit/update) query without being worried about id
for instance, if he selects div2 do perform a query that will delete second record..
my code so far..
for (var i = 0; i < len; i++) {
var test1 = results.rows.item(i).option1;
var d = new Date();
d.setTime(results.rows.item(i).date);
var newLI = document.createElement("LI");
newLI.className = lt;
newLI.id = results.rows.item(i).id;
var container = ("<div id=\"" + results.rows.item(i).id + "\" class=\"test\"><div id=\"text\">option1</div><div id=\"data\">" + test1 + "</div></div>");
newLI.innerHTML = cont;
var gl = document.getElementById("sqltest");
gl.appendChild(newLI);
}
for (var i = 0; i < len; i++) {
var divid = "#" + results.rows.item(i).id;
$(divid).on("click", function () {
alert(divid);
})
}
<ul id="sqltest"></ul>
problem with above code, is that although each div gets the correct id, when i click on it, i always get the same result for instance #1 although i may have 3 divs..
instead of having as a result
div1 alert #1 div2 alert #2
i get
div1 alert #1 div2 alert#1
I've used alert just to simplify it, instead of alert there will be DELETE from SQLDB WHERE id=results.rows.item(i).id;

You are retreiving always the same 'divid' variable, because of the way javascript scope and closures work. This is a very common mistake. You can google "javascript closure infamous loop" to get more information about this.
You should replace your for with this:
for (var i = 0; i < len; i++) {
(function () {
var divid = "#" + results.rows.item(i).id;
$(divid).on("click", function () {
alert(divid);
});
})();
}
That way, the variable divid is declared in different scopes each time.
I didn't understand if that is the only problem you are having.

JavaScript: get custom button's text value

I have a button that is defined as follows :
<button type="button" id="ext-gen26" class=" x-btn-text">button text here</button>
And I'm trying to grab it based on the text value. Hhowever, none of its attributes contain the text value. It's generated in a pretty custom way by the look of it.
Does anyone know of a way to find this value programmatically, besides just going through the HTML text? Other than attributes?
Forgot one other thing, the id for this button changes regularly and using jQuery to grab it results in breaking the page for some reason. If you need any background on why I need this, let me know.
This is the JavaScript I am trying to grab it with:
var all = document.getElementsByTagName('*');
for (var i=0, max=all.length; i < max; i++)
{
var elem = all[i];
if(elem.getAttribute("id") == 'ext-gen26'){
if(elem.attributes != null){
for (var x = 0; x < elem.attributes.length; x++) {
var attrib = elem.attributes[x];
alert(attrib.name + " = " + attrib.value);
}
}
}
};
It only comes back with the three attributes that are defined in the code.
innerHTML, text, and textContent - all come back as null.

You can do that through the textContent/innerText properties (browser-dependant). Here's an example that will work no matter which property the browser uses:
var elem = document.getElementById('ext-gen26');
var txt = elem.textContent || elem.innerText;
alert(txt);
http://jsfiddle.net/ThiefMaster/EcMRT/
You could also do it using jQuery:
alert($('#ext-gen26').text());

If you're trying to locate the button entirely by its text content, I'd grab a list of all buttons and loop through them to find this one:
function findButtonbyTextContent(text) {
var buttons = document.querySelectorAll('button');
for (var i=0, l=buttons.length; i<l; i++) {
if (buttons[i].firstChild.nodeValue == text)
return buttons[i];
}
}
Of course, if the content of this button changes even a little your code will need to be updated.

One liner for finding a button based on it's text.
const findButtonByText = text =>
[...document.querySelectorAll('button')]
.find(btn => btn.textContent.includes(text))

difference between calling javascript function on body load or directly from script

i am using a javascript where in i am creating multiple div (say 5) at runtime, using javascript function, all the divs contain some text, which is again set at runtime, now i want to disable all the divs at runtime and have the page numbers in the bottom, so that whenever user clicks on the page number only that div should get visible else other should get disable, i have created a function, which accepts parameter, as page number, i enable the div whose page number is clicked and using a for loop, i disable all the other divs, now here my problem is i have created two functions, 1st (for adding divs and disabling all the divs except 1st) and writing content to it, and other for enabling the div whose page number is clicked, and i have called the Adding div function on body onload; now first time when i run, page everthing goes well, but next time when i click on any of the page number, it just gets enabled and again that AddDiv function, runs and re-enables all the divs..
Please reply why this is happening and how should i resolve my issue...
Below is my script, content for the div are coming using Json.
<body onload="JsonScript();">
<script language="javascript" type="text/javascript">
function JsonScript()
{
var existingDiv = document.getElementById("form1");
var newAnchorDiv = document.createElement("div");
newAnchorDiv.id = "anchorDiv";
var list = { "Article": articleList };
for(var i=0; i < list.Article.length; i++)
{
var newDiv = document.createElement("div");
newDiv.id = "div"+(i+1);
newDiv.innerHTML = list.Article[i].toString();
newAnchorDiv.innerHTML += "<a href='' onclick='displayMessage("+(i+1)+")'>"+(i+1)+"</a> ";
existingDiv.appendChild(newDiv);
existingDiv.appendChild(newAnchorDiv);
}
for(var j = 2; j < list.Article.length + 1; j ++)
{
var getDivs = document.getElementById("div"+j);
getDivs.style.display = "none";
}
}
function displayMessage(currentId) {
var list = {"Article" : articleList}
document.getElementById("div"+currentId).style.display = 'block';
for(var i = 1; i < list.Article.length + 1; i++)
{
if (i != currentId)
{
document.getElementById("div"+i).style.display = 'none';
}
}
}
</script>
Thanks and Regards

Try adding return false; to the page link to prevent the page from being reloaded.
newAnchorDiv.innerHTML += "<a href='' onclick='displayMessage("+(i+1)+");return false;'>"+(i+1)+"</a> ";

Your page links are reloading the page. You just have to change one line and your script works ok.
// change
newAnchorDiv.innerHTML += "<a href='' onclick='displayMessage("+(i+1)+")'>"+(i+1)+"</a> ";
//to
newAnchorDiv.innerHTML += "<a href='#' onclick='displayMessage("+(i+1)+")'>"+(i+1)+"</a> ";