jQuery:
$(document).ready(function () {
alert(localStorage.getItem(pet_name));
$("#lost_step1").click(function(){
alert($("#pet_name").val());
localStorage.setItem(pet_name, $("#pet_name").val());
alert(localStorage.getItem(pet_name));
}
}
When I am reloading page than It not getting value of pet_name outside click function. It alerting inside click function. How can I resolve this error? Why it not getting value? Please help me. Rightnow I am helpless. and sorry for my weak English.
maybe try this
https://jsfiddle.net/dalinhuang/hgf1gcz5/1/
based on your example:
$(document).ready(function() {
var pet_name = "pet_name";
alert('init --> ' + localStorage.getItem(pet_name));
$("#lost_step1").click(function() {
var pet_name_val = $("#pet_name").val();
alert('before save-->' + pet_name_val);
localStorage.setItem(pet_name, pet_name_val);
alert('after save-->' + localStorage.getItem(pet_name));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input value="test_pet_name" id="pet_name" />
<br>
<button id="lost_step1">CLICK ME!</button>
Related
I wanted to clear the value of text inside the input on the click of a button:-
Here is my code:
'''
<head>
<script>
function myfunction1() { //remember code var
texttosave = document.getElementById('textline').value;
localStorage.setItem('mynumber', texttosave);
document.getElementById('remember').value = ''
}
function myfunction2() { //recall code
document.getElementById('recalledtext').innerHTML =
localStorage.getItem('mynumber');
}
</script>
</head>
<body>
<input type="text" id="textline" />
<button id="remember" onclick='myfunction1()'>remember text</button>
<button id="recaller" onclick='myfunction2()'>recall text </button>
<p id="recalledtext">Loading</p>
</body>
</html>'''
I have did the correct thing, I think but please help as it is not working.
You need to put the value into a variable:
function myfunction2() { //recall code
// ...
var my_number = localStorage.getItem('mynumber');
}
Looks like the problem is that you dont do anything with the data you read from local storage.
A quick fix below.
function myfunction2() { //recall code
document.getElementById('recalledtext').innerHTML =
document.getElementById('remember').value = localStorage.getItem('mynumber')
}
I am working on an add-on for Confluence. I am using Apache Velocity and Js.
When I print out my template, I get no return from my JS file where I am using jQuery. How can I establish the communication between those two correctly? Thank you!
My JS
jQuery(function ($) {
var initmyConfluenceMacro = function ()
{
$(".myConfluenceMacro").each(function()
{
var html = "wadup";
var dayDates = $(this).find("input.dayDates").val();
html = html + dayDates;
$(this).html(html);
});
};
$(document).ready(function()
{
initmyConfluenceMacro();
});
});
MY Velocity Template.vm
#requireResource("confluence.web.resources:jquery")
#requireResource("com.atlassian.tutorial.myConfluenceMacro:myConfluenceMacro-resources")
My variables : $myCustomVar
My variable js:
<div class="myConfluenceMacro">
<fieldset class="parameters hidden">
<input type="hidden" class="dayDates" value="YO! Was up dude?">
</fieldset>
</div>
I managed it. Like this, it is working, and I get the HTML back!
JS
$(document).ready(function(){
$(".myConfluenceMacro").each(function(){
$(this).html("Hello <b>world!</b>");
});
});
VELOCITY
<script type="text/javascript">
#include( "templates/currencyDetail.js")
</script>
<body>
<div class="myConfluenceMacro">
</div>
HTML code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="score-board.css">
<title>Score Board App</title>
</head>
<body>
<div id="playersscores">
<span id="p1score">0</span><span> To </span> <span id="p2score">0</span>
</div>
<p>Playing to <span id="score">5</span></p>
<input type="field" value="5" ></input>
<button id="p1clicked">Player one</button>
<button id="p2clicked">Player two</button>
<button id="reset">Reset</button>
<script type="text/javascript" src="score-board.js"></script>
</body>
</html>
Javascript is :
Whenever this code is loaded :
var p1result = document.querySelector("#p1score");
var p2result = document.querySelector("#p2score");
var p1clicked = document.querySelector("#p1clicked");
function increment_score (player_result) {
//var score = parseInt(player_result.innerText) + 1;
player_result.innerText = (parseInt(player_result.innerText) + 1).toString();
}
p1clicked.addEventListener("onclick", increment_score(p1result))
Whenever this code is loaded in a browser, the span showing the result for player 1 is showing one directly without clicking on player 1 button. i'm not sure what is wrong with the event listener im using.
The event is click instead of onclick
The event listener should be a reference to the function itself, not the result of a function call (which increments the score by 1)
Inside the function, you can access the button with this:
The code could look like this:
function increment_score() {
var player_result = this;
player_result.innerText = (parseInt(player_result.innerText) + 1).toString();
}
p1clicked.addEventListener('click', increment_score);
Use click event not onclick
You pass result of function not instead reference to function
If you need pass parameters to event handler - you can use bind:
p1clicked.addEventListener("click", increment_score.bind({result: p1result, inc: 1 }) )
p2clicked.addEventListener("click", increment_score.bind({result: p2result, inc: 2 }) )
function increment_score () {
var score = parseInt(this.result.innerText) + this.inc;
this.result.innerText = score;
}
[ https://jsfiddle.net/6vw8ay3x/ ]
You have a couple problems there. First, when calling the addEventListener function, you need to specify just "click", not "onclick". Secondly, when you pass the function to addEventListener, you just want it to be a reference to the function not an actual function call. The following changes will net you the result you are seeking.
function increment_score () {
p1result.innerText = (parseInt(p1result.innerText) + 1).toString();
}
p1clicked.addEventListener("click", increment_score);
But since you want to be able to use the same function for multiple players, then I would suggest adding the "onclick" handler to the HTML which will allow you to pass the element you want to increment. Then your HTML code would look like this:
<button id="p1clicked" onclick="increment_score_with_param(p1result);">Player one</button>
<button id="p2clicked" onclick="increment_score_with_param(p2result);">Player two</button>
and your javascript would be:
var p1result = document.querySelector("#p1score");
var p2result = document.querySelector("#p2score");
var p1clicked = document.querySelector("#p1clicked");
function increment_score_with_param (player_result) {
player_result.innerText = (parseInt(player_result.innerText) + 1).toString();
}
window.onload = function(){
var p1result = document.querySelector('#p1score');
var p2result = document.querySelector('#p2score');
var p1clicked = document.querySelector('#p1clicked');
p1clicked.addEventListener("click", function(e){
e.preventDefault();
p1result.innerText = (parseInt(p1result.innerText) + 1).toString();
});
}
i want to get the number in text field and send it in Url methode GET ;
$(document).ready(function () {
$("#go").click(function() {
var n = document.getElementById('nombre').value;
alert("Chess.php?number=9");
$('#chess').load("Chess.php?number="+n);
});
the value :
<input type="text" name="nombre" id="nombre">
Try again with code below:
$(document).ready(function () {
$('#go').click(function() {
$.get('Chess.php', { number: $('#nombre').val() } );
});
});
PS: Its stranger the attribute value called nombre and the field called number. Change this too. Other tip is dont use Uppercase for the url, use only 'chess.php'.
I hope to help you.
There's a missing }) ...
Plus you have to add in the head section of your script the following :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#go").click(function()
{
var n = document.getElementById('nombre').value;
alert("Chess.php?number=9");
$('#chess').load("Chess.php?number="+n);
})
});
</script>
it works now like this
$(document).ready(function () {
$("#go").click(function() {
$('#chess').load("Chess.php?number="+document.getElementById('nombre').value);
});
});
<script type="text/javascript">
window.onload = function() {
document.getElementById('finalize_btn_top').onclick='bmlAuth();';
document.getElementById('finalize_btn_bottom').onclick='bmlAuth();';
}
function bmlAuth(){
//
}
</script>
I studied google search results and this should work but it is not working. I put it at the bottom of the page just to be sure the elements have loaded.
<input id="finalize_btn_bottom" type="image" name="" value="continue" onmouseover="this.src='<% =strFolder %>/images/b_submitorder_on.gif';" onmouseout="this.src='<% =strFolder %>/images/b_submitorder_off.gif'" src="<% =strFolder %>/images/b_submitorder_off.gif" alt="continue" onclick="bml_submit();">
What do I need to do different?
Thanks much!
Try passing in a function reference:
var $ = document.getElementById;
$('finalize_btn_top').onclick = bmlAuth;
$('finalize_btn_bottom').onclick = bmlAuth;