I am looking for the JavaScript code that can assist me in getting something similar to the button onclick event. Please take a look at the code below.
Javascript code
<script type='text/javascript'>
function myPopup() {
var overlay = $('<div id="overlay"></div>');
$('.x').click(function() {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
var obj = document.getElementsByClassName('clickLink');
// alert("name");
myScript = function() {
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
};
obj[0].addEventListener("click", myScript);
}
</script>
HTML Code
<div class='popup'>
popup content here
</div>
<div id='container'>
<button class='clickLink'>
Click Here to See Popup!
</button>
<!-- this is working 5ne i called class in javascript -->
<button type="submit" onclick='myPopup();'>
Click Here to See Popup!
</button>
<!-- but developers need like onclick event -->
</div>
</body>
This popup script is working fine but I need an onclick event like button onClick='myfunction()'
please any one help me Thanks
If I understand correctly you want to know how onclick event works in JavaScript, if that is the case as your question is not entirely clear, try something to the effect of the following:
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
Related
Is it possible to tell from a parent window if a popup window has fully loaded?
<body>
<div id="btn">display web page</div>
<div id="somediv">
</div>
</body>
I write the following script to determine if the pop up is already loaded, but it does not work.
<script>
$("#somediv")[0].onload = function(){
alert('loaded');
console.log("rr");
};
</script>
Is this what you want?
<body>
<div id="btn">display web page</div>
<div id="somediv">
</div>
</body>
$("#somediv").load("a.html", function(){
alert('loaded');
console.log("rr");
});
https://jsfiddle.net/jboo92k4/1/
Is this what you were looking for?
<html>
<head>
<script type="text/javascript">
var winPop;
function OpenWindow() {
winPop = window.open("popupwin.html");
CheckWinStatus();
}
function CheckWinStatus() {
try {
asdf = winPop.document.body;
WindowLoaded();
}
catch(e) {
setTimeout("CheckWinStatus()",1000);
}
}
function WindowLoaded() {
alert(winPop.document.title);
}
</script>
</head>
<body>
<form name="Form1">
<input type="button" name="B1" value="Open" onclick="OpenWindow()">
</form>
</body>
</html>
The function OpenWindow() is called when button b1 is clicked.
Inside OpenWindow(), a popup window popupwin.html is made to open.
CheckWinStatus() checks whether the popup has fully loaded or not. It has a timeout value of 1000 ms.
When the popup window has fully loaded, WindowLoaded() is called. This is where you would perform your popup dependent action.
newbie to java script , I want to do like when any one click on first Button,then second button is disabled for 30 seconds , after the enabled of second button, click on second button and third button visible to the user. I know simple disable enable buttons on tutorials Thanks.
<!DOCTYPE html>
<html>
<body>
<input type="button" id="myBtn" value="My Button">
<p>Click the button below to disable the button above.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myBtn").disabled = true;
}
</script>
</body>
</html>
Use setTimeout function to do it.
<script>
function myFunction() {
document.getElementById("myBtn").disabled = true;
setTimeout(function(){
document.getElementById("myBtn").disabled = false;
}, 5000);
}
</script>
Hope it works.
Use setTimeout() function and variables to flag click status:
setTimeout("myFunction();", 30000);
see this plunker http://embed.plnkr.co/ZUmGoGEr2TYHlfPhUJgK/preview
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<input type="button" id="myBtn" value="My Button" onclick="document.getElementById('thirdBtn').style.display='block'">
<input type="button" style="display:none;" id="thirdBtn" value="Third Button">
<p>Click the button below to disable the button above.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById('thirdBtn').style.display='none';
document.getElementById("myBtn").disabled = true;
setTimeout(function(){
document.getElementById("myBtn").disabled = false;
}, 30000);
}
</script>
</body>
</html>
I have a simple html page
<body>
<button type="button" id="button1" onclick="foo()">Result!</button>
<script type="text/javascript">
function foo() {
var button = document.getElementById("button1");
}
</script>
</body>
I want to change the button title on click.
The title might include HTML tags and I want it to be presented as is (without formatting).
I've tried the way suggested in this post and it works great for a regular text. Unfortunately it formats the HTML tags and doesn't present the non-formatted text:
<body>
<button type="button" id="button1" onclick="foo()">Result!</button>
<script type="text/javascript">
function foo() {
var button = document.getElementById("button1");
button.innerHTML = "<strong>my text</strong>"
}
</script>
</body>
To be clear, I want the title to be <strong>my text</strong> and not my text.
So what is the right way to present a non-formatted text inside the button?
The innerText attribute will do the work:
<body>
<button type="button" id="button1" onclick="foo()">Result!</button>
<script type="text/javascript">
function foo() {
var button = document.getElementById("button1");
button.innerText = "<strong>my text</strong>"
}
</script>
</body>
Note: Firefox doesn't support innerText, but has its own property called textContent, which can be used instead.
I Just can't find the answer to this.
I have a div in my webpage, above on a different layer. I simply want to have a button or tag inside this div which will hide it. I have tried:
<html>
<head>
<script language="javascript">
myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
Could someone please show me where I have gone wrong.
Do this:
<html>
<head>
<script language="javascript">
function myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
This is just because you didn't define myFunction() as a function .
Next time, open your debugger with F12, and see what it is saying... !
You missed out declaring your function at the beginning
myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
You should declare using the keyword function.
function myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
You should probably use an event listener on your anchor also instead of using inline javascript. No harm just best practice.
Try this:
<html>
<head>
<script language="javascript">
function myFunction()
{
document.getElementById("corporate_background").style.display='none';
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
</html>
I think what you wanna do is hide the content, so you can hide content like this,
Make the button ;
<button id="btn" name="button">Hide content</button>
By clicking the button it wil hide the div corporate_background
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#corporate_background').hide();
});
});
</script>
This question already has answers here:
How do I find out which DOM element has the focus?
(20 answers)
Closed 9 years ago.
I have a simple form with three textareas each with a different id. I want to be able to press the button and return the id of the textarea where I am typing in. Instead when I press the button I receive the id of the button which is button1:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function printTagName() {
$("#p1").html($(":focus").attr("id"));
}
</script>
</head>
<body>
<form>
<textarea id="textarea1"></textarea>
<textarea id="textarea2"></textarea>
<textarea id="textarea3"></textarea>
</form>
<p id="p1"></p>
<button type="button" id="button1" onclick="printTagName()">Press</button>
</body>
</html>
How can I fix this problem?
When the button is clicked focus shifts to the button. Save the element when a textarea receives focus, then print out the id of the textarea.
var focusElement = {};
$("textarea").focus(function(){
focusElement = this;
});
$("#button1").click(function(e){
e.preventDefault();
$("#p1").html(focusElement.id);
});
JS Fiddle: http://jsfiddle.net/ZYK7f/
This would work unless you need to know if whatever had focus no longer has it.
For example if the user clicks something that is NOT a textarea before hitting the button and you need to know this, the code will become quite complex
var hadFocus;
$(function() {
$("textarea").on("focus",function() { hadFocus=this.id; });
});
function printTagName() {
$("#p1").html(hadFocus || "No textarea had focus");
}
Save the TextArea that has focus last using:
var lastFocus;
$("TextArea").focus(function () {
lastFocus = this;
});
And this call the printTagName function
function printTagName() {
$("p").html(lastFocus.id);
});
Thank you very much Kevin Bowersox and everyone else for answering my question. Here is the complete code for Kevin's solution (I added a $(document).ready(function() {...}); to his solution):
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var focusElement = {};
$("textarea").focus(function(){
focusElement = this;
});
$("#button1").click(function(e){
e.preventDefault();
$("#p1").html($(focusElement).attr("id"));
});
});
</script>
</head>
<body>
<form>
<textarea id="textarea1"></textarea>
<textarea id="textarea2"></textarea>
<textarea id="textarea3"></textarea>
</form>
<p id="p1"></p>
<button type="button" id="button1">Press</button>
</body>
</html>