I was creating a button which will increase number on button click.
Like this:
<button>Create</button>
<p id="p"></p>
<script>
var i = 0
$('button').click(function() {
$('p').html(i);
i++;
});
</script>
It worked perfectly.
Then i added localstorage to it.
The code is like this:
<button>Create</button>
<p></p>
<script>
var i = 0
$('button').click(function() {
$('p').html(i);
i++;
});
$(function() {
var = document.getElementById('p');
$("button").click(function() {
localStorage.setItem("comment4", $("p").html());
});
if (localStorage.getItem("comment4")) {
.innerHTML = localStorage.getItem("comment4");
}
});
</script>
And it also worked perfectly.
Here is a demo Fiddle
My doubt is that, How can i change the var i = 0 to the next number?
So that if I open it with notepad(or something else) I have to see the var i = the next number
If i understood your question correctly this must suffice
var i = localStorage.getItem("comment4") || 0;
Although its impossible to change the contents of a file without a server side language
Related
I have an array with 13 items, all of it is text. I can show text from the array by using.
document.write(arrayname["0"]);
however I would like to have users click a button and fade out the current array item and load in the next array item. I wanted to have users not be able to view an array item less than 0 and more than 13 since that would cause an error.
I tried this but could not get it to work.
Thank you in advance.
<script type=text/javascript>
var stuff=['item', 'stuff', 'thingamajig'];
var counter=0;
function goRight(){
if(counter===13){
counter=13;
} else
{ counter=counter+1 }
}
document.write(stuff[counter]);
</script>
<img src="left.png"><img onclick="goRight(); src="right.png>
Your largest source of confusion is probably due to not actually writing anything in your function. Try something like this:
<script type=text/javascript>
var stuff=['item', 'stuff', 'thingamajig'];
var count = 0;
function goRight() {
if (count > stuff.length - 1)
count = 0;
document.write(stuff[count++]);
}
document.write(stuff[count]);
</script>
<img src="left.png"><img onclick="goRight(); src="right.png>
Fiddle Demo
Try this
var stuff=['item', 'stuff', 'thingamajig'];
var counter=0;
function goRight(){
document.write(stuff[counter]);
counter++;
if(counter===13){ // if You want 13 th element you check to 14
counter=0;
}
}
OR
var stuff=['item', 'stuff', 'thingamajig'];
var counter=-1;
goRight();
function goRight(){
if(counter===13){
counter=0;
}else{
counter++;
}
}
document.write(stuff[counter]);
Try something like this
HTML
<span id='dynamicText'>item</span>
<button type='button' onclick='goRight()'>Click</button>
SCRIPT
var stuff = ['item', 'stuff', 'thingamajig'];
var counter = 1;
function goRight() {
if(counter>= stuff.length)
counter=0;
document.getElementById('dynamicText').innerHTML=stuff[counter];
counter++;
}
JSFiddle Demo
You might want to read Why Using document.write is a considered a bad practive
Here is the HTML:
<form>
<textarea id="input1"></textarea>
<textarea id="input2"></textarea>
<span></span>
</form>
the js:
$("#input2").keyup{
var a = document.getElementById("input1").length;
var b = document.getElementById("input2").length;
var c=a+b;
$("span").html(c);
}
each time 'c' reach multiple 140, i need it to be added by 'b',
I've try to do this:
while(c%140 == 0){
c=c+b;
}
at 140th keyup, yes its added, but next keyup(141th) and so on 'c' back to it's value added by notihng. How to do this correctly?
thanks.
I can't be sure that I'm reading this question correctly, but if my jsfiddle of your code is a close approximation, the solution may be as simple as getting rid of the var in front of c when you add a+b. If you want c to have a persistant value, you need its scope to be outside the keyup event handler.
From the fiddle:
$(function() {
var c = 0;
$("#input2").keyup( function() {
var a = $("#input1").val().length;
var b = $("#input2").val().length;
c=a+b;
if(c%140 == 0){
c=c+b;
}
$("span").html(b);
});
});
Notice that's an if, not a while. If it's supposed to be a while loop, that's an easy change to make.
Update
I think I have an idea what's going on here. You want to keep track of the total character count of your multi-page SMS messages. The updated jsfiddle has the answer to the question you wouldn't just come out and ask.
Here's the new code:
$(function() {
$("#input2, #input1").keyup( function() {
var a = $("#input1").val().length;
var b = $("#input2").val().length;
c=a+b;
c+=Math.floor(c/140)*b;
$("span").html(c);
});
});
Now, this of course assumes that input1 holds your actual message while input2 holds some text that needs to be displayed on each page. If it's the other way around, or if there's some other purpose for this code, please let me know.
got this example:
<html>
<head>
<script type="text/javascript">
function init(){
var linkPage = document.getElementById('linkid').href;
window.location.href = linkPage;
}
onload=init;
</script>
</head>
<body>
GO HERE
</body>
</html>
this script clicks the link "GO HERE". (works perfect)
but in my example i got no class or id in the link.
LINK NAME
is only thing that never change is the name of the link ("LINK NAME")
is it possible to search for "LINK NAME" and then click it like the working script above?
or something that will do what i need :D
JS has no way to search for a node by text contents (that I know of).
Array.prototype.forEach.call(document.getElementsByTagName('a'), function (elem) {
if (elem.innerHTML.indexOf('LINK NAME') > -1) {
window.location = elem.href;
}
});
Iterate over the links in the document and check the text:
for(var i = 0, len = document.links.length; i < len; i += 1) {
if(document.links[i].textContent === "LINK TEXT") {
document.links[i].click();
}
}
I'd just use the following bit, which uses jquery selection.
var link = $("a:contains('LINK TEXT')"); //get the a
var click = document.createEvent("Event"); //create event
click.initEvent("click", true, true);
link.dispatchEvent(click); // make it happen
I have the following script to create some hyperlinks which are numbers stored in an array. I want to be able to click those numbers and get the particular number to be shown in the alert box. I am able to see the links but when I click them I don't see any data.
<html>
<body>
<script type="text/javascript">
var str="732176086,732176085,735219154,735219155,23948614,23948629,23948628,764488973,764488974,764488975,23948631,732164301,732164304,732164305,732164303,732164302,732168040,832567989,832567988,807573121,807573120,765867299,831150154,831150153,23951065,23952295";
var str_array=str.split(',');
for(var i=0;i<str_array.length;i++)
{
controlRef = document.createElement('a');
var newLine=document.createElement('br');
document.body.appendChild(newLine);
controlRef.href = '#';
controlRef.innerHTML = str_array[i];
document.body.appendChild(controlRef);
}
controlRef.onclick = function () { alert(controlRef.innerHTML); };
</script>
</body>
</html>
Place the click handler inside of the for loop.
You also need to break the closure to controlRef. Otherwise the controlRef will point to the last element.
controlRef.onclick = (function(element) {
return function() {
alert(element.innerHTML);
};
})(controlRef);
jsFiddle.
I have a jQuery application which finds a specific div, and edit's its inner HTML. As it does this, it adds several divs with onclicks designed to call a function in my JS.
For some strange reason, clicking on these never works if I have a function defined in my code set to activate. However, it works fine when calling "alert("Testing");".
I am quite bewildered at this as I have in the past been able to make code-generated onclicks work just fine. The only thing new here is jQuery.
Code:
function button(votefor)
{
var oc = 'function(){activate();}'
return '<span onclick=\''+oc+'\' class="geoBut">'+ votefor +'</span>';
}
Elsewhere in code:
var buttons = '';
for (var i = 2; i < strs.length; i++)
{
buttons += button(strs[i]);
}
var output = '<div name="pwermess" class="geoCon"><div class="geoBox" style=""><br/><div>'+text+'</div><br/><div>'+buttons+'</div><br/><div name="percentages"></div</div><br/></div>';
$(obj).html(output);
Elsewhere:
function activate()
{
alert("Testing");
}
You may want to take a look at jQuery.live(eventType, eventHandler), which binds an event handler to objects (matching a selector) whenever they are created, e.g.:
$(".somebtn").live("click", myClickHandler);
Follows a dummy example, may be this can help you.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<script type="text/javascript">
$(function() {
$('.go-right').click(function(){
c="Hello world";
$("#output").html(c);
});
});
</script>
</head>
<body >
<div id="output"></div>
<a class="go-right">RIGHT</a>
</body>
</html>
Change this:
var oc = 'function(){activate();}'
To be this instead:
var oc = 'activate();'