How can I pass argument to function redirect in JavaScript
Here is my code:
<script type="text/javascript">
<!--
function redirectlink(text){
window.location = "index.php?keyName="+ text;
}
//-->
</script>
<form>
<button type="button" id="butt_1" onclick="redirectlink(KEY_POWER)"> 1 </button>
Thank you in advance.
This can be done either by using getElementById and addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo">Click</button>
<script type="text/javascript">
document.getElementById("foo").addEventListener("click", function(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
})
</script>
</body>
</html>
either onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo" onclick="action()">Click</button>
<script type="text/javascript">
function action(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
}
</script>
</body>
</html>
Using onclick is deprecated.
With just only JavaScript (without jQuery / Angular etc.) you can use addEventListener on click event.
for example:
var btn = document.getElementById('butt_1');
btn.addEventListener('click', function(e) {
// your code
});
In this function you can for example get value/txt from this button element and something else which you want.
Related
I want to open a new window on click of a button. It is opened successfully but I can't write data and set title simultaneously.
Does anybody have any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title And Data Both</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var filename ="console.log";
var newwin = window.open("","","width=200,height=100");
newwin.document.title="Title";
newwin.document.write("<h1>XXXX</h1>");
});
});
</script>
</head>
<body>
<button type="button">Get Substring</button>
</body>
</html>
The document.write() overwrites all existing HTML(including the title).
One way you could do it, is to set the title after the write.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title And Data Both</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
var filename = "console.log";
var newwin = window.open("", "", "width=200,height=100");
newwin.document.write("<h1>XXXX</h1>");
newwin.document.title = "Title";
});
});
</script>
</head>
<body>
<button type="button">Get Substring</button>
</body>
</html>
How do I use a alert to stop a link from going to the page? I've been trying to figure it out but it's sending me to the link anyways
<!DOCTYPE HTML>
<html>
<head>
<title>Do Not Click</title>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript">
function confirm_alert(node) {
return confirm("STOP CLICKING THE LINK");
}
</script>
Don't click link
</body>
</html>
Just return false from the confirm_alert function.
<!DOCTYPE HTML>
<html>
<head>
<title>Do Not Click</title>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript">
function confirm_alert(node) {
confirm("STOP CLICKING THE LINK");
return false;
}
</script>
Don't click link
</body>
</html>
You can pass the param event and execute the function .preventDefault()
<!DOCTYPE HTML>
<html>
<head>
<title>Do Not Click</title>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript">
function confirm_alert(node, e) {
e.preventDefault();
return confirm("STOP CLICKING THE LINK");
}
</script>
Don't click link
</body>
</html>
A better approach is binding the event click:
document.querySelector('a').addEventListener('click', confirm_alert);
function confirm_alert(e) {
e.preventDefault();
return confirm("STOP CLICKING THE LINK");
}
Don't click link
Put the redirect in the js function. Put a check in it for showing the alert or for going to the url.
Something like this:
window.location.href = "http://stackoverflow.com";
Not sure tho. Not tested it.
I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>
This is working fine.
But if I try to do the same thing by creating a separate JavaScript function, the code is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick=displayDate()>The time is?</button>
<script>
function displayDate(){
this.innerHTML=Date();
}
</script>
</body>
</html>
What is the reason for this?
Your this isn't refer to the button itself, when it is in the function scope. You can achieve to the desired result with many approaches.
1) You can pass this to the function as a parameter
function displayDate(context){
context.innerHTML = Date();
}
<button onclick="displayDate(this)">The time is?</button>
2) Using explicit bindings, like call or apply
function displayDate(){
this.innerHTML = Date();
}
<button onclick="displayDate.call(this)">The time is?</button>
You can try to do something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="test" onclick=displayDate()>The time is?</button>
<script>
function displayDate(){
document.getElementById("test").innerHTML=Date();
}
</script>
</body>
</html>
What is diffrent between these syntax please Explain in details?
$(document).on("click", "#index1", function() {
$(p).hide();
});
$("#index2").on("click", "#index1", function() {
$(p).hide();
});
$("#index1").on("click", function() {
$(p).hide();
});
In first case you add click listener to "document", but it be executed only if you click at "#index1".
In second - you add listener to "index2" and it will be executed only if you click at "#index1" located inside of "#index2".
In the third case you just add listener to "index1"
Lets imagine a webpage at first.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id='index1'>click me</button>
</body>
</html>
This will work
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id='index1'>click me</button>
<script type="text/javascript">
$("#index1").on("click", function () {
$(p).hide();
});
</script>
</body>
</html>
This won't work, because the element did not exist while the script was executed.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
$("#index1").on("click", function () {
$(p).hide();
});
</script>
<button id='index1'>click me</button>
</body>
</html>
But with a workaround, it would
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
$(document).on("click", "#index1", function() {
$(p).hide();
});
</script>
<button id='index1'>click me</button>
</body>
</html>
This says whenever a click event is fired on the document check if the click was fired on #index1 element. So even if, the element did not exist the callback, is attached to the document node. Now whenever a click is fired on the document it will check if it originated from #index1
I want to write the following code by using functions:
<!DOCTYPE html>
<html>
<head>
<title> Test Java Script</title>
</head>
<body>
<button onclick=this.innerHTML=Date();> The Time Is: ? </button>
</body>
</html>
So I created a function and pass "this" as parameter, but it doesn't work:
<!DOCTYPE html>
<html>
<head>
<title> Test Java Script</title>
</head>
<body>
<button onclick=setTime(this)> The Time Is: ? </button>
</body>
<script type="text/javascript">
function setTime(Object b) {
b.innerHTML=Date();
}
</script>
</html>
What am I doing wrong ?
Try this:
<!DOCTYPE html>
<html>
<head>
<title> Test Java Script</title>
<script type="text/javascript">
function setTime(b) {
b.innerHTML=Date();
}
</script>
</head>
<body>
<button onclick="setTime(this);"> The Time Is: ? </button>
</body>
</html>
Add quotes to onclick.
Remove "Object" from function declaration.
Click the button.
Just remove the Object type from your function parameter and you're golden:
function setTime(b) {
b.innerHTML=Date();
}
As Katana314 mentioned in their comment, JavaScript doesn't use explicit types.
Here's a fiddle: http://jsfiddle.net/3cyj5916/