I have problem with javascript,
in my html code:
<input onclick="myFunction();" />
<script>
function myFunction(){
//excecution of this fucntion
}
</script>
After clicking the input, the function runs. But I want myFunction to be disable after the first click, so when I click again, myFunction won't run.
Just remove the attribute
<input onclick="myFunction(this);" />
<script>
function myFunction(elem){
// code here
elem.removeAttribute('onclick')
}
</script>
or even better use event listeners
<input id="myInput" />
<script>
document.getElementById('myInput').addEventListener('click', myFunction, false);
function myFunction(elem){
// code here
this.removeEventListener('click', myFunction);
}
</script>
One way is to set it to a empty function, after the code has executed.
function myFunction(){
//(..) Some code
myfunction = function(){}; // empty the function so nothing happens next time
}
If you're using jQuery (as You have included it in the tags), I'd go with .one():
<input type="txt" class="my-input" />
function activateClick(){
// single click:
$('.my-input').one('click', function(){
// do stuff ...
});
}
// Activate single click on input element
// Can be reactivated later on, using the same function (see DEMO):
activateClick();
DEMO
Use a boolean indicator to determine whether the function has already run or not. The advantage with this method is that it is easy to reset the function status at a later date.
<!DOCTYPE html>
<html>
<body>
<button onclick='func();'>Function</button>
</body>
<script>
var funcActive=true;
function func() {
if (funcActive) {
funcActive=false;
alert('func ran');
}
}
</script>
</html>
Related
I have the ajax, which runs when the user writes something ind input id=2
HTML:
<input id="2" type="text" onkeyup="posttitulo(this.value)" />
SCRIPT:
function posttitulo(value){
$.post("getdata/posttitulo.php",{partialStates:value});
}
The code works perfectly.. The problem is that I have the javascript function which onclick copies value of another input id=1, in this case id=2 has the value without typing and function posttitulo(value) doesn't work..
So I need Ajax to be executed if:
1) User writes something onkeyup="posttitulo(this.value);
2) the value of id=1 is copied to id=2..
Hope that I explained the problem..
Thanks in advance
Do $('#2').keyup(); after you copied a value in the function, which fires onclick.
create an event listener change() on id=2:
$(document).ready(function(){
$("#2").change(function(){
var value=$("#2").val();
$.post("getdata/posttitulo.php",{partialStates:value});
});
});
You could go with firing the event on the input or recycle the function you already declared. When the button is clicked read the value of the id2 Element and call the posttitulo function with the value as argument.
function posttitulo(value){
console.log('AJAX POST:', value);
}
function buttonClicked() {
var value = document.getElementById('id2').value;
posttitulo(value);
}
Fiddle
May be this will work in your case.
<input id="1" type="text" onclick="yourreplacefunction(this.value,2)" />
$(document).on("change keyup", "input", function() {
$.post("getdata/posttitulo.php",{partialStates:value},function(response){
//Do with your response
});
});
function yourreplacefunction(value,toid) {
$('#'+toid).val(value);
}
would you explain please, why this code is showing alert window with the text at the end of radio element:
<script>
function markReply(el){
alert(el.nextSibling.nodeValue);
}
$(document).ready(function(){
markReply();
});
</script>
and this one does not:
<script>
function markReply(el){
return el.nextSibling.nodeValue;
}
$(document).ready(function(){
var msg = markReply();
alert(msg);
});
</script>
there are 4 optional answers selected by radio element, like:
<input type="radio" name="choise" onclick="markReply(this);"/>....some text
Thank you!
The second script just returns the value, without doing anything with it.
Note that in both cases, the call from the document ready function is useless, and probably produces an el is not defined error in the console.
You're not passing any parameters to the markReply() function when you created a variable for it.
Try this:
var msg = markReply(el);
The script that does not alert the message is not working because the parameter of the function markReply is not there when the jquery is loaded.
HTML
<input type="radio" name="choise" id="choise"/>....some text
JS
$(document).ready(function(){
$("#choise").click(function () {
alert(markReply(this));
});
});
function markReply(el){
return el.nextSibling.nodeValue;
}
http://jsfiddle.net/j4sgdton/
First attempt to javascript.. not sure what I'm doing wrong...
Trying to clear the "Sample Here" when i hover mouse or focus, or click.
And Alert when the button is clicked..
I'd rather advices how I can avoid using functions inside the HTML and use them
under the to separate js/html completely!
<!DOCTYPE html>
<html>
<head>
<title>Java Script Practicing</title>
</style>
<script>
document.onreadystatechange = function ()
{
if (document.readyState == "complete")
{
//Page Loaded
function go()
{
alert("done");
}
function clear()
{
var x = document.getElementById("x").value;
x = "";
}
}
}
</script>
</head>
<body>
<form method="post">
<input onclick="clear();" type="text" id="x" value="Sample here" />
<button onclick="go();">Click !</button>
</form>
</body>
</html>
HTML5 documents don't require you state type for a <script> element if it's javascript, and you want to state which character set your document is going to use. This is pretty much always going to be utf8.
That said, you want to tap into the DOMContentLoaded event:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Java Script Practicing</title>
</head>
<body>
<form method="post">
<input class="userinput" type="text" value="Sample here" />
<button class="gobutton">Click !</button>
</form>
<script>
document.addEventListener("DOMContentLoaded", function() {
var button = document.querySelector("button.gobutton");
button.addEventListener("click", function(evt) {
console.log("button was clicked");
}):
var input = document.querySelector("input.userinput");
input.addEventListener("click", function(evt) {
input.value = "";
}):
});
</script>
</body>
</html>
If you want to call your functions from the html as you are doing, you need them to be in the global scope.
Take the definitions for the functions go() and clear() out of the onreadystatechange function. You can still use that function to call the other two, but they must be defined globally.
Also, you cannot simply change the value of the variable x and have that update the element with id=x on the page. Instead, you can use ELEMENT.setAttribute('value', '') to clear the value.
function go() {
alert("done");
}
function clear() {
var x = document.getElementById("x");
x.setAttribute('value', '');
}
document.onreadystatechange = function () {
if (document.readyState == "complete") {
go();
clear();
}
}
Mike has answered your question. Just explaining why your way didn't work. Your functions (go, clear) have become local to the onreadystatechange's callback function's scope. I.e a closure
Is it possible to get the JavaScript fired event from called JavaScript function without passing any event parameter?
Here is the sample code:
<html>
<head>
<script>
function myFunction()
{
// How I will get from here the fired event ??
}
</script>
</head>
<body>
<p id="paragraghhh" onclick="myFunction()">
Click on this paragraph. An alert box will
show which element triggered the event.
</p>
</body>
</html>
Within a JavaScript function, you can reference the this.event attribute.
For example,
function myFunction(){
alert(this.event.type);
}
Alerts the JS event, which in this case is 'click'
Try this:
onclick="myFunction(event)"
JS:
function myFunction(e)
{
console.log(e.target);
}
OR:
onclick="myFunction.call(this)"
JS:
function myFunction()
{
console.log(this);
}
Better solution:
document.getElementById('paragraghhh').addEventListener('click', function(){
console.log(this);
});
Just change HTML to
<p id="paragraghhh" onclick="myFunction(event)">
Click on this paragraph. An alert box will
show which element triggered the event.
</p>
And JS to
function myFunction(event)
{
// Handle event
}
how to trigger onmouseup handler from javascript
i have my button
<input id="x" onmouseup="doStuff()">
and i want to trigger
document.getElementById("x").onmouseup();?????
If you want to use event binding there is always this way of doing things
document.getElementById("x").addEventListener("mouseup", function(){
alert('triggered');
}, false);
Here is the example JSFiddle of it.
Or if you want to actually "Trigger the event" try this
var evt = document.createEvent("MouseEvents");
evt.initEvent("mouseup", true, true);
document.getElementById("x").dispatchEvent(evt);
You've already answered your question :)
Simply call
document.getElementById("x").onmouseup()
in your code.
I've added an example here:
http://jsfiddle.net/cUCWn/2/
How about binding the mouseup event of "x" to a function, and then call that function from doStuff?
You pretty much have the answer there.
<input id="x" onmouseup="doStuff()" />
and then just declare your function
<script type="javascript">
function doStuff() {
alert("Yay!");
}
</script>
Alternatively, you can attach the event from Javascript. i.e.
<script type="text/javascript">
var x = document.getElementById("x");
x.onmouseup = doSomething;
function doSomething() {
alert("Yay!");
}
</script>